写一个Chrome浏览器插件（manifest v3）

news2024/12/23 18:00:29

1、创建manifest.json 文件

2、开始写popup页面以及对应的逻辑。

2.1 popup 页面

2.2 后台运行 background.js

2.3 content.js

2.4 popup页面的js文件

3、chrome 浏览器加载本项目

4、参考文档

1、创建manifest.json 文件

首先需要在项目的根目录下创建manifest.json文件，该文件描述插件的相关信息，如下所示：

description：插件的描述字段
name：插件的名字
manifest_version：chrome插件的版本（目前最新为版本3）
version：项目版本
author：项目作者
default_locale：默认为中文

icon图标，以及下面不同尺寸图标对应的路径信息。

web可访问的资源路径，以及对应的匹配规则。

权限配置列表：

storage chrome 存储相关的权限。
tabs 浏览器标签页的权限
background 后台运行的权限
scripting 脚本执行的权限
contextMenus 右键菜单的权限
其他一些权限......

本机权限：匹配所有

action 包括默认标题名，默认的icon，默认的popup对应的路径。

后台运行，service_worker对应的js文件路径。

content脚本包括：

matches 匹配的规则
js content 脚本的路径
all_frames 是否支持 iframe 修改。

以上对应manifest.json 文件内容如下所示：

{    
      "description": "这是一个解密的工具",
      "name": "my_chrome_plug",
      "manifest_version": 3,
      "version": "1.0.0",
      "author": "yixuan",
      "default_locale": "zh_CN",
      "icons": {
        "16": "static/img/icon.png",
        "48": "static/img/icon.png",
        "128": "static/img/icon.png"
      },
      "web_accessible_resources": [{
        "resources": [
          "static/js/*",
          "static/css/*",
          "static/img/*"
        ],
        "matches": [
          "<all_urls>"
        ]
      }],
      "permissions": [
        "storage",
        "tabs",
        "background",
        "scripting",
        "contextMenus"
      ],
      "host_permissions": [
        "<all_urls>"
      ],
      "action": {
        "default_title": "my_chrome_plug",
        "default_icon": "static/img/icon.png",
        "default_popup": "index.html"
      },
      "background": {
        "service_worker": "static/js/background.js"
      },
      "content_scripts": [{
        "matches": [
          "<all_urls>"
        ],
        "js": [
          "static/js/content.js"
        ],
        "all_frames": true,
        "run_at": "document_idle"
      }]
    }

2、开始写popup页面以及对应的逻辑。

首先，列一下项目目录结构：

2.1 popup 页面

写一个解码的小工具，2个文本域输入框，和一个解码的按钮，对应页面html如下所示：

<body>
    <div class="_content">
        <form class="form-inline">
            <div class="form-group">
                <textarea type="text" class="from-control" id="_input" rows="6" placeholder="请输入......"></textarea>
            </div>
        </form>
        <div>
            <button id="_button" type="button" class="btn btn-primary"> 解码 </button>
        </div>
        <div class="form-group">
            <textarea type="text" class="from-control" id="_output" rows="16"></textarea>
        </div>
    </div>
</body>

2.2 后台运行 background.js

本项目中写了2个功能：

创建右键菜单，以及菜单点击事件逻辑
监听对应消息事件

所对应的代码如下所示：

// 创建右键菜单
chrome.contextMenus.create({
    id: "parent",
    title: 'DECODE 解码',
    contexts: ['page']
})
// 监听右键菜单单击事件，创建的tab标签页，指向的页面为index.html
chrome.contextMenus.onClicked.addListener((info, tab) => {
    if(info.menuItemId == 'parent') {
        console.log('menu......');
        chrome.tabs.create({
            url: "index.html" 
        })
    }
})
// 消息监听
chrome.runtime.onMessage.addListener((message) => {
    let keyArrys = Object.keys(message);
    let valueArrays = Object.keys(message);
    keyArrys && keyArrys.map((res, index) => chrom.storage.local.set({[res] : valueArrays[index]}))
})

2.3 content.js

content.js 和目标网页共享DOM节点，但是和目标的JS部分是隔离的，不能互相调用。

可以通过chrome api 对background.js 和 popup 页面的js部分进行通信，background.js 可以一直接受content.js发送过来的消息，因为background.js 一直在后台运行，而content.js 只有在popup页面打开的时候才能接收到对应的消息。

下面我们在content.js 中开始发送消息，如下所示：

async function sendMessage () {
    console.log("开始发送消息.............");
    await chrome.runtime.sendMessage(sessionStorage, function (res) {
        console.log("收到回复...............");
    })
}

2.4 popup页面的js文件

在当前js文件开始写对应的解码逻辑。首先，整个dom加载完毕之后，对解码按钮添加对应的点击事件，然后开始进行解码处理，包括对空格，单双引号等处理。

代码如下所示：

function decode () {
    try {
        var inputValue = $("#_input").val().trim();
        var reg = /^['|"](.*)['|"]/;
        var responseParams = true;
        if (inputValue.includes("helloword")) {
            inputValue = inputValue.replaceAll("helloworld", "");
            responseParams = false;
        }
        inputValue = inputValue.replace(reg, "$1");
        var output = DECODE(inputValue);
        responseParams && output.res && (output.res = JSON.parse(output.res))
        $("#_output").val(JSON.stringify(output))
    } catch (error) {
        console.log(error)
    }
}

document.addEventListener('DOMContentLoaded', () => {
    $("#_button").click(() => {
        decode()
    })
})