background

Our company has a CDN service. Every time UI designs a webpage for us, we need to download the picture on the website dedicated for design, then open the CDN background, upload the picture to the background from local, and copy the link generated by CDN into the code. More often than not, you may have to go to the local site to delete those extra images that you download

Train of thought

Make use of the custom right click menu function of Chrome plug-in, if you right-click on the picture and add an option, click this option, the code will automatically get the picture and then call the CDN interface to upload, and then automatically copy the interface return value to the clipboard, and then pop a prompt to tell the user to paste

This implementation of the use of a lot of simple ~ right-click, click upload picture, and then wait for a prompt to go to the code paste

code

There are three files: manifest.json

{
    "manifest_version": 2."name": "xx"."description": "xx"."version": "1.0"."background": {
        "page":"background.html"}}Copy the code

background.html

<! doctype html><html>
    <head>
        <meta charset="utf-8">
        <script src="background.js"></script>
    </head>
    <body>
    </body>
</html>
Copy the code

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(); // Select the object
    document.execCommand("Copy") // Execute the browser copy command
    alert("I have copied the picture link, go paste it.")
    setTimeout(() = > {
        document.body.removeChild(Url2)
    }, 200)}// Image upload
var downloadImg = function(src) {
    return new Promise((resolve, reject) = > {
        if(! src) {return reject('Link is empty')}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("Please enter a file name", filename)
            if(! filename) {return reject('Cancel upload')}var blob = new File([uBuffer], filename, {
                type: 'image/png'
            })
            resolve(blob)
        }

        myAjax({
            url: src,
            responseType: 'arraybuffer'.contentType: 'arraybuffer'.method: 'GET'.successCb: mngFile,
            errCb: () = > {
                reject('Image retrieval failed')}})})}var uploadImg = async function (src) {
    const formData = new FormData()
    formData.append('file'.await src)

    myAjax({
        url: '-- interface path --'.method: 'POST'.data: formData,
        successCb: (res) = > {
            const url = 'https:' + (JSON.parse(res).url)
            copyUrl2(url)
        },
        errCb: (e) = > {
            alert('Image upload failed')}}}// Customize the right-click menu item
chrome.contextMenus.create({
    title: "Upload picture".contexts: ['image'].onclick(img) {
        uploadImg(downloadImg(img.srcUrl))
    }
})
Copy the code

These three files are the end of the plug-in

Added to chrome

Type Chrome :// Extensions/in the browser address bar and open developer mode in the upper right corner of the page

Then click on this:

Then select the folder of this project in the popup file selection box, and you are ok