企业官网建设流程全解析

electron-browser-shell 支持的 chrome.* API 大清单：tabs、windows、cookies 等 10 大 API 实战指南

【免费下载链接】electron-browser-shellA minimal, tabbed web browser with support for Chrome extensions—built on Electron.项目地址: https://gitcode.com/gh_mirrors/el/electron-browser-shell

electron-browser-shell 是一款基于 Electron 构建的开源极简标签页浏览器，最大的亮点是能原生运行 Chrome 扩展。本文为你整理它支持的 chrome.* API 大清单，从 tabs、windows 到 cookies、runtime、storage，带你掌握 10 大 API 的实战用法，无论你是扩展开发者还是想给 Electron 应用加扩展能力的程序员，这份指南都能帮你快速上手。

什么是 electron-browser-shell？一个能跑 Chrome 扩展的 Electron 浏览器

Electron 本身对 Chrome 扩展只提供非常基础的支持，而且重心在 DevTools 调试工具上——像标签页、弹窗、扩展按钮这些浏览器概念，Electron 一概不知。electron-browser-shell 正是为了解决这个痛点而生：它把浏览器外壳（标签栏、工具栏、菜单）和扩展兼容层组合在一起，让你拥有一个支持 Chrome 扩展的极简桌面浏览器。

项目中真正负责扩展 API 的是核心库electron-chrome-extensions，它把 Chrome 浏览器的扩展行为搬进了 Electron 主进程。你可以把它想象成一座「翻译桥」：扩展说一句chrome.tabs.create(...)，它负责把这句话翻译成 Electron 能执行的窗口与标签操作。所有 API 的注册入口集中在 src/browser/index.ts，浏览器外壳的整合逻辑则在 packages/shell/browser/main.js。

扩展 API 如何运作？认识 electron-chrome-extensions 兼容层

简单说，这套体系由三部分组成：

• 主进程 API 实现：tabs、windows、cookies等模块各自实现了一套 chrome.* API，并通过路由器接收渲染进程发来的调用请求。
• 渲染进程代理：扩展的 background 页面或 popup 通过 preload 注入的桥接脚本，把chrome.*调用转发给主进程处理。
• 可定制行为：标签如何创建、窗口如何打开，都可以通过构造参数（如createTab、createWindow）交给你的应用自己决定，扩展 API 与具体 UI 解耦。

这套设计的好处是：你的 Electron 应用不必照抄浏览器的 UI，也能完整承接扩展的 API 调用。官方给出的支持清单完整记录在 README.md 中。

10 大 chrome.* API 支持情况一览表

先给一张总览表，让你 30 秒掌握全局（✅ 表示已支持）：

下面逐个展开实战要点。

chrome.tabs API 实战：标签页的创建、查询与通信

chrome.tabs是扩展开发中使用频率最高的 API，实现位于 tabs.ts。它覆盖了标签的完整生命周期：

• 管理操作：tabs.create新建标签、tabs.query按 URL/标题/激活状态筛选、tabs.update跳转或激活、tabs.reload刷新、tabs.remove关闭。
• 页面操作：tabs.sendMessage向指定标签发送消息、executeScript注入脚本、insertCSS注入样式，还有goBack/goForward前进后退。
• 缩放控制：setZoom/getZoom/setZoomSettings可精细调整页面缩放。
• 事件监听：onCreated、onUpdated、onActivated、onRemoved、onZoomChange让你实时感知标签状态变化。

实战技巧：扩展通常配合tabs.query({ active: true, currentWindow: true })找到当前激活标签，再配合tabs.sendMessage与页面内容脚本通信，这是「后台脚本 ↔ 页面」协作的标准姿势。

chrome.windows API 实战：多窗口管理技巧

窗口管理由 windows.ts 实现，支持度相当完整：

• windows.create打开新窗口（可通过createWindow回调交给应用自定义窗口样式）、windows.update更新窗口状态、windows.remove关闭窗口。
• windows.get/getCurrent/getLastFocused/getAll获取窗口信息，注意getLastFocused会返回最近聚焦的窗口。
• 事件方面提供onCreated、onRemoved、onFocusChanged，可用来跟踪窗口的打开、关闭与焦点切换。

实战技巧：很多扩展会用windows.create({ url, type: 'popup' })打开一个小型弹窗式窗口；在 electron-browser-shell 中，这个行为完全可以通过createWindow选项接管，让你自定义弹窗的外观与行为。

chrome.cookies API 实战：Cookie 的读取与写入

Cookie 管理是 electron-browser-shell 里支持最完整的 API 之一，全部 6 个方法都已实现，代码见 cookies.ts：

• cookies.get按 URL 与名称读取单个 Cookie。
• cookies.getAll按域名、路径等条件批量查询。
• cookies.set写入 Cookie、cookies.remove删除 Cookie。
• cookies.getAllCookieStores枚举 Cookie 存储区。
• cookies.onChanged监听 Cookie 的增删改，并带有变更原因（cause）信息。

实战技巧：开发「导出登录态」「批量清理站点 Cookie」这类工具扩展时，先getAll拉取全量数据，再按需set/remove，配合onChanged实时刷新界面，体验非常流畅。实现上它直接复用了 Electron session 的 cookies 能力，所以与浏览器原生行为保持高度一致。

chrome.runtime API 实战：扩展消息通信与生命周期

chrome.runtime是扩展的「心脏」，runtime.ts 实现了完整支持：

