Teach you how to develop a browser translation plug-in

Preface

Recently I am studying some interesting things. I played a WeChat chat bot a few days ago to beautify pictures. Today I want to write a browser plug-in. Don’t say much, just start.

text

It is relatively simple to write a browser plug-in. Just like our usual development projects, first create a folder and ensure that there will be a manifest.json file below.

This is my project structure:

Note: There will be a small hole here, the mainfest.json file name must be written correctly, otherwise an error will be reported when the plugin is loaded in the developer mode.

Next is a most basic configuration

{
    "name": "IRON MAN",
    "version": "1.0.0",
    "description": "I am iron man",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "icons": {
        "16": "images/4.png",
        "48": "images/4.png",
        "128": "images/4.png"
    },
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": "images/4.png"
    }
}

After configuration, you can go to the browser to add the plug-in, it's that simple

You can enter the plug-in management page from the upper right menu -> More tools -> Extensions, or you can directly enter chrome://extensions in the address bar to access.

Check the developer mode to load the plug-in directly in the form of a folder, otherwise you can only install files in the .crx


Configuration of manifest.json

In manifest.json , manifest_version , name , version are indispensable, description and icons are recommended.

Here is the analysis pasted from the boss:

{
    // 清单文件的版本，这个必须写，而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "简单的Chrome扩展demo",
    // 图标，一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式，如果指定JS，那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题，可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面打开才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示content-script可以配置多个规则
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页，这个很重要，不要浪费了这个免费广告位
    "homepage_url": "https://www.baidu.com",
    // 覆盖浏览器默认页面
    "chrome_url_overrides":
    {
        // 覆盖浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默认的样式，推荐使用
        "chrome_style": true
    },
    // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
    "omnibox": { "keyword" : "go" },
    // 默认语言
    "default_locale": "zh_CN",
    // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
    "devtools_page": "devtools.html"
}

The next step is to introduce how I implemented the functions of the two plug-ins

1. Register for monitoring events

Register the listener event in the background script of the extension: the listener is triggered after the script is loaded

chrome.runtime.onInstalled.addListener(function () {
    chrome.storage.sync.set({ color: '#e84f20' }, function () {
        console.log("虾皮的橙色");
    });
     chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostEquals: 'www.baidu.com' },
            })
            ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});

2. Registration authority

Because we use chrome.storage and other APIs in the background, we need to register manifest.json

   "permissions": [
        "storage",
        "declarativeContent",
        "tabs",
        "activeTab",
        "contextMenus",
    ],

3. Refresh our extension on the extension page

Click to view the background page, you can see the printed content

4. Introduce the ICON icon

In fact, the icon has been configured in the previously released configuration file, and the icon of Iron Man can also be seen in the screenshot above. So here are two points to note:

• For uncompressed extensions, only png icons can be used.
• The icons can be adapted to different sizes, if you are lazy, use one for all.

5. Introduce popup page

I simply wrote two functions in the page: change the color of the page and restore the color of the page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            height: 50px;
            background-color: #e84f20;
            border-radius: 4px;
            line-height: 50px;
            text-align: center;
            padding: 0 5px;
            color: #fff;
            margin-right: 20px;
        }

        .wrapper {
            width: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <Button id="btn" class="btn">点击变成虾皮红</Button>
        <Button id='clear' class="btn">恢复</Button>
    </div>
    <script src="./popup.js"></script>
</body>

</html>

The js file is as follows:

let changeColor = document.getElementById('btn');
let clear = document.getElementById('clear');
chrome.storage.sync.get('color', function (data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function (element) {
    let color = element.target.value;
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.executeScript(
            tabs[0].id,
            { code: 'document.body.style.backgroundColor = "' + color + '";' });
    });
};
clear.onclick = (ele) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        let color = '#fff'
        chrome.tabs.executeScript(
            tabs[0].id,
            { code: 'document.body.style.backgroundColor = "' + color + '";' });
    });
}

Use chrome.storage.sync.get get the color in memory. Use chrome.tabs.executeScript to inject scripts into the page.

It should be noted that: the chrome APIs we use need to be configured in manifest.json

Now we can play our plug-in on baidu's page!

After clicking

The color can also be restored.

Then the first function of coloring and restoring the website has been completed. Next, I want to do a translation function.

6. Continue to add the background script

   chrome.contextMenus.create({
        id: "9527",
        contexts: ['selection'],
        title: '让钢铁侠翻译：%s', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
    })
    console.log(chrome.contextMenus)
    chrome.contextMenus.onClicked.addListener((info, tab) => {
        const query = info.selectionText;
        const url = "https://fanyi.baidu.com/translate?#est/zh/" + query;
        chrome.tabs.create({ url: url });
    })

The function of this script is to create a right-click operation menu in the page, as shown in the figure

We can add a listener event to go to the corresponding URL to do something when clicked. In the example, I added a translation function to the selected text, and jumped to Baidu Translation by listening to the click event, and took the selected text to translate.

Note here too: contextMenus need to be registered in manijest.json.

At this point our function has been fully realized. Due to the lack of creativity and agility, there is currently no research and development of more practical functions. I hope you can give me some suggestions~~

finally

Some more comprehensive tutorials on the Internet + API

Google plug-in development API

Plug-in Development Guide

Finally, thank you all!