从0开始开发一个chrome插件(2)
原创
介绍一个插件里面js的操作；
1、manifest.json文件说明请参考上一篇文章，这此在文件中新增加了一个属性：
"content_scripts":[{
"matches":["http://*/*","https://*/*"],
"js":[
"libs/jquery-3.6.0.min.js", //引用的jquery库
"content_script.js" //新建js文件用于业务处理
],
"css":["base.css"], //css
"run_at": "document_end" //文档加载完成支线
}],manifest匹配地址的页面在刷新时会直接执行这里的代码；
2、在content_script.js编码业务处理逻辑：
例如编写一段去广告的js代码，会在页面加载完成后，将页面指定属性隐藏，实现去广告效果；
//去广告
function removeCSDNAd(){
$('#footerRightAds').hide()
$('#aw0').hide()
console.log('隐藏广告')
$('.hide-preCode-bt').click()
console.log('点击更多按钮')
}
removeCSDNAd();3、backgroud.js
backgoud.js只能执行和chrome扩展相关的函数，无法操作dom
可以再其中创建自定义菜单：
const menu = {
menus: [
{
id: "main",
visible: true,
title: "常用操作",
},
{
id: "open",
type: "normal",
visible: true,
title: "打开必应",
parentId: "main"
},
{
id: "del",
visible: true,
type: "normal",
title: "执行函数",
parentId: "main"
},
],
};
function toUrl(info) {
let url;
switch (info.menuItemId) {
case "open":
url = "https://cn.bing.com";
chrome.tabs.create({
url,
});
break;
case "del":
sendToContent();
break;
}
}
const createMenu = () => {
menu.menus.forEach(({ fn, ...data }) => {
chrome.contextMenus.create(data);
});
chrome.contextMenus.onClicked.addListener(toUrl);
};
//安装时 创建菜单
chrome.runtime.onInstalled.addListener(async () => {
createMenu();
console.log('创建了菜单')
})3、popup.js：
popup.js是popup.html打开时加载的js.同样可以操作dom;
参考上一篇文章；
4、自定义新打开标签页
在manifest.json中可以自定义标签页：
"chrome_url_overrides":
{
"newtab": "newtab.html"
},配置完成后，就可以打开自定义的标签页‘
下一篇文章，介绍一下各个js之间的通信；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读