浏览器插件开发
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);
}
消息通信
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("我收到了你的消息!");
}
})
右键菜单
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')
`
})
}