从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之间的通信；