谷歌插件开发1

谷歌插件功能：切换不同颜色的谷歌浏览器当前页的背景颜色
第一步：创建一个名为chrome的文件夹。

第二步：在创建的文件夹下创建manifest.json、popup.html、popup.js。

第三步：在manifest.json中写入以下代码

{
    “manifest_version”: 3,//开发版本
    “name”: “My Popup Extension”,//插件名称
 
    “version”: “1.0”,//插件版本
    “action”: {
      “default_popup”: “popup.html”//默认浏览器按钮页面
    },
    //权限设置
    “permissions”: [
      “activeTab”,//浏览器当前页
      “tabs”,//所有页
      “scripting”//可以通过 JavaScript 代码与网页进行交互、修改页面内容和行为
    ]
  }

第四步：在popup.html中写入以下代码（html布局以及js引入），popup.html是浏览器按钮插件的弹框一般在右上角展示。

<!–
 * @Author: liangzai
 * @Date: 2023-06-07 16:27:25
 * @LastEditTime: 2023-06-25 13:57:10
 * @LastEditors: liangzai
 * @Description: 页面布局
–>
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 10px;
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }
        body{
            width: 300px;
            height: 200px;
        }
        div{
            width: 300px;
            height: 200px;
        }
        li{
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            cursor: pointer;
        }
    </style>
    <script src=”popup.js”></script>
</head>
<body>
    <div>
        <ul>
            <li class=”li” style=”border: 1px solid gray;border-radius: 10px;”>灰色</li>
            <li class=”li” style=”border: 1px solid blue;border-radius: 10px;”>蓝色</li>
            <li class=”li” style=”border: 1px solid skyblue;border-radius: 10px;”>天空蓝</li>
            <li class=”li” style=”border: 1px solid green;border-radius: 10px;”>绿色</li>
        </ul>
    </div>
    <!– <script src=”popup.js”> –>
    </script>
    <!– <script src=”background.js”></script> –>
</body>
</html>

第五步：在popup.js中编写以下逻辑

/*
 * @Author: liangzai
 * @Date: 2023-06-25 10:45:40
 * @LastEditTime: 2023-06-25 16:24:52
 * @LastEditors: liangzai
 * @Description: 动态修改浏览器的背景颜色
 */
document.addEventListener(“DOMContentLoaded”, function() { //元素加载完后再执行
    var colorArr = [“gray”,”blue”,”skyblue”,”green”];//颜色切换数组
    var li = document.getElementsByClassName(“li”);//获取popup.html中的li元素
        for(let i = 0; i < li.length; i++) {
            (function(index){
                li[index].addEventListener(“click”, function(){
                    const colorIndex = index; //获取点击元素的下标
                    const color = colorArr[colorIndex];//获取数组中对应的颜色
                    //获取当前的标签页
                    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
                        const tabId = tabs[0].id;//当前页的tabId
                        chrome.scripting.executeScript({ //在当前活动的标签页中执行自定义的 JavaScript 脚本
                            target: { tabId: tabId },//指向当前页
                            function:changeBackgroundColor//执行的函数
                            ,
                            args:[color] //函数的传值
                          });
                    });
                })
            })(i)//使用闭包的方式来执行这样可以获取到index
        }
        //上面方法需要定义的函数
        function changeBackgroundColor(color){
            //修改浏览器当前页面的背景颜色
            document.body.style.backgroundColor = color;
        }
})

结束语：通过这个案例可以简单的了解下谷歌插件开发的流程。

结果截图：选择不同的颜色可以切换不同的背景颜色。

评论 (0)