谷歌扩展程序编写步骤

基础demo

1：创建一个文件名为:manifest.json，编辑内容如下

{
    "manifest_version":2,
    
    "name": "谷歌扩展程序",
    "description":"扩展程序描述！！！！",
    "version":"2.0",

    "browser_action":{
        "default_icon":"gu.png",
        "default_popup":"test.html"
    },
    "permissions":[ "tabs" ],
    "content_scripts":[
        {
            "matches":["https://www.baidu.com/*"],
            "js":["test.js"]
        }
    ]

}
content_scripts节点中，matches表示在什么地方，js代表要执行的js。

2：创建里面定义的test.html

<title>谷歌扩展程序demo</title>

<body>
    <div>扩展demo</div>
</body>

3：创建定义的test.js

(function(){
    alert("执行了")
})();

 4：找个图标，命名为gu.png

最后的文件结构如下

上面的程序表示，在baidu域名后面，会打印js中的值

 5：打开谷歌浏览器，打开开发者模式，加载已解压的扩展程序。选择这个目录体

 

 

6： 注意事项

自己使用的时候，需求比较复杂，这个得有js相关知识就可以开展。

7：实际编写的案例

下面提供一个工作中实际用到的一个代码，也比较简单。

这个扩展程序的目的也很简单，就是先找到一个calss，在它下面增加一个按钮。然后给按钮绑定点击事件，点击事件的内容是，获取某个标签，然后不为空的情况下，循环删除。

(function(){
    //获取顶部按钮列表对象 增加一个点击按钮
    let pageHeadDocument = document.getElementsByClassName('class-name');
    var divElement = document.createElement("button");
    divElement.id = "execute-btn";
    divElement.className = "div-css"
    divElement.innerText = "按钮名称";
    pageHeadDocument[0].appendChild(divElement);

    //获取上面定义的目标id 绑定点击事件
    let classElement = document.getElementById("clear-btn");
    classElement.addEventListener('click', function() {
        //获取select标签
        let imgElement = document.getElementsByTagName("select");
        console.log(imgElement)
        //如果标签不为空，则循环删除
        if(imgElement){
            for (let i = 0;i < imgElement.length;i++) {
                imgElement[i].removeAttribute("data-ui");
            }
        }
      });
})();

 

posted @ 2023-08-01 16:29  鸭猪是的念来过倒  阅读(65)  评论(0)  编辑  收藏  举报