chrome plugin框架
使用 vite-plugin-web-extension构建，配置manifest.json文件，合理配置扩展项目文件结构。
使用react构建页面，页面配置在action下。
在Chrome扩展中，action和options_page有着不同的用途和定义方式：
action
- 用途：
action是Chrome扩展中的一个核心概念，用于定义扩展在浏览器工具栏中的图标、弹出页面（popup）、工具提示（tooltip）等。从Chrome 88开始，actionAPI取代了之前的browser_action和page_actionAPI，提供了一种统一的方式来指定扩展的行为。 - 定义方式：在
manifest.json文件中，通过action字段来配置。你可以指定默认图标、默认弹出页面、默认标题等。
options_page
- 用途：
options_page用于指定一个扩展的选项页面，这是一个HTML页面，用户可以通过这个页面来配置和定制扩展的行为。用户可以通过右击扩展图标然后选择“选项”来访问这个页面，或者在Chrome扩展管理页面（chrome://extensions/）中访问。 - 定义方式：在
manifest.json文件中，通过options_page字段来指定选项页面的路径。
区别
- 目的不同：
action主要用于定义扩展的主要交互入口，如点击扩展图标时显示的弹出页面；而options_page用于提供一个用户可以进行扩展配置的页面。 - 配置方式不同：它们在
manifest.json中的配置方式不同，action配置了扩展的图标、弹出页面等，而options_page仅指定了一个HTML页面的路径。 - 用户交互方式不同：用户通常通过点击扩展图标来与
action定义的元素互动，而options_page通常通过扩展详情页内的“选项”链接访问。
从Chrome 88开始，推荐使用options_ui来代替options_page，因为options_ui提供了更现代的用户界面，并且可以直接嵌入到Chrome扩展页面中，提供更好的用户体验。
chrome plugin中的接口请求
在chrome插件中插件自身的接口请求在background脚本中处理，避免受浏览器当前网页上下文影响，需要依赖当前网页信息（如cookie）和操作处理网页内容的请求请求放在content_scripts脚本中处理。
-
UI层直接进行接口请求，有跨域问题
-
background脚本 background脚本中的接口请求主要在插件本身后台环境，无跨域问题。
background脚本是扩展的事件处理或者长期运行的脚本，用于管理扩展的生命周期，监听来自浏览器的事件（如标签页更新、按钮点击等），以及维护扩展的全局状态。
"background": {
"service_worker": "src/background.ts"
}
- content_scripts脚本
content_scripts脚本中的接口请求直接在当前打开的网页上下文运行，能拿到cookie等信息，请求直接在网页的network中查看。
content_scripts在网页的上下文中运行，但是它们与网页的JavaScript代码是隔离的，意味着它们不能直接访问网页的JS变量或函数。
content_scripts主要用于直接与网页内容交互。它们在特定的页面中运行，可以读取或修改网页内容。
"content_scripts": [
{
"matches": ["https://*.figma.com/*"],
"js": ["src/content-script.ts"]
}
]
数据缓存
通过chrome.storage缓存用户数据。
控制插件可用状态
通过在background脚本中创建chrome.runtime.onInstalled、chrome.tabs.onUpdated、chrome.tabs.onActivated的监听事件，事件处理中获取当前浏览器页面的url，判断url是否包好关键字，从而控制插件是否可用。
chrome.tabsAPI 在 Chrome 扩展中用于与浏览器的标签页（tabs）进行交互。这个 API 提供了一系列的方法和事件，允许扩展读取、修改、创建和重新排列浏览器的标签页。以下是一些常用的 chrome.tabs API 方法和它们的用途：
方法
-
chrome.tabs.create()：创建一个新的标签页。你可以指定要打开的URL和其他选项，如是否激活新标签页。 -
chrome.tabs.query()：查询符合特定条件的标签页，返回一个标签页对象数组。这可以用来查找具有特定URL的标签页，或者查找当前窗口的激活标签页等。 -
chrome.tabs.update()：更新标签页的属性，如其URL、激活状态等。这可以用来将用户重定向到一个新的URL，或者激活一个标签页。 -
chrome.tabs.remove()：关闭一个或多个标签页。
事件
chrome.tabs.onCreated：当一个标签页被创建时触发。chrome.tabs.onUpdated：当一个标签页被更新时触发，如URL变化、标签页重载等。chrome.tabs.onRemoved：当一个标签页被关闭时触发。
插件功能
在插件中实现读取figma项目页面图标，通过调用gitlab api，传递figma页面信息，提交gitlab commit触发cicd，自动获取图标数据，并实现图标平台自动更新。
- 基础信息配置：配置git用户姓名、邮箱、个人令牌access_token、figma令牌（figma令牌可通过在content_scripts脚本中请求figma的令牌生成api获取），调用gitlab api判断配置信息是否正确。
- 配置仓库信息：配置gitlab项目仓库，调用gitlab api自动获取仓库的项目ID，项目ID在后续api调用中需要。
- 调用gitlab api自动读取仓库package.json中的version版本号信息，后续通过修改版本号提交git commit触发流水线。
- 提交git commit时，同时会将当前figma页面相关数据写入项目的config.json文件中，cicd根据config.json进行icon获取和生成。
获取git访问令牌，永续操作git仓库
gitlab中获取个人访问令牌
github中获取个人访问令牌
获取figma token
- 可通过figma网站平台手动创建获取token
- 也可通过直接请求figma token创建接口获取
const generateToken = async () => {
try {
const headers = new Headers({'Content-Type': 'application/json'})
const res = await fetch('https://www.figma.com/api/user/dev_tokens', {method: 'POST', headers, body: '{"desc":"gitlab","scopes":["files:read"]}'})
const data = await res.json()
return data?.meta?.token
} catch (e) {
}
}
