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

目录

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

vscode插件上传图片到七牛

vscode插件上传图片到七牛

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

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

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

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

为了能够直观的看到图片,决定开发一款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.yuedun.wang"
}

background.js

chrome.webRequest.onCompleted.addListener(
    function (details) {
        console.log(details);
        if (details.statusCode == 200) {
            chrome.tabs.sendMessage(details.tabId, "message", res => {
                console.log('bg=>content')
                console.log(res)
              })
        }
    },

    { urls: ["https://portal.qiniu.com/api/kodov2/rsf/list*"] }  //监听页面请求,你也可以通过*来匹配。
);

content.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log(message)
    // 这里是返回给bg的内容
    var trs = $('.ant-table-tbody tr td:nth-child(2)');
    var size = trs.size();
    var newTrs = $.makeArray(trs).splice(size - 50, 50)
    newTrs.forEach(element => {
        var td = $(element).find(".editCell_f2UJB > .content_3-COB > .formatted_2iUZF")
        console.log(td.html());
        td.after('<img src="https://hopefully-img.yuedun.wang/' + td.html() + '?imageMogr2/thumbnail/!20p/" style="width:100px;">')
    });
    sendResponse('get the message')
})

效果展示

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

原理

利用插件监听七牛接口请求,请求完成后进行dom操作,获取到图片名称,拼接出图片地址,在需要的地方插入一个img标签,这样就实现了简易的七牛图片预览功能。

项目地址:https://github.com/yuedun/chrome-plugin