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

相关推荐
paopaokaka_luck8 分钟前
基于springboot3+vue3的云南本土影视文旅推荐平台(协同过滤算法、Echarts图形化分析)
前端·spring boot·学习·算法·echarts·mybatis
狂师19 分钟前
AI 测试提效 | 别搞万能 Skill,推荐用 5 个 Agent Skill 串起 UI 自动化全流程
前端·人工智能·测试
breeze jiang36 分钟前
React useRef 实战:从 input 聚焦到 Web Worker 引用
前端·javascript·react.js
90后的晨仔1 小时前
uni-app 生命周期深度解析(iOS / Android / 鸿蒙 / Vue3 四端对照)
前端
钛态3 小时前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web
by__csdn3 小时前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular
钛态3 小时前
前端框架选型决策框架:React、Vue、Svelte、Solid 的 2026 年横评
前端·vue·react·web
2501_926102863 小时前
深入浅出Vue.js前端框架设计:核心原理与实践指南
前端·vue.js·前端框架
程序员黑豆4 小时前
使用AI编程开发鸿蒙应用:从环境搭建到实战示例
前端·harmonyos
程序员黑豆8 小时前
鸿蒙应用开发:一次开发多端部署之响应式布局完全指南
前端·harmonyos