写一个Chrome浏览器插件(manifest v3)

简介: 写一个Chrome浏览器插件(manifest v3)

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()
    })
})

3、chrome 浏览器加载本项目

1、点击浏览器右上角->扩展程序->管理扩展程序,如下图所示:

2、点击右上角打开开发模式,然后单击“加载已解压的扩展程序”按钮,选择自己的项目目录即可。如下图所示:

3、点击浏览器右上角的本项目插件图标,弹出popup页面,在上面输入框中输入需要解码的内容,然后单击“解码”按钮,把对应解码的内容的输出到下面的输入框中,如下图所示:

4、插件右键菜单,鼠标在网页空白处,右键弹出菜单,可以看到自己创建的菜单以及icon,然后单击对应的菜单,浏览器将新建一个标签页面,指向自己配置的popup页面。如下如所示:

4、参考文档

其他一些配置或者示例可以参考以下文档:

chrome官方文档(英文版)

360中文开发文档

最好参考chrome 官方文档,360的文档,里面的内容并不是最新的,是manifest v2 版本,v3 和 v2 还是有一些差异的,在开发的时候注意以下manifest对应的版本。


相关文章
|
7天前
|
Web App开发 人工智能 IDE
开发实战:从0到1实现Chrome元素截图插件的完整过程
在两个月全职创业的过程中,我深刻体会到一人公司必须快速迭代、快速验证。因此,我采用了MVP(最小可行产品)的开发策略,用一周时间实现核心功能,验证技术可行性。
162 3
|
8天前
|
Web App开发 人工智能 IDE
从痛点到解决方案:为什么我开发了Chrome元素截图插件
传统的截图方式要么截取整个页面然后手动裁剪,要么使用浏览器自带的截图功能,但效果都不理想。特别是当内容包含SVG元素或复杂样式时,截图质量和速度、便捷性往往不尽如人意。
54 4
|
6天前
|
Web App开发 人工智能 前端开发
产品发布策略:如何让Chrome插件在竞争激烈的市场中脱颖而出
Chrome Web Store每天新增很多个插件。插件刚发布,用户只有我自己,如何在这样的红海市场中找到自己的位置,是我一直在思考的问题。
31 0
|
3月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
223 8
|
5月前
|
Web App开发 人工智能 JavaScript
一键三连不求人!用 CodeBuddy 写个浏览器插件自动点赞、评论、收藏
本文介绍了一款通过 CodeBuddy AI 工具开发的浏览器插件,可自动完成“点赞、评论、收藏”三连操作。作者从需求出发,分四步实现:搭建基础框架、指定目标网页、解析内容并模拟点击事件,最后加载验证插件。借助 CodeBuddy 自动生成代码,整个过程高效便捷,大幅提升用户体验。此工具不仅节省手动操作时间,还为自动化任务提供了新思路,适合热爱技术与效率提升的网页冲浪者尝试。
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
9月前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
536 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
12月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
1814 123
|
8月前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
790 14
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
809 128