自己编写chrome插件-Toy模板网

这篇具有很好参考价值的文章主要介绍了自己编写chrome插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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，需要设置三个大小的图。

5.打包放入chrome

将这些文件放在一个文件夹下
自己编写chrome插件,web技术,chrome,前端,javascript
点击管理扩展程序

点击这个按钮，并选择本地文件夹
下一次点击插件就可以使用啦！文章来源地址https://www.toymoban.com/news/detail-545045.html