electron-browser-shell API 终极参考electron-chrome-extensions 从核心类到 browser-action-list 全收录【免费下载链接】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 打造一个能原生运行 Chrome 扩展的浏览器吗electron-browser-shell API中最重要的就是electron-chrome-extensions库。本篇文章将为你完整梳理它的核心类、构造选项、实例方法、事件以及browser-action-list元素的使用方式帮你快速掌握这套Electron Chrome 扩展 API的全部要点。一、electron-browser-shell 是什么electron-browser-shell是一个基于 Electron 构建的极简多标签页浏览器它的最大亮点是支持 Chrome 扩展。Electron 原生只提供基础的扩展支持且聚焦于 DevTools标签页、弹窗、扩展按钮等概念它并不了解。而electron-chrome-extensions库正是为了解决这个问题而生——它把 Electron 的扩展能力提升到接近 Google Chrome 的水平让 uBlock Origin、Dark Reader、1Password 这类知名扩展都能直接运行。二、核心类 ElectronChromeExtensions 快速上手一切扩展能力的入口是主进程中的ElectronChromeExtensions类定义在 index.ts。实例化它你的 Electron 应用就具备了扩展 API 处理能力const { app, BrowserWindow } require(electron) const { ElectronChromeExtensions } require(electron-chrome-extensions) app.whenReady().then(() { const extensions new ElectronChromeExtensions() const browserWindow new BrowserWindow() // 将窗口的 webContents 注册为一个标签页 extensions.addTab(browserWindow.webContents, browserWindow) browserWindow.loadURL(https://example.com) browserWindow.show() })一个会话Session只能绑定一个扩展实例重复创建会抛出错误。你也可以通过静态方法ElectronChromeExtensions.fromSession(session)反查某个会话对应的实例。三、构造函数选项让扩展行为符合你的应用构造函数接收一个 options 对象核心参数如下license必填分发许可证可选GPL-3.0或Patron-License-2020-11-19session可选默认使用session.defaultSession多会话应用可传自定义分区modulePath可选使用 Webpack 等打包器时需要指向模块文件路径createTab(details)扩展调用chrome.tabs.create时触发由你的应用决定如何创建标签页selectTab(tab, window)chrome.tabs.update切换激活标签时触发removeTab(tab, window)chrome.tabs.remove移除标签时触发createWindow(details)chrome.windows.create创建新窗口时触发removeWindow(window)chrome.windows.remove关闭窗口时触发assignTabDetails(details, tab)向后台页/内容脚本补充标签详情这些回调的定义可以在 impl.ts 中查看它们把如何创建标签、如何管理窗口这类浏览器行为完全交给你的应用自定义。四、实例方法与事件速查常用实例方法addTab(tab, window)把webContents注册为标签页使其可被chrome.tabsAPI 访问selectTab(tab)通知扩展系统当前激活标签已切换getContextMenuItems(tab, params)获取给定上下文下的扩展右键菜单项返回Electron.MenuItem[]getURLOverrides()获取特殊页面覆盖映射例如{ newtab: chrome-extension://id/newtab.html }提示addExtensionHost()与addExtension()已废弃Electron 12 无需手动调用。实例事件browser-action-popup-created当chrome.browserActionAPI 创建弹窗时触发返回PopupView实例见 popup.tsurl-overrides-updated扩展加载chrome_url_overrides后触发返回 URL 覆盖映射标签页与窗口的内部状态管理由ExtensionStorestore.ts负责IPC 路由则由ExtensionRouterrouter.ts承担。五、browser-action-list工具栏扩展按钮的完整方案browser-action-list是一个Web Component 元素用来在页面中渲染一排扩展图标按钮点击可触发chrome.browserAction.onClicked事件或弹出扩展弹窗。启用方法preload 注入需要在 preload 脚本中注入browserActionAPIimport { injectBrowserAction } from electron-chrome-extensions/dist/browser-action // 仅在指定页面注入 if (location.href webui://browser-chrome.html) { injectBrowserAction() }在electron-browser-shell的实际实现中工具栏就在 webui.html 里直接使用了这个元素。属性说明partition可选指定扩展加载的会话分区默认使用当前元素所在会话tab可选指定展示状态的标签页 WebContents ID默认使用当前窗口激活标签!-- 默认会话 当前激活标签 -- browser-action-list/browser-action-list !-- 自定义会话 -- browser-action-list partitionpersist:custom/browser-action-list自定义样式该元素是 Shadow DOM 封装的但可以通过 CSS::part()选择器定制/* 垂直排列按钮 */ browser-action-list { flex-direction: column; } /* 修改按钮尺寸 */ browser-action-list::part(action) { width: 16px; height: 16px; } /* 修改徽标样式 */ browser-action-list::part(badge) { background: red; }可用的部分包括action按钮和badge角标数字。六、支持的 chrome.* API 一览除了 Electron 内置支持外本库还覆盖了以下 API完整实现见 browser/api/ 目录API状态chrome.action/chrome.browserAction标题、图标、弹窗、角标、onClicked 等基本齐全chrome.tabsget、query、create、update、remove、reload、sendMessage 等chrome.windowsget、getAll、create、update、remove 及事件chrome.runtimesendMessage、connect、getURL、getManifest 等chrome.storagelocal 完整支持sync/managed 回退到 localchrome.cookiesget、getAll、set、remove、onChangedchrome.contextMenuscreate、remove、removeAll、onClickedchrome.notificationscreate、clear、update、getAll 等chrome.webNavigation导航事件与帧查询Electron 12七、完整示例一个多标签页浏览器electron-browser-shell的主进程实现位于 main.js它展示了完整用法创建窗口后监听标签事件通过extensions.addTab()与extensions.selectTab()同步状态让扩展 API 与真实 UI 保持一致。const extensions new ElectronChromeExtensions({ session: browserSession, createTab(details) { /* 自定义建标签逻辑 */ }, createWindow(details) { return new BrowserWindow() }, }) tabs.on(tab-created, (tab) { self.extensions.addTab(tab.webContents, tab.window) }) tabs.on(tab-selected, (tab) { self.extensions.selectTab(tab.webContents) })八、注意事项与限制建议使用最新版 Electron最低要求为 Electron v35.0.0-beta.3所有后台脚本均为常驻模式persistent非持久化会话incognito不支持 Chrome 扩展使用 Electron 的webRequestAPI 会阻止chrome.webRequest监听器被调用结语通过这份electron-browser-shell API 参考你应该已经掌握了electron-chrome-extensions从核心类到browser-action-list的全部关键知识点。想亲自体验可以克隆仓库https://gitcode.com/gh_mirrors/el/electron-browser-shell后运行项目感受在 Electron 中运行真实 Chrome 扩展的完整流程。【免费下载链接】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），仅供参考