前文提要，使用此篇文章建立起一个 API 授权平台后，用户可以在平台上订阅自己想要的 API，这篇文章则是将 API 在浏览器上用起来，此文介绍如何安装、代码下载以及代码的技术细节。
下图为效果图，能支持在浏览器上选一段文字后按右键将参数传入选定的 API 中，就可以开始查询。
下图为开发者在排查问题场景中，透过 Chrome DevTools 即可查询自己业务错误码对应信息。
当然您可以封装任何 API，如根据用户 ID 查询对应信息、拷贝有用的信息透过 Webhook 丢到私有钉群等等，可以减少切换应用的割裂感或在 Linux OS 上，大部份只能使用浏览器应用的场景。
而长远来看，是可以把 Chrome 浏览器打造成一个深度应用数据服务的浏览器，包含浏览器搜索条、浏览器新 Tab 等等，相关文章可以参考。
Getting Start
Chrome 应用商店安装
由于插件上架到 Chrome 应用商店还在走审批，此文先透出需运行代码的体验版。
运行代码的体验版
- 依赖的服务及工具
必要工具
| Chrome 浏览器 | 下载 |
|---|---|
| 插件原代码 | GitHub |
选用工具
| 阿里云帐号 | 申请网址 | 费用: 免费 |
|---|---|---|
| DataWorks (包含数据服务) | 开通网址 | 费用: 基础版不限时长免费试用、专业版限时特价体验 |
| Hologres | 开通网址 | 数据源举例使用 Hologres，可选用其他类型数据源 |
| 阿里云网关 | 开通网址 | 费用: 计费说明 (共享实例月累计1千万次调用以下，每万次0.06人民币) |
- 运行代码
下载上述插件代码后，安装 Node.js (安装参考)，透过 NPM 安装 Pnpm，打指令npm install --global pnpm，安装完后透过指令 pnpm install & pnpm dev 即可运行服务，默认接口为 8080 并透过 Websocket 与 Chrome 插件进行沟通。
- 安装插件
打开管理扩展程序，并将开发者模式启用，点击加载已解压缩的扩展程序，选择下载代码里的 dist 文件夹，即可安装上数据服务 API 插件，将数据服务 API 插件固定于工具条上。
- 设定 API
安装好后，于工具条上点击数据服务 API 插件，可以看到已内建几个 API，点辑右上角的设定按钮，呼出设定页面，我们可以把想要的 API 设定于此插件上，并按保存。
- 开发 API
透过 DataWorks 数据服务开发常用的 API，帮助日常工作的进行，这边以排查业务 error code 场景为例，首先选用一个数据源，如 Hologres，开通 Hologres 实例后，进入 HoloWeb 建表，并将表信息导入或手动建立。
进入 DataWorks 数据服务建立 API (详细过程可参考)，提交发布后，取得 API 地址与鉴权信息 (如 appCode )。
参考第 4 步将 API 设定于数据服务 API 插件中并保存。
- 使用插件
使用方式 1: DevTools
打开 DevTools (点右键点击检查)，最上面 Tab 条，找到数据服务 API，搭配 Network Tab 查看接口返回，查询 error code，方便问题排查。
使用方式 2: 固定书签
点击 Chrome 浏览器侧边栏功能，选用数据服务 API，即可固定在右边使用。
使用方式 3: 右键拷贝网页信息传入插件
对网页文字内容选取并按右键，将选定的内容传入 API 参数中，即可呼起插件进行查询，此能力也可应用于使用方式 1 与 2。
插件开发
插件的开发主要是基于 React + Antd + Vite + pnpm 并将代码打包成 Chrome 插件。React 的开发方式就不加赘述，这边主要提 Chrome 插件的部份。
Manifest
插件的 manifest 设定指定了整个插件的描述、各页面入口、需要的权限等宣告信息。
多语化
Chrome 提供了插件多语化的解决方案，解决 manifest 上宣告内容多语化的问题，如前述 manifest 里 MSG_appName 的使用，React 的代码部份，使用了 react-intl-universal 方案，用户在切换浏览器语言时即可切换插件语言。
Storage
插件使用的存储主要是利用 chrome.storage，它类似于 Local Storage，但是专为扩展而服务且是异步的，能够进行大量的读写操作，因此比阻塞和串行化的 Local Storage 更快。透过此存储接口，插件的各页面都能相互沟通。
存储的使用方式已包装成 useStorage 与 createStorage 两个界面方法，可直接使用，免去撰写 chrome.storage 交握的繁琐代码。
Options
插件设定页，每一个插件都能有一个设定页面，这边能提供给用户进行个性化的配置，代码可以参考 src/pages/options，设定值可以由远地载入也可以透过本地存储载入，与开发 React 应用一样。
Background
background 是透过 Web Worker 来执行，无法操作 DOM，但可在 Chrome 浏览器背景执行，做为事件监控的脚本，如插件的右键行为，代码可参考 src/pages/background，透过 chrome.contextMenus.onClicked 去监听，并将信息存进 Storage。另外此部份多语化需要使用插件的多语化解决方案。
Popup
Popup 在多数插件下是做为主体使用，也就是插件使用的主要页面，会叫 Popup 是因为可在浏览器工作列上点击后跳出一个弹框，代码可参考 src/pages/popup，这边特别需要注意的是，上述 background 右键行为将信息存进 Storage 后，会驱动 Storage Hook，引发 Popup 的渲染，进而能从 Storage 中取得页面选取的信息。
DevTools
此处展现的页面位于 DevTools (开发者工具)，可以在这里插入一个新的 Tab，内容一样也可以透过 React 去开发，代码可以参考 src/pages/devtools，此部份我们直接放入 Popup 的主体内容。DevTools 能做的事情非常多，能透过 Networks API 获取更多页面上请求的信息并加以分析，或透过 Panels API 去取得用户选取 DOM 的改变行为，提供更有用的排查信息。
SidePanel
此处展现的页面位于侧边栏，可以在这里新增一个选项，提供一个固定的协助页面，代码可以参考 src/pages/sidepanel，此部份我们直接放入 Popup 的主体内容。这边能放入现在热门的 AI Chat Copilot 功能，透过 Content 能力去改变页面的信息。
其它
Content
Content 是插件中可侵入式到目前页面运行的脚本，如 Chrome 应用商店中许多能改变页面黑白主题的插件，或如 Vimium 插件在下图 Link 与 Button DOM 上标示特殊符号。
NewTab
此插件能定制开新标签页的内容，打开的内容是自己的产品页面或产品快捷页面，将 Chrome 浏览器转变成一个高度业务化的产品，如 Initab 插件，打开一个新 Tab 就是定制的 Tab。
Search Bar
定制 Chrome 的搜索结果，透过 omnibox 接口，去列出特别的搜索内容，如 GitHub Omnibox。
还有更多的能力可参考此篇文章。
小结
Chrome 插件已不是新鲜的东西，但是随著浏览器插件的安全性提高及标准化 (FireFox 也适用)，渐渐又开始被讨论起来，插件能做到一般页面应用能做到的事情，但是一般页面应用做不全插件可做到的事情，将 Chrome 浏览器打造成一个高度业务属性的浏览器已不是问题，用户可以在上班时将插件打开，Chrome 浏览器这时就变成是上班工具，提供业务一体化的体验，下班后再关掉，不会影响其他时间的操作。此次探索先将数据服务 API 跟 Chrome 做简单结合，未来还能延伸更多实用场景。