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-shellelectron-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.* API核心能力支持状态chrome.tabs标签页增删改查、通信、注入脚本✅ 大部分支持chrome.windows窗口创建与焦点管理✅ 基本完整chrome.cookiesCookie 读写与变更监听✅ 全部支持chrome.runtime消息通信与生命周期✅ 全部支持chrome.action工具栏按钮、角标、弹窗✅ 大部分支持chrome.contextMenus右键菜单✅ 基本完整chrome.notifications桌面通知✅ 基本完整chrome.webNavigation页面导航事件✅ 大部分支持chrome.storage本地数据持久化✅ 全部支持chrome.commands键盘快捷键⚠️ 部分支持下面逐个展开实战要点。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.tscookies.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里做首次安装引导比如自动打开新标签介绍页是提升扩展留存率的经典做法而sendMessageonMessage则是 background 与 content script 之间最常用的通信方式。chrome.action API 实战自定义工具栏按钮与角标chrome.actionMV2 时代叫chrome.browserAction让扩展在工具栏拥有一枚专属按钮实现见 browser-action.ts。支持的能力包括setIcon/setTitle设置按钮图标与悬浮提示。setBadgeText/setBadgeBackgroundColor在按钮上显示数字角标比如未读消息数。setPopup/getPopup绑定点击弹出的小窗口openPopup主动打开。onClicked监听按钮点击事件。electron-browser-shell 还内置了browser-action-listWeb 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 加载你的第一个扩展想立刻体验步骤如下克隆仓库到本地安装依赖后启动浏览器外壳。将你的扩展目录或 .crx 文件放入项目约定的扩展加载目录。启动后打开新标签页扩展即出现在工具栏的browser-action-list中。在扩展的 background 页面里调用chrome.tabs.query、chrome.cookies.getAll等 API验证兼容性。已知限制使用 chrome.* API 前必须了解的事建议使用最新版 Electron最低要求为 Electron 35 以上所有 background 脚本目前均为常驻persistent模式。若应用自身使用了 Electron 的webRequestAPI会阻止chrome.webRequest监听器被触发。非持久化incognitosession 不支持 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考