自己编写chrome插件

ArmadaDK

已于 2023-07-11 11:38:31 修改

阅读量583

点赞数 3

分类专栏： web技术文章标签： chrome 前端 javascript

于 2023-07-11 11:14:29 首次发布

本文链接：https://blog.csdn.net/ArmadaDK/article/details/131655486

版权

web技术专栏收录该内容

28 篇文章 1 订阅

订阅专栏

文章介绍了如何创建Chrome扩展，重点在于manifest.json文件的配置，包括插件名、版本、权限、背景脚本、浏览器动作等关键元素。同时提到了popup.html、background.js的作用，以及如何打包和测试扩展。

摘要由CSDN通过智能技术生成

1.首先你需要一个menifest.json文件

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "2.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["https://example.com/*"],
    "js": ["content.js"],
    "all_frames": true,
    "excludes_globs": ["**/unwanted.js"]
  }],
  "host_permissions": [
    "https://example.com/*"
  ],
  "optional_permissions": [
    "tabs",
    "storage"
  ]
}

在上述示例中，需要根据插件的具体需求进行配置。其中 “name” 是插件名称，“version” 是插件版本，“description” 是插件描述，“permissions” 是插件需要的权限，“background” 定义后台页面的行为，“browser_action” 定义浏览器工具栏按钮的行为。

2.popup.html

点击插件可以弹窗，这个里面就放正常的html就行，没什么特别的

3.background.js

background.js 是后台脚本，可以监听和处理插件的一些事件。事例如下：

// 在插件被安装、更新或Chrome启动时触发
chrome.runtime.onInstalled.addListener(function() {
  // 可以在这里进行一些初始化操作或设置默认值
});

// 监听浏览器标签页被创建时的事件
chrome.tabs.onCreated.addListener(function(tab) {
  // 处理标签页创建事件
});

// 监听浏览器标签页被更新（例如 URL 发生变化）时的事件
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  // 处理标签页更新事件
});

// 监听来自内容脚本或其他部分发送的消息
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  // 处理接收到的消息
  // 可以通过 sendResponse 返回响应给发送方
});

// 执行一些后台任务
function doSomething() {
  // 在这里进行一些任务处理逻辑
}

// 在指定时间间隔内执行循环任务
setInterval(function() {
  doSomething();
}, 5000);

注意menifest的里面加入"persistent": false；否则插件会自动启动，除非浏览器关闭或者插件禁止。

4.action

browser_action是在 Chrome 插件开发中用于创建浏览器工具栏按钮的一种配置选项。
“default_icon”：指定工具栏按钮的图标，可以设置不同大小的图标文件路径。
“default_title”：鼠标悬停在按钮上时显示的标题。
“default_popup”：点击按钮后弹出的页面或弹出窗口的 HTML 文件路径。
其中icon的大小分别为16，48和128，需要设置三个大小的图。