浏览器取色插件开发

浏览器取色插件开发

一、屏幕取色器插件完整文件结构

以下是基于新版 Oat UI（@knadh/oat）的浏览器取色插件的标准文件结构，清晰且符合 Chrome/Edge 扩展开发规范：

屏幕取色器插件/          # 插件根文件夹（名称可自定义）
├── manifest.json         # 插件核心配置文件（必选）
├── popup.html            # 插件弹窗界面（必选）
├── popup.js              # 弹窗交互逻辑（必选）
├── content.js            # 注入页面的取色脚本（必选）
└── icon.png              # 插件图标（可选但建议配置，48x48/128x128像素）

二、各文件说明

文件名	核心作用	是否必选
manifest.json	定义插件版本、权限、入口文件、图标等核心配置，是浏览器识别插件的关键	是
popup.html	插件点击图标后弹出的界面，集成 Oat UI 样式，展示颜色预览 / 取值 / 操作按钮	是
popup.js	处理弹窗的交互逻辑（取色指令发送、颜色显示、复制功能、Oat UI 提示等）	是
content.js	注入到网页中的脚本，实现屏幕取色核心逻辑（遮罩层、颜色拾取、格式转换）	是
icon.png	插件在浏览器工具栏显示的图标，提升辨识度，支持 48px/128px 两种尺寸	否（建议）

三、补充说明

1. 文件层级：所有文件需放在同一根文件夹下，不可嵌套子文件夹（如需嵌套需修改manifest.json中路径配置）。
2. 图标替换：icon.png可替换为任意图片格式（png/jpg/svg），只需保证尺寸为 48x48 或 128x128，且在manifest.json中对应文件名一致。
3. 扩展兼容性：该结构基于 Manifest V3（现代浏览器标准），兼容 Chrome 88+、Edge 88+、Brave 等主流 Chromium 内核浏览器。

四、使用说明

1. 文件准备：将上述 4 个文件（manifest.json、popup.html、popup.js、content.js）放在同一文件夹，再准备一个名为icon.png的插件图标（任意 48x48/128x128 图片即可）。
2. 插件安装：
   • 打开 Chrome/Edge 浏览器，进入chrome://extensions/（Edge 为edge://extensions/）。
   • 开启右上角「开发者模式」。
   • 点击「加载已解压的扩展程序」，选择存放文件的文件夹。
3. 功能使用：
   • 点击浏览器工具栏的插件图标，弹出取色器界面。
   • 点击「开始取色」，鼠标变为十字光标，移动到任意位置可实时预览颜色。
   • 点击鼠标左键确认取色，颜色值会显示在弹窗中。
   • 点击「复制十六进制 / RGB」按钮，可将颜色值复制到剪贴板，并有 Oat UI 提示反馈。

五、总结

1. 核心改造点是在popup.html中引入 Oat UI 的 CDN 资源，用 Oat UI 的卡片、按钮、提示组件替代原生 HTML 元素，大幅提升界面美观度和交互体验。
2. popup.js中适配了 Oat UI 的 Toast 提示组件，替换原有自定义提示，保持交互逻辑不变。
3. manifest.json补充了 CDN 资源的网络权限，确保 Oat UI 资源能正常加载，核心取色逻辑（content.js）完全复用。
4. 插件文件结构极简，仅需 5 个核心文件（4 个必选 + 1 个可选图标），无复杂依赖，便于管理和打包。
5. 所有文件平级存放，符合浏览器扩展的加载规范，无需额外配置路径即可直接加载使用。
6. 核心功能拆分清晰：配置（manifest）、界面（popup.html）、交互（popup.js）、取色逻辑（content.js），便于后续维护和扩展。