浏览器插件开发的大致流程详解~

金金金上线！

话不多，只讲你能听懂的前端知识

大致流程

开发浏览器插件的流程通常是选择合适的技术栈和项目模板（如基于 Vite + Vue 的模板），然后在扩展清单配置文件（如 manifest.config.ts）中定义扩展的基本信息、权限和资源，接着使用现代前端框架（如 Vue）语法结合浏览器扩展 API（如 chrome.action、chrome.sidePanel 等）来实现具体功能，最后通过构建工具（如 Vite 配合 @crxjs/vite-plugin）将代码打包成标准的浏览器扩展格式。

• 详细流程

  0. 项目初始化

     • 基于 vite-vue3-browser-extension-v3 模板创建
     • 集成了 @crxjs/vite-plugin 作为构建工具而非脚手架工具（也可通过crxjs CLI创建项目）

  1. 扩展配置

     • 在 manifest.config.ts 中定义扩展的核心配置
     • 分别为 Chrome 和 Firefox 配置特定的 manifest.chrome.config.ts 和 manifest.firefox.config.ts

  2. 功能开发

     • 使用 Vue 3 语法开发 UI 组件和页面

     • 利用浏览器扩展 API 实现扩展功能：

       • 后台脚本 (src/background/index.ts) 处理全局事件
       • 内容脚本 (src/content-script/) 在网页中运行
       • 扩展页面 (src/ui/) 提供用户界面

  3. 构建打包

     • 使用 Vite + @crxjs/vite-plugin 构建扩展
     • 生成符合 Chrome 和 Firefox 规范的扩展包

常用API

存储API

// 本地存储读取
chrome.storage.local.get(keys?: string | string[] | {[name: string]: any})
​
// 本地存储写入
chrome.storage.local.set( items: {[name: string]: any})

标签页API

// 查询标签页
chrome.tabs.query(queryInfo: {属性过多不一一列举}, callback?: (result: Tab[]) => void)
​
// 标签页事件监听
// 监听标签页自身状态的动态变化（如加载进度、URL 变更、标题更新等）
chrome.tabs.onUpdated.addListener(callback?: () => void)
// 监听标签页被销毁（用户主动关闭、窗口关闭或浏览器崩溃等）
chrome.tabs.onRemoved.addListener(callback?: () => void)
// 监听标签页获得焦点（成为当前窗口的最前台标签）
chrome.tabs.onActivated.addListener(callback?: () => void)
​
// 向标签页发送消息
chrome.tabs.sendMessage(tabId: number, message: any, options?: {frameId?: number, documentId?: string)
​
// 标签页信息获取
chrome.tabs.get(tabId: number,  callback?: (tab: Tab,) => void)

扩展运行时API

// 消息监听
// 扩展内部通信机制的监听器，用于接收其他扩展组件（如 popup、content script、background 脚本等）发送的消息
chrome.runtime.onMessage.addListener(callback?: () => void)
// 扩展生命周期事件的监听器，用于监听扩展的安装、更新或浏览器升级导致的重装事件
chrome.runtime.onInstalled.addListener(callback?: () => void)
​
// 发送消息
chrome.runtime.sendMessage(message: any, options?: {includeTlsChannelId?: boolean})
​
// 打开选项页面
chrome.runtime.openOptionsPage()
​
// 获取扩展URL
chrome.runtime.getURL(path: string)

侧边栏API

// 打开侧边栏
chrome.sidePanel.open(options: OpenOptions)
​
// 设置面板行为
chrome.sidePanel.setPanelBehavior(behavior: PanelBehavior)

扩展图标API

// 监听扩展图标点击
chrome.action.onClicked.addListener(callback?: () => void)

上下文菜单API

// 创建菜单
chrome.contextMenus.create(createProperties: CreateProperties, callback?: () => void)
​
// 删除所有菜单
chrome.contextMenus.removeAll()
​
// 菜单点击监听
chrome.contextMenus.onClicked.addListener(callback?: () => void)
​
// 更新菜单
chrome.contextMenus.update(id: number | string, updateProperties: {具体类型去源码定义看})

浏览器扩展与 iframe 通信机制

浏览器扩展向 iframe 发送消息

// 获取 iframe 元素
const iframe = document.querySelector('iframe')
// 向 iframe 发送消息
iframe?.contentWindow?.postMessage(rmessage: any, targetOrigin: string, transfer?: Transferable[])

浏览器扩展接收 iframe 的消息

// 接收来自 iframe 的消息
window.addEventListener('message', (event) => {
})

iframe 向浏览器扩展发送消息

// 在web端iframe中发送消息给扩展
window.parent.postMessage(message: any, targetOrigin: string, transfer?: Transferable[]);

iframe 接收浏览器扩展的消息

// 接收来自 扩展 的消息
window.addEventListener('message', (event) => {
})

编写有误还请各位指正，万分感谢。