chrome扩展,“manifest_version“: 3, chrome 扩展图标点击事件

在 Chrome 扩展中,从 Manifest V3 开始,后台脚本(background scripts)被服务工作线程(service workers)所取代。这改变了扩展图标点击事件(通常称为浏览器操作或者页面操作)的处理方式。在 Manifest V3 中,您需要使用 chrome.action.onClicked 监听器来处理扩展图标的点击事件。

下面是一个如何设置扩展图标点击事件处理器的示例:

  1. manifest.json 文件中,确保已经声明了 action 字段:
json 复制代码
{
  "manifest_version": 3,
  "name": "您的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html", // 可选的弹出页面
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab"
    // 其他可能需要的权限
  ],
  // 其他可能需要的字段
}
  1. 在您的服务工作线程脚本(通常是 background.js)中添加点击事件监听器:
javascript 复制代码
// background.js
chrome.action.onClicked.addListener((tab) => {
  // 当扩展图标被点击时,执行下面的代码
  console.log("扩展图标被点击了!");

  // 可以在这里执行各种操作,例如打开新的标签页,注入脚本等
  // 例如:注入content script到当前标签页
  /* chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content.js']
  }); */

  // 打开一个新的标签页
  /* chrome.tabs.create({ url: 'https://example.com' }); */
});

请注意,如果您定义了默认的弹出页面(default_popup),当用户点击扩展图标时,将会显示这个弹出页面,并且不会触发 chrome.action.onClicked 监听器。如果您想要编写自己的点击处理逻辑,请不要在 manifest.jsonaction 字段中设置 default_popup,或者将其设置为空字符串。

人工智能学习网站:
https://chat.xutongbao.top

相关推荐
A黄俊辉A1 分钟前
webstorm+vue+esLint+pretter配置
前端·vue.js·webstorm
TYFHVB122 分钟前
2026六大主流CRM横评,五大核心维度深度解析
大数据·前端·数据结构·人工智能
LiuMingXin5 分钟前
断网也能装包? 我在物理隔离内网搭了一套完整的私有npm仓库
前端·面试·npm
CHU72903510 分钟前
趣味抽赏,解锁惊喜——扭蛋机盲盒抽赏小程序前端功能解析
前端·小程序
开开心心就好11 分钟前
Word批量转PDF工具,仅转换不合并很实用
java·前端·人工智能·edge·pdf·语音识别·模块测试
孫治AllenSun13 分钟前
【redis】redis重新创建集群
前端·javascript·redis
卡皮巴拉c9918 分钟前
基于 wujie.js 进行微前端融合
前端
来碗疙瘩汤20 分钟前
深入解析 Vue 包:`vue` 究竟导出了什么?
前端
我命由我1234520 分钟前
React - ref、回调 ref 回调执行次数的问题、createRef 函数、事件处理
前端·javascript·react.js·前端框架·html·html5·js
我命由我1234521 分钟前
React - 收集表单元素、收集表单元素优化、生命周期(旧)、生命周期(新)
前端·javascript·react.js·前端框架·html·html5·js