arvinxx / umi-chrome-extensions-template

基于 Umi 的 Chrome 插件开发模板

Umi Chrome Extensions Template

基于 Umi 的 Chrome 插件开发脚手架。

✨ 特性

• 🌋 企业级框架：基于 umi 和 umi 插件 umi-plugin-extension 构建，享受 umi 生态的全部技术能力；
• 📦 开箱即用：脚手架中已经配置 Chrome 插件开发常用的设置项；
• 🔥 热更新： 开发时 options 和 popup 页面支持 react hot reload 和 react devtools；
• ♻️ 自动重载： 开发时 contentScipts 和 background 支持自动刷新;
• 🔧 配置收敛：直接在 .umi.ts 或 config.ts 设置插件配置；
• ⛑ 类型安全： 脚手架由 Typescript 编写，已集成 Chrome 插件的类型定义文件。
• 🚀 版本发布： 使用 semantic release 实现语义化版本管理与自动发布流

📦 使用

克隆模板

git clone https://github.com/arvinxx/umi-chrome-extension-template.git

安装依赖，推荐使用 pnpm

pnpm i

🛠️ 开发

🔔 请确保你对 Chrome 插件开发已经有基本的了解，入门推荐：Chrome 插件(扩展)开发全攻略。

如果你对项目的配置有疑问，请查阅 umi-plugin-extension 配置项文档。 ➡️ 传送门

启动

pnpm start

👷 打包

构建生产产物直接运行：

pnpm run build

🤝 贡献

欢迎提交 PRs 和 issues。

License

MIT ® Arvin Xu

umi-chrome-extensions-template's Issues

如何配置 externally_connectable 和 web_accessible_resources 属性？

Validate config "extensions" failed, "externally_connectable" is not allowed
ValidationError: "externally_connectable" is not allowed

manifest_version有支持3版本的计划么

脚手架有支持manifest_version:3 版本的升级计划么

开发环境依赖包冲突

yarn 安装

由于找不到 yarn.lock, 安装时只好全部选择最新的包

? Please choose a version of "typescript" from this list: 4.0.0-dev.20200701
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.17.0". Got "14.15.4"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

npm 安装

➜  umi-chrome-extensions-template git:(master) npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: antd@undefined
npm ERR! node_modules/antd
npm ERR!   antd@"^4.6.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer antd@"^4.x" from @ant-design/[email protected]
npm ERR! node_modules/@ant-design/pro-layout
npm ERR!   @ant-design/pro-layout@"^5.0.12" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/figure/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/figure/.npm/_logs/2021-01-22T04_06_45_490Z-debug.log

contentScripts 添加其他选项

启用hash 执行build后，js路径不正确

请问inject-script推荐放在哪里？

我的使用场景是：content-script会动态注入inject-script，inject-script也是使用ts，css使用less，这种情况下inject-script放在哪个目录合适？

config.js 中配置links不生效

popup 页面加载时提示错误

基于脚手架创建的插件，打开 popup 页面时，提示错误如下；
倒是不影响功能，不过总是有点碍眼；还请大神知悉；

看情况应该是 umijs 的依赖 阿里 CDN 上的资源；

Refused to load the script 'chrome-extension://at.alicdn.com/t/font_2357611_whan662da2.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-YM8uI2F+VfHULiDF1T+UCYmPwssvvWleyz5k2gtmTQo=' 'sha256-+lWedAM1kVPdV8EdccyVnyk5TRATyEpOrwBBAUk6ltM='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

permissions 应该在哪里配置呢

menifest.json 中 permissions 不支持如下内容

"http://*/*",
"https://*/*"

backgroup打包后错误

backgroup.ts中如下
function testBackground(){
alert("调用了")
}

而打包后生成的backgroupjs 无法调用该方法 报错e.testBackground is not a function