SuperAPI AI 工具集

browser-extension-patterns

前端与建站

查看项目

更新于 10-15 09:40

技能介绍

用途

Browser Extension Patterns 是一份用于构建浏览器扩展的技能资料,目标是以 Manifest V3 架构开发可跨浏览器运行的扩展,覆盖 Chrome、Firefox 以及跨浏览器兼容处理。资料围绕扩展的常见组成模块展开,并提供可直接参考的配置与代码示例。

主要能力

资料覆盖以下主题:

  • Manifest V3 结构与目录组织:manifest.json、background/service-worker.js、content/content-script.js、popup(html/js/css)、options(html/js)、icons(16/48/128)、_locales 国际化目录。
  • Manifest 配置示例:包含 manifest_version、name、version、description、permissions、host_permissions、background、content_scripts(含 matches、js、css、run_at)、action、options_page、icons 等字段。
  • 后台 Service Worker 模式:安装事件处理(chrome.runtime.onInstalled)、消息处理(chrome.runtime.onMessage,含异步返回 true)、基于 chrome.alarms 的周期任务,用于替代 Manifest V2 的持久后台页。
  • 内容脚本模式:在目标页面进行 DOM 操作、等待 DOM 就绪(document.readyState 判断)、与 background 通信(chrome.runtime.sendMessage)、监听来自 background/popup 的消息。
  • 存储模式:基于 chrome.storage 的封装,包含 sync 与 local 的读写以及 chrome.storage.onChanged 监听。
  • 弹窗 UI:popup.html/popup.js 示例,读取设置、写入设置,并向当前活动标签页发送消息。
  • 跨浏览器兼容:browser/chrome 兼容写法(globalThis.browser || globalThis.chrome)、特性检测,以及 Firefox Manifest 差异(background.scripts、browser_specific_settings.gecko)。
  • 权限策略:给出 activeTab、storage、tabs、host_permissions、<all_urls> 的适用场景与影响等级,并强调最小权限原则。
  • 反模式清单:包括在 MV3 中使用 MV2 模式、<all_urls> 权限、同步存储、消息无错误处理、内容脚本过重、缺少卸载清理等。

使用方式

资料以示例代码形式给出,可按需复制到扩展项目中作为起点。典型流程包括:建立目录结构、编写 manifest.json、实现 background service worker、编写 content script、构建 popup 与 options 页面、配置存储与消息通信,并按跨浏览器兼容方式调整。资料未提供具体命令行安装步骤或构建工具配置。

适用场景

  • 需要为 Chrome、Firefox 开发或迁移 Manifest V3 扩展的开发者。
  • 需要参考扩展各模块(后台、内容脚本、弹窗、设置、存储、消息通信)写法的项目。
  • 需要了解权限申请影响与规避常见反模式的场景。

限制

资料仅提供模式与示例,未提供完整项目模板、构建发布流程、具体版本兼容范围或实测结果。使用 chrome.storage、chrome.alarms 等 API 时需注意浏览器差异与权限声明。资料未说明任何收费、价格或平台信息。