浏览器插件开发

创建项目结构：

manifest.json：每个浏览器扩展的核心是manifest.json文件，它定义了插件的基本信息，包括名称、描述、版本、权限要求以及包含哪些JavaScript、HTML和CSS文件等。

Json1{
2  "manifest_version": 3,// 对于新版Chrome扩展使用v3，旧版扩展可能用的是v2
3  "name": "My Extension",
4  "version": "1.0",
5  "description": "A sample browser extension",
6  "icons": {...},// 插件图标路径
7  "background": {...},// 后台脚本配置
8  "content_scripts": [...],// 内容脚本注入规则
9  "permissions": [...],// 所需API权限列表
10  "action": {...},// 浏览器动作按钮配置
11  "options_page": "...",// 配置页面路径
12　"browser_action":{
        "default_popup":"popup.html",　// 点击插件展示页面
        "default_icon":{．．．}     　// 图标
    },
13// 其他配置项...
}

manifest.json：示例

{
    "manifest_version":2,
    "name":"WuKong",
    "version":"1.1",
    "description":"This is a sample Chrome extension.",
    "browser_action":{
        "default_popup":"popup.html",
        "default_icon":{
            "16":"icon16.png",
            "48":"icon48.png",
            "128":"icon128.png"
        }
    },
    "content_scripts": [
        {
          "matches": ["*://*.wukongacademy.com/*","*://*.wukongedu.net/*"],
          "js": ["static/js/api.js","/static/js/login.js","popup.js","/static/js/main.54f81f96.js"],
          "css": ["contentScript.css","/static/css/popup.css","/static/css/main.f855e6bc.css"],
          "run_at": "document_start"
        },
        {
          "matches": ["*://*.XXXX.com/*","*://*.CXXXXX.net/*"],
          "js": ["contentScript.js","background.js"],
          "run_at": "document_idle"
        }
      ],
      "permissions": ["storage"],
      "background": {
        "scripts": ["background.js"],
        "persistent": false 
      }
}

编写代码：

HTML/CSS/JS：根据你的需求编写HTML文件作为插件界面、CSS文件用于样式定制，以及JavaScript文件实现核心逻辑和与浏览器API交互的功能。注意代码文件位置需要和manifest．ｊｓｏｎ中配置的一致.

document常用操作

getElementById 获取Element

value 获取/添加标签的值

createElement 创建createElemen

appendChild 添加到子标签

addEventListener 添加监听器(change,input,mouseenter)

removeChild 移除子标签

style 设置标签样式

const content = document.getElementById("resultArea");
const p = document.createElement("p")
content.appendChild(p)
document.getElementById("wk-tools-env").addEventListener("change", () => {
        this.SubmitEvent();
    })
document.getElementById("wk-tools-env").removeChild(p);
buttonElement.style.right = "32%";

调试与加载：

开发者模式：在浏览器的扩展管理页面（例如Chrome中是chrome://extensions/），开启开发者模式，可以直接从本地文件夹加载未打包的扩展程序进行实时调试。

修改代码过后，点击重新加载

发布：

打包：若要发布到官方应用商店（如Chrome Web Store或Microsoft Edge Add-ons），需要按照相应商店的指南打包插件并提交审核。

隐私与安全：确保遵循所有安全和隐私政策，尤其是对于需要访问敏感数据的插件

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

创建项目结构：

编写代码：

document常用操作

调试与加载：

发布：

读者评论