基于Chrome 插件使用数据服务 API
发布网友
发布时间：2024-10-01 23:04
共1个回答
热心网友
时间：2024-12-11 17:41
本文将指导您在浏览器上使用数据服务 API，并介绍安装、代码下载以及技术细节。通过下图所示的插件，您可以在选中一段文字后，通过右键菜单将参数传递给已订阅的 API，从而开始查询。
下图展示了在开发者环境中，通过 Chrome DevTools 可以便捷地查询业务错误码对应信息的场景。您无需关注过多细节，只需封装任何 API，例如根据用户 ID 查询对应信息，或利用 Webhook 将有用信息发送至私有钉群，以减少不同应用间切换的不便。
长远来看，Chrome 浏览器有望成为一个深度应用数据服务的平台，如浏览器搜索条和新 Tab 页面。您可以通过参考相关文章进一步了解。
安装 Chrome 应用商店插件
数据服务 API 插件已在 Chrome 应用商店上架，您可以直接通过链接下载并安装。
运行代码体验版
运行此插件，您需要准备 Node.js（请参考安装指南），并使用 NPM 安装 Pnpm。安装完 Pnpm 后，使用指令 `npm install --global pnpm` 安装，随后执行 `pnpm install & pnpm dev` 运行服务。默认接口为 8080，通过 Websocket 与 Chrome 插件进行通信。
安装与使用插件
启用开发者模式，加载已解压缩的扩展程序，选择下载代码中的 `dist` 文件夹，完成数据服务 API 插件的安装。将插件固定于工具条上，并点击插件，可以看到预设的 API，通过右上角的设定按钮，您可以配置所需的 API。
API 配置与使用
通过 DataWorks 数据服务开发的常用 API，如排查业务 error code 场景，首先选择数据源，开通实例，创建表并导入信息。在 DataWorks 数据服务中建立 API（具体过程请参考指南），发布后获取 API 地址与鉴权信息（如 appCode）。将 API 配置至数据服务 API 插件中并保存。
使用插件
使用方式 1：在 DevTools 中，点击数据服务 API，使用 Network Tab 查看接口返回结果，方便问题排查。
使用方式 2：通过固定书签功能，选择数据服务 API，实现快捷访问。
使用方式 3：对网页内容进行右键选择并复制，将信息传入插件进行查询。此功能同样适用于使用方式 1 与 2。
插件开发
插件开发基于 React + Antd + Vite + pnpm，代码打包成 Chrome 插件。关键在于插件的 manifest 文件，指定插件描述、页面入口和权限等。此外，提供多语化解决方案，通过 __MSG_appName__ 等占位符实现多语言支持。使用 chrome.storage 进行存储管理，提供异步操作，支持大量读写。插件还支持选项页面、背景任务、弹窗和 DevTools 等特性。
扩展功能与定制化
您可以通过定制 Chrome 浏览器的搜索条、新标签页、侧边栏等，使浏览器更加业务化。例如，通过设置插件，您可以将新标签页内容定制为自己的产品页面或快捷页面。此外，可以参考相关文章获取更多实用场景和功能。
本文旨在提供一个基础框架，帮助您开始在浏览器上使用数据服务 API。随着浏览器插件的不断发展和标准化，Chrome 浏览器有望成为高度业务化的工具，满足用户在不同场景下的需求。通过此次探索，我们已将数据服务 API 与 Chrome 浏览器结合，未来将探索更多实用场景。
