背景
我们公司有个CDN服务，每次UI给我们设计网页后，我们要在设计专用的网站上去下载图片，然后打开CDN后台，接着从本地上传图片到后台，然后复制CDN生成的链接到代码中。这样的情况多了可能还得去本地删除那些下载的多余的图片
思路
利用chrome插件的自定义右键菜单功能，如果在图片上右击鼠标就加个选项，点击此选项后，代码中自动获取图片再调用CDN接口上传，再自动将接口返回值复制到剪切板就行了，接着弹个提示告知用户去黏贴就行了
这样实现后使用起来岂不是简单很多～右键，点上传图片，然后就等程序出提示了就去代码里黏贴
代码
有三个文件：
manifest.json
{
"manifest_version": 2,
"name": "xx",
"description": "xx",
"version": "1.0",
"background": {
"page":"background.html"
}
}
background.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="background.js"></script>
</head>
<body>
</body>
</html>
background.js
var myAjax = function({url, method, successCb = () => {}, errCb = () => {}, responseType, contentType, data}) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = e => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const res = 'response' in xhr ? xhr.response : xhr.responseText
successCb(res)
} else {
errCb()
}
}
}
xhr.open(method, url, true)
if (contentType) {
xhr.setRequestHeader('Content-Type', contentType)
}
if (responseType) {
xhr.responseType = responseType
}
xhr.onerror = errCb
xhr.ontimeout = errCb
xhr.onabort = errCb
xhr.send(data)
}
function copyUrl2(value) {
var Url2 = document.createElement("input")
Url2.value = value
document.body.appendChild(Url2)
Url2.select(); // 选择对象
document.execCommand("Copy") // 执行浏览器复制命令
alert("已复制好图片链接，快去贴粘吧～")
setTimeout(() => {
document.body.removeChild(Url2)
}, 200)
}
// 图片上传
var downloadImg = function(src) {
return new Promise((resolve, reject) => {
if (!src) {
return reject('链接为空')
}
const arr = src.split('/')
let filename = arr[arr.length - 1] || ''
const mngFile = (code) => {
const length = code.length
var abuffer = code
var uBuffer = new window.Uint8Array(abuffer)
for (var i = 0; i < length; i++) {
uBuffer[i] = code.charCodeAt(i) & 0xff
}
filename = prompt("请输入文件名", filename)
if (!filename) {
return reject('取消上传')
}
var blob = new File([uBuffer], filename, {
type: 'image/png'
})
resolve(blob)
}
myAjax({
url: src,
responseType: 'arraybuffer',
contentType: 'arraybuffer',
method: 'GET',
successCb: mngFile,
errCb: () => {
reject('图片获取失败')
}
})
})
}
var uploadImg = async function (src) {
const formData = new FormData()
formData.append('file', await src)
myAjax({
url: '--CDN接口路径--',
method: 'POST',
data: formData,
successCb: (res) => {
const url = 'https:' + (JSON.parse(res).url)
copyUrl2(url)
},
errCb: (e) => {
alert('图片上传失败')
}
})
}
// 自定义右键菜单项
chrome.contextMenus.create({
title: "上传图片",
contexts: ['image'],
onclick(img) {
uploadImg(downloadImg(img.srcUrl))
}
})
整个插件就这三个文件就结束了
添加到chrome
在浏览器地址栏输入chrome://extensions/,然后在打开页面右上角的开发者模式
然后点击这个：
接着在弹出的文件选择框中选择本项目的文件夹，这样就ok了
