background

Front-end to do some personal projects, no UI is really difficult, PS and need to learn the cost, just think about using some design website to do some pictures, after doing a good job to find Vip, think personal projects are not commercial, cut a picture, do the effect, do it is not better to do a plug-in to automatically go to the watermark.

To start

  • Took a cursory look at the Google plugin
    • [dry goods] Chrome plug-in (extension) development overview
  • Analyze the watermark position of a station (bright watermark, listen to the boss said there is a dark watermark, temporarily not considered)
    • Manual analysis (F12 directly look, haha)
  • The watermark was found to be in the background image position of the image-watermark class name
  • Some of them might be a single element.
  • The next step is to find the element and delete it (manually deleting it is also possible, as it was done before).

Google plug-in

  • Write some simple interface (popup.html)

  • Use HTML2Canvas to download the graph
    • Turn the DOM into an image
    const downloadPng = () => { if(! shareContent) return let rect = shareContent.getBoundingClientRect() let opts = { x: rect.left, y: rect.top, scale: window.devicePixelRatio*2, useCORS: true , } html2canvas(shareContent, opts).then(canvas => { let img = new Image(); img.src = canvas.toDataURL(); var a = document.createElement('a'); SRC = img.src; document.body.appendChild(a); a.click(); document.body.removeChild(a);Copy the code
    • Html2canvas has a bit of a pit problem. Set useCORS to true for cross-domain problems
    • Some style problems cannot be solved temporarily
  • A simple communication between popup.js and Content.j will do
function sendMessageToContentScript(message, callback) {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
            if (callback) callback(response);
        });
    });
}
Copy the code
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.remove) {
        removeFigureMonster();
    };
    if (request.download) {
        downloadPng()
    }
});
Copy the code
  • The manifest.json file is the core plug-in file
{" Manifest_version ": 2, "name":" To watermark!" ", "version": "0.0.1", "description":" Remove the watermark from the main drawing website and download!" , "icons": { "16": "libs/icon/logo1.png", "48": "libs/icon/logo1.png", "128": "libs/icon/logo1.png" }, "background": { "page": "libs/html/background.html" }, "browser_action": { "default_icon": "libs/icon/logo1.png", "default_title": "Remove the bright watermark from the mainstream graphic site and download it!" , "default_popup": "libs/html/popup.html" }, "content_scripts": [ { "matches":["<all_urls>"], "js":["/libs/plugin/htmltocanvas.js","libs/js/content.js"], "run_at": "document_start" } ], "permissions": [ "contextMenus" ] }Copy the code

From there, a Google plugin is simply done

  • You can click to watermark and download
  • Other design sites should be similar

The source code

  • Source code, write without star, self

The last

The above is only for technical communication ~ we do not blindly use in the actual scene, use the regular way. Commercial still need to buy copyright, support original!

Reference documentation

1. Talk about front-end watermarking from cracking a design website (detailed tutorial)

2, [dry goods] Chrome plug-in (extension) development overview