chrome浏览器插件开发

浏览器插件开发

chrome官方文档（英文版） https://developer.chrome.com/extensions
chrome非官方文档（中文版） https://crxdoc-zh.appspot.com/extensions/
360中文文档：https://open.chrome.360.cn/extension_dev/overview.html
从零深入Chrome插件开发

插件开发要素

每个应用（扩展）都应该包含下面的文件：

• 一个manifest文件
• 一个或多个html文件（除非这个应用是一个皮肤）
• 可选的一个或多个javascript文件
• 可选的任何需要的其他文件，例如图片

在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用（扩展），可以自动生成.crx文件。

复制字符串

function copy_to_clipboard(txt_str){
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', txt_str);
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
        //Alert(500,'复制成功');
    }
 document.body.removeChild(input);
}
1
2
3
4
5
6
7
8
9
10
11
12

消息通信

content_script.js
chrome.runtime.sendMessage({target: element, from: 'isiframe'}, 
        function(response) {
            console.log(response);
        }
    );
background.js
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.from == 'isiframe') {
    sendResponse("我收到了你的消息！");
}
})
1
2
3
4
5
6
7
8
9
10
11
12

右键菜单

background.js

// 右键菜单创建
chrome.contextMenus.create({
    id: "2",
    title: "菜单1",
    contexts: ["all"],
    onclick: func1
}, function () {
    // console.log('contextMenus are create.');
});
chrome.contextMenus.create({
    id: "3",
    title: "菜单2",
    contexts: ["all"],
    onclick: func2
}, function () {
    // console.log('contextMenus are create.');
});
//分割线
chrome.contextMenus.create({
type: "separator",
});
function func1(info, tab) {
    // do something.
    chrome.tabs.executeScript(null, {
        code: `
        var resObj = {}
        console.log('121212')
        `
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30