七牛在线管理图片预览chrome插件

Tue, 06 Jul 2021 19:32:15 +0800

七牛云图片存储有10G的免费额度，对于个人来说足够使用了。使用七牛图片存储涉及到图片上传，查看，管理的问题。为了能提高使用效率，我们可以利用好一些工具。

vscode插件上传图片到七牛

vsocode扩展市场有很多上传到七牛的插件，大家可以根据需要自己选择。

上传的图片多了以后，有时需要找一些已经上传的图片来使用，目前我所知道的方法还仅限于登录的七牛后台上查看。

可以看到，七牛的管理后台做的不能说很差，可以说是很气人。要预览图片必须点击“详情”，当你关掉预览窗口时却不知道查看的是哪张图片，也没有个高亮聚焦。而且也没有时间排序，只有名称排序，真的是很难用。

为了能够直观的看到图片，决定开发一款chrome插件，将图片直接显示出来，而不用再点击查看。

关于chrome插件开发的细节本文暂不细说，直接上代码。

代码展示

manifest.json

{
  "manifest_version": 2,
  "name": "chome-plugin",
  "version": "0.0.1",
  "description": "chrome示例插件",
  "icons": {
    "16": "images/icon-16x16.png",
    "48": "images/icon-48x48.png",
    "128": "images/icon-128x128.png"
  },
  "page_action": {
    "default_icon": {
      "48": "images/icon-48x48.png"
    },
    "default_popup": "html/popup.html",
    "default_title": "Hello yuedun"
  },
  "author": "yuedun",
  "background": {
    "scripts": [
      "scripts/jquery.min.js",
      "scripts/background.js"
    ]
  },
  "devtools_page": "html/devtools-page.html",
  "content_scripts": [
    {
      "js": [
        "scripts/jquery.min.js",
        "scripts/content.js"
      ],
      "css": [
        "styles/yuedun-insert.css"
      ],
      "matches": [
        "https://portal.qiniu.com/kodo/bucket/resource?bucketName=*"
      ],
      "run_at": "document_start"
    }
  ],
  "permissions": [
    "cookies",
    "*://*/*",
    "webRequest"
  ],
  "homepage_url": "https://www.hopefly.top"
}

background.js

vscode正则查找替换

Mon, 14 Jun 2021 10:40:52 +0000

查找某一类型字符串：

正则表达式onclick=.*" 会查找到所有： onclick="_msq.push(['trackEvent', '210074305d6b0409-09c7759e04e98528', ''pcpid', '']);"

onclick=是固定一样的字符，

.代表除\r和\n之外的任意字符，等价于[^\r\n]

*代表匹配前面的模式 0或多次 {0,}

"这是字符串最后一个字符

在vscode中的效果如下：至于要替换成什么就看自己需求了，如果要给选中的字符串包裹字符串则需要修改成这样：

查找替换

查找：(onclick=.*")

替换：aaa($1)

结果：

替换字符串两头，保留中间

两部分文字交换位置

相同模式的文字交换位置。

查找：($\d{4}-\d{1,2}-\d{2}$) (\[.*\))

替换：$2 $1

结果：

vscode中一对括号()代表一个变量。

第一组正则 ($\d{4}-\d{1,2}-\d{2}$) 对应 $1，

第二组正则 (\[.*\))对应 $2，以此类推。

所以，可以查找多组数据，在替换部分将两个对应变量交换位置即可。

Vscode on 月盾的博客