Chrome插件仓库模板

type

status

date

slug

summary

chrome-extensions-template

GitHub - 0scarecrow0/chrome-extensions-template: A template repository for developing Chrome extensions based on React, Vite, and TypeScript, with enterprise-level configuration, ready to use out of the box

A template repository for developing Chrome extensions based on React, Vite, and TypeScript, with enterprise-level configuration, ready to use out of the box - 0scarecrow0/chrome-extensions-template

https://github.com/0scarecrow0/chrome-extensions-template

一个基于react、vite、typeScript的chrome插件开发模板仓库，企业级配置，开箱即用。

特征

🔥支持热更新HMR

🔧自动构建配置的manifest.json

⚡超快的开发模式

🌐完整的chrome插件配置

eslint、stylelint、prettier 对代码风格进行约束

husky 提交代码前校验

集成unocss

仓库目录

⚠️注意事项

如果要使用unocss 需在每个模块的入口文件添加@/assets/styles/uno.css;

例如：content/index.tsx 、popup/index.tsx

@crxjs/vite-plugin 不支持vite@5 所以使用@crxjs/vite-plugin@2.0.0-beta.25

代码提交时报错：ConfigError: Config (unnamed): Key "rules": Key "constructor-super": structuredClone is not defined ,升级至最新版node就行。

重要目录

background

后台页面background pages一直是 Chrome 扩展平台的基本组成部分。简而言之，背景页面为扩展作者提供了一个独立于任何其他窗口或选项卡的环境。这允许扩展观察事件并采取行动以响应事件。

在 V3 中，Chrome 扩展平台从background pages迁移到Service Worker。正如官方文档中所述，“Service Workers是一个脚本，您的浏览器在后台运行，与网页分开，为不需要网页或用户交互的功能打开了大门。”这项技术可以在开放的网络上实现类似原生的体验，例如推送通知、丰富的离线支持、后台同步和“添加到主屏幕”。Service Worker 部分受到 Chrome 扩展中的background pages的启发，但他们通过针对网络规模进行调整来迭代和改进此模型。

content

内容脚本是在网页上下文中运行的文件。通过使用标准的文档对象模型 (DOM)，他们能够阅读浏览器访问的网页的详细信息，对其进行更改，并将信息传递给其父扩展程序。

内容脚本存在于一个孤立的世界中，允许内容脚本对其 JavaScript 环境进行更改，而不会与页面或其他扩展的内容脚本发生冲突。

隔离世界是页面或其他扩展无法访问的私有执行环境。这种隔离的一个实际结果是扩展程序内容脚本中的 JavaScript 变量对主机页面或其他扩展程序的内容脚本不可见。这个概念最初是在 Chrome 最初推出时引入的，为浏览器选项卡提供隔离。

出现上述这种情况，当我们点击按钮时，会依次出发alert，输出内容也不一致，由此可见不仅每个扩展都在自己的孤立世界中运行，而且内容脚本和网页也是如此。这意味着这些（网页、内容脚本和任何正在运行的扩展）都不能访问其他人的上下文和变量。

Name	Type	Description
`matches`	array of strings	必需的。指定此内容脚本将被注入到哪些页面
`css`	array of strings	可选的。要注入匹配页面的 CSS 文件列表。在为页面构造或显示任何 DOM 之前，它们按照它们在此数组中出现的顺序注入。
`js`	array of strings	可选的。要注入匹配页面的 JavaScript 文件列表。它们按照它们在此数组中出现的顺序注入。
`match_about_blank`	boolean	可选的。脚本是否应注入 `about:blank` 框架，其中父框架或开启框架与`matches` 中声明的模式之一匹配。默认为假。

devtools

DevTools 扩展为 Chrome DevTools 添加了功能。它可以添加新的 UI 面板和侧边栏，与检查的页面交互，获取有关网络请求的信息等等。

DevTools 扩展它可以有一个背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

要创建 DevTools 页面，需要在扩展清单中添加 devtools_page 字段：

因 DevTools 页面需要额外的 html 页面，所以需要在vite.config.ts 中指定额外的html页面。