示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载本篇指南以 chrome-extensions-samples 仓库中的 cookbook.sidepanel-global 示例为核心讲解如何利用 Manifest V3 的 Side Panel API 让同一个侧边栏在所有网站上显示即全局侧边栏。读完本文你将掌握该示例的 manifest 配置、service worker 中setPanelBehavior()的作用、手动加载与打开侧边栏的完整流程并通过仓库中同族的 site-specific、multiple 两个示例理解三种侧边栏策略的差异与取舍。示例简介什么是一站式全局侧边栏在 Manifest V3 中扩展可以通过chrome.sidePanelAPI 在浏览器窗口右侧打开一个常驻的 HTML 面板。默认情况下侧边栏内容只会出现在扩展自身的标签页中要让侧边栏在任意网站上都可用需要在 manifest 中显式声明默认面板并配合 service worker 设置面板行为。cookbook.sidepanel-global正是在每一个站点上显示同一个侧边栏的最小可运行范例它不依赖任何页面级脚本或内容脚本只靠 manifest 声明与一个几行的 service worker就能让用户在任意标签页打开同一个面板manifest.json、service-worker.js。面板页面本身非常简单sidepanel.html其标题 All sites sidepanel extension 与文案 This side panel is enabled on all sites 直接点明了全局生效这一主题。快速运行四步在 Chrome 中体验全局侧边栏原 README 给出了完整的运行流程以下按步骤展开并补充每一步的关键细节获取源码克隆本仓库后进入示例目录functional-samples/cookbook.sidepanel-global。也可以仅将此目录单独拷贝出来作为独立扩展工程。以未打包扩展方式加载打开 Chrome 的扩展管理页chrome://extensions开启右上角开发者模式点击加载已解压的扩展程序并选择该示例目录。加载成功后扩展列表会出现名为 Global side panel版本 1.0的条目图标来自 images 下的 16/48/128 三种尺寸 PNG。打开侧边栏 UI点击地址栏右侧的侧边栏菜单按钮浏览器工具栏上、用户头像左侧的图标在下拉菜单中选择 Global side panel 项。如下面截图所示该选项中带对勾标记表示它是当前选中的侧边栏。验证全局生效选中后侧边栏随即打开并显示 All sites sidepanel extension 面板。此时随意切换到任意网站侧边栏都会保持可用状态——这正是全局的含义。manifest 配置详解让侧边栏默认对所有站点开放全局侧边栏的实现起点在 manifest.json其中有三个关键区块{ manifest_version: 3, name: Global side panel, version: 1.0, icons: { 16: images/icon-16.png, 48: images/icon-48.png, 128: images/icon-128.png }, background: { service_worker: service-worker.js }, action: { default_title: Click to open panel }, side_panel: { default_path: sidepanel.html }, permissions: [sidePanel] }逐一说明各字段的作用side_panel.default_path指定扩展默认的侧边栏 HTML 文件。当扩展被加载且未通过setOptions()做任何覆盖时所有页面打开侧边栏都会渲染这个文件。全局侧边栏的默认对所有站点可见特性正是由该声明与不调用按 tabId 限定enabled的setOptions()共同保证的。permissions: [sidePanel]使用chrome.sidePanelAPI 的必需权限。遗漏它会导致 API 不可用。background.service_worker注册 service worker。示例用它来调用setPanelBehavior()让点击工具栏图标即可打开侧边栏。action声明扩展的动作图标。default_title为 Click to open panel配合 service worker 中的设置后点击图标即打开侧边栏。icons扩展在管理页与工具栏等处展示的三种尺寸图标16/48/128。值得注意的是示例没有声明tabs权限——因为全局侧边栏不需要监听标签页变化这正是它比按站点启用版本更简洁的原因。service worker 源码解析一行 API 打通点击即开全局侧边栏的核心逻辑只有四行代码service-worker.jschrome.runtime.onInstalled.addListener(() { chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }); });拆解其行为chrome.runtime.onInstalled扩展安装或更新时触发适合做一次性初始化。这里把侧边栏行为的设置放在安装事件中避免每次 service worker 唤醒都重复设置。chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })该调用把点击工具栏 action 图标与打开侧边栏绑定起来。参数openPanelOnActionClick为true时用户点击扩展图标即可直接展开面板无需再进入侧边栏菜单选择。设置完成后service worker 不再需要任何其他监听器全局侧边栏便已具备两种打开方式点击工具栏上的扩展图标由openPanelOnActionClick: true提供从浏览器侧边栏菜单中手动选择 Global side panel。面板文件本身 sidepanel.html 仅含标题与说明文字并引入 sidepanel.js当前仅输出一行console.log保留了扩展侧边栏页面与普通网页页面一致的开发模式可直接在面板中操作 DOM、调用chrome.*API甚至通过消息通信与 service worker 协作。同族示例对照global、site-specific 与 multiple 三种策略仓库中与全局侧边栏同族的还有两个 cookbook 示例将它们放在一起对比能更清楚地看出全局方案的边界与适用场景示例侧边栏可见范围关键实现适用场景cookbook.sidepanel-global所有站点manifest 声明side_panel.default_pathservice worker 设置openPanelOnActionClick工具类面板如词典、笔记、翻译希望随处可用cookbook.sidepanel-site-specific仅指定站点如 google.com监听tabs.onUpdated按url.origin调用setOptions({ tabId, path, enabled })启用/禁用只针对特定网站提供上下文功能避免干扰其他页面cookbook.sidepanel-multiple全局但可在多个面板间切换用setOptions({ path })切换面板用getOptions({ tabId })读取当前面板需要欢迎页与主界面等多面板流程的场景从源码结构看全局侧边栏是所有方案中零运行时配置的一种它既没有tabs权限也没有tabId维度的setOptions()调用因此默认行为就是全局可见。若要在全局基础上进一步定制——例如仅在某些站点启用或按站点切换不同面板——只需参考 site-specific 与 multiple 两个示例把setOptions()与getOptions()组合进 service worker 的标签页事件监听中即可实现可分别见 cookbook.sidepanel-site-specific/service-worker.js 与 cookbook.sidepanel-multiple/service-worker.js。调试与常见问题打开侧边栏菜单后没有 Global side panel 选项请确认扩展已成功加载chrome://extensions中无报错且 manifest 中side_panel.default_path指向的文件真实存在。点击图标没有反应检查 service worker 是否完成了setPanelBehavior({ openPanelOnActionClick: true })的调用并确认sidePanel权限已声明。侧边栏只在部分站点可用若你自行改动过代码请检查是否对特定 tabId 调用了setOptions({ enabled: false })——这是 site-specific 方案的行为全局方案不应有任何按 tab 的禁用逻辑。修改面板 HTML/JS 后不生效在chrome://extensions中点击扩展条目上的刷新按钮重载扩展或直接重新加载页面。小结cookbook.sidepanel-global以极小的代码量演示了 Side Panel API 最基础也最实用的形态——全局侧边栏。它通过 manifest 的side_panel.default_path声明默认面板通过 service worker 中一行setPanelBehavior({ openPanelOnActionClick: true })提供点击即开的交互并依靠不按标签页覆盖选项保持了全站可见的默认行为。无论你是想为扩展加一个随处可用的工具面板还是打算在此基础上实现站点级差异化面板都可以从这个示例出发并结合仓库中 site-specific 与 multiple 两个变体按需扩展。赞分享示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载相关推荐deno-lambda源码解析核心运行时bootstrap实现原理deno lambda源码解析核心运行时bootstrap实现原理 deno lambda是一个让开发者能够在AWS Lambda上部署和运行Deno应用的强示例工程Chrome 扩展实战用 Side Panel API 实现仅在 google.com 显示的站点级侧边栏cookbook.sidepanel-site-specificChrome 扩展实战用 Side Panel API 实现仅在 google.com 显示的站点级侧边栏cookbook.sidepanel site s示例工程MetaMask Extension 如何启用 Chrome Side Panel 侧边栏入口MetaMask Extension 如何启用 Chrome Side Panel 侧边栏入口 MetaMask Extension 在 Chrome 123区块链Web3金融科技上一篇Kubernetes 集群中重新配置默认 Service IP 地址范围的完整指南下一篇Kubernetes StatefulSet 删除操作完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考