七牛在线管理图片预览chrome插件
七牛云图片存储有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.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')
})
效果展示
原理
利用插件监听七牛接口请求，请求完成后进行dom操作，获取到图片名称，拼接出图片地址，在需要的地方插入一个img标签，这样就实现了简易的七牛图片预览功能。