• 消息通信：sendMessage/onMessage完成一次性消息传递，connect/onConnect建立长连接通道。
• 生命周期：onInstalled（安装/更新/卸载时触发）、onStartup、onSuspend、onSuspendCanceled。
• 信息查询：id、getManifest、getURL、getBackgroundPage、lastError。
• 其他：openOptionsPage一键打开扩展设置页。

实战技巧：在onInstalled里做首次安装引导（比如自动打开新标签介绍页），是提升扩展留存率的经典做法；而sendMessage+onMessage则是 background 与 content script 之间最常用的通信方式。

chrome.action API 实战：自定义工具栏按钮与角标

chrome.action（MV2 时代叫chrome.browserAction）让扩展在工具栏拥有一枚专属按钮，实现见 browser-action.ts。支持的能力包括：

• setIcon/setTitle设置按钮图标与悬浮提示。
• setBadgeText/setBadgeBackgroundColor在按钮上显示数字角标（比如未读消息数）。
• setPopup/getPopup绑定点击弹出的小窗口，openPopup主动打开。
• onClicked监听按钮点击事件。

electron-browser-shell 还内置了<browser-action-list>Web Component，可以一键把一排扩展按钮渲染进你的工具栏，效果就像 Chrome 的扩展栏一样：

实战技巧：用setBadgeText显示动态数字（如「3 条新消息」）是扩展最常用的交互手段；配合onClicked与openPopup，可以做出完全贴合你应用 UI 的扩展入口。

chrome.contextMenus API 实战：一键添加右键菜单

右键菜单 API 的实现位于 context-menus.ts，支持：

• create创建菜单项（可设置标题、图标、上下文范围）。
• remove/removeAll删除菜单项。
• onClicked处理点击事件。

实战技巧：许多「翻译、取词、图片搜索」类扩展都靠右键菜单起家。创建菜单后，应用侧通过getContextMenuItems()把扩展菜单项合并进 Electron 原生右键菜单即可，开发成本很低。

chrome.notifications API 实战：桌面通知提醒

通知 API 在 notifications.ts 中实现，支持create/update/clear/getAll/getPermissionLevel，以及onClicked/onClosed事件。

实战技巧：下载完成、任务提醒、会议开始这类场景最适合用通知。electron-browser-shell 的通知直接走 Electron 的 Notification 能力，因此会以系统原生样式弹出，观感与桌面应用完全一致。

chrome.webNavigation API 实战：监听页面导航全过程

web-navigation.ts 让扩展可以「全程围观」页面导航：

• 事件流完整覆盖导航生命周期：onBeforeNavigate→onCommitted→onDOMContentLoaded→onCompleted。
• 另有onHistoryStateUpdated监听 SPA 路由变化、onCreateNavigationTarget监听新窗口/新标签打开。
• 支持getFrame/getAllFrames查询页面 iframe 结构。

实战技巧：需要统计用户访问了哪些页面、或者在页面开始加载时就注入逻辑，用webNavigation事件比轮询 URL 优雅得多。注意onDOMContentLoaded目前只对顶层 frame 触发（iframe 支持还在跟进中）。

chrome.storage API 实战：扩展数据的本地持久化

chrome.storage由 Electron 原生提供，electron-browser-shell 无需额外实现即可使用：

• storage.local本地存储，容量较大。
• storage.sync与storage.managed在实现上回退到local，保证 API 兼容。

实战技巧：设置项、缓存数据统统放storage.local，读写都是异步的，配合onChanged监听还能实现多页面数据同步，是扩展数据层的首选。

chrome.commands API 实战：注册键盘快捷键

快捷键 API 位于 commands.ts，目前处于部分支持状态，可用性以最新版为准。扩展开发者可在 manifest 中声明commands并绑定到onCommand事件。

实战技巧：快捷键虽小，却能显著提升重度用户的效率。如果你的扩展有高频操作（如「打开面板」「截图」），务必在开发时注册对应命令。

快速上手：让 electron-browser-shell 加载你的第一个扩展

想立刻体验？步骤如下：

1. 克隆仓库到本地，安装依赖后启动浏览器外壳。
2. 将你的扩展目录（或 .crx 文件）放入项目约定的扩展加载目录。
3. 启动后打开新标签页，扩展即出现在工具栏的<browser-action-list>中。
4. 在扩展的 background 页面里调用chrome.tabs.query、chrome.cookies.getAll等 API，验证兼容性。

已知限制：使用 chrome.* API 前必须了解的事

• 建议使用最新版 Electron，最低要求为 Electron 35 以上；所有 background 脚本目前均为常驻（persistent）模式。
• 若应用自身使用了 Electron 的webRequestAPI，会阻止chrome.webRequest监听器被触发。
• 非持久化（incognito）session 不支持 Chrome 扩展。
• chrome.tabs中duplicate、move、captureVisibleTab等少数方法尚未实现，开发前记得对照清单确认。

结语

electron-browser-shell 用一套精巧的兼容层，把 Chrome 的 10 大核心 chrome.* API 搬进了 Electron 桌面世界。对普通用户而言，它意味着用上 uBlock Origin、Dark Reader 这类经典扩展；对开发者而言，它意味着你的 Electron 应用可以低成本获得整个 Chrome 扩展生态。照着这份 chrome.* API 大清单动手试一遍，你很快就能写出运行在桌面浏览器里的第一个扩展！

【免费下载链接】electron-browser-shellA minimal, tabbed web browser with support for Chrome extensions—built on Electron.项目地址: https://gitcode.com/gh_mirrors/el/electron-browser-shell