Chrome插件开发基于HTML、CSS、JavaScript，核心是manifest.json文件（声明Manifest V3）、Background Script（监听事件）、Content Script（操作DOM）和Popup页面（用户交互），通过postMessage实现跨环境通信，调试时使用chrome://extensions加载未打包目录，从简单功能入手易于掌握。
Chrome插件开发其实没那么复杂，关键是要理解它的基本结构和运行机制。它本质上是一个用HTML、CSS、JavaScript编写的网页应用，通过特定的配置文件注入到浏览器中，实现功能增强或行为干预。
核心组成部分
每个Chrome插件都必须包含一个manifest.json文件，这是插件的“身份证”，定义了权限、功能入口、资源加载等信息。
主要模块包括：
- Background Script：长期运行在后台的脚本，用于监听事件、管理状态，比如监听页面变化或定时任务
- Content Script：注入到网页DOM中的脚本，可以直接操作页面内容，比如高亮文字、修改样式
- Popup 页面：点击插件图标时弹出的小窗口，通常作为用户交互界面
- Options 页面（可选）：提供设置选项，保存用户偏好
manifest.json 配置要点
新版Chrome使用Manifest V3，和V2有较大区别，重点注意以下字段：
- manifest_version: 3：明确声明版本
- permissions：申请权限，如"activeTab"、"storage"、"scripting"等
- background.service_worker：替代原来的background.js，更高效节能
- content_scripts：指定哪些页面注入脚本，可设置匹配规则
- action.default_popup：定义点击图标弹出的HTML文件
Content Script 与页面通信
Content Script运行在隔离环境中，不能直接访问页面的JS变量，但可以通过postMessage与页面脚本通信。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见做法：
- 在页面中动态插入<script>标签执行真实脚本</script>
- 通过window.postMessage传递数据，注意来源校验
- 利用chrome.runtime.sendMessage与background通信
调试与打包
开发阶段可以直接加载未打包的插件：
- 打开 chrome://extensions
- 开启“开发者模式”
- 点击“加载已解压的扩展程序”，选择项目目录
报错时查看对应页面的控制台（popup、background、content script分别有独立控制台）。发布前可以打包为.crx文件。
基本上就这些。搞清楚结构后，从一个小功能开始尝试，比如自动填充表单、页面元素隐藏，逐步深入会更容易上手。关键是多看官方文档，例子很全。
