Extension.js

让跨浏览器扩展开发变得非常简单。

<img alt="Extension.js 打开所有浏览器运行器" src="https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96"> <hr> <img alt="Logo" align="right" src="https://yellow-cdn.veclightyear.com/835a84d5/a82bd211-f89d-4fea-9c8c-6c5a98e895e0.png" width="25%" />

无需任何构建配置即可创建跨浏览器扩展。

• 创建新扩展 — 如何创建新扩展。
• 立即开始 — 快速完成工作。
• 我已有扩展 - 仅使用 Extension.js 的特定部分。

Extension.js 是一个即插即用、零配置的跨浏览器扩展开发工具，内置支持 TypeScript、WebAssembly 和现代 JavaScript。

创建新扩展

npx extension create my-extension
cd my-extension
npm run dev

将打开一个新的浏览器实例，您的扩展已准备就绪，可以开始开发了。

就这么简单。现在可以开始编写您的扩展了！

https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586

Web 标准和现代 JavaScript 支持

要预览运行这些技术的扩展，请参阅有关模板的文档。

<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/78e5fe3d-dc79-4aa2-954e-1a5973d1d9db" width="70">	<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70">
ESNext<br>✅	TypeScript<br>✅	WASM<br>✅	React<br>✅	Vue<br>✅	Angular<br>👋	Svelte<br>👋	Solid<br>👋	Preact<br>✅

👋 = 欢迎提交 PR！

立即开始

使用 Chrome 从 Chrome 扩展示例开始开发扩展

请看下面的示例，我们从 Google Chrome 扩展示例 中请求 page-redder 示例。

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1

</details> <details> <summary> 🔥 使用 Edge 从 Chrome 扩展示例开始开发扩展 </summary>

请看下面的示例，我们从 Google Chrome 扩展示例 中请求 magic8ball 示例，并使用 Edge 作为运行时浏览器。

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge

https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa

</details> <details> <summary> 🔥🔥 使用 Edge 从 MDN WebExtensions 示例开始开发 Mozilla 附加组件 </summary>

请看下面的示例，我们从 MDN WebExtensions 示例 中请求 Apply CSS 示例，并使用 Edge 作为运行时浏览器。

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00

</details> <details> <summary> 🔥🔥🔥 使用 Chrome 和 Firefox 从 MDN WebExtensions 示例开始开发 Mozilla 附加组件 </summary>

请看下面的示例，我们从 MDN WebExtensions 示例 中请求 firefox-code-search 示例，并使用 Chrome 和 Firefox 作为运行时浏览器。

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true

https://github.com/cezaraugusto/extension.js/assets/4672033/ac94b608-c936-40df-bce7-63ffd7fe31c5

</details>

我有一个扩展程序

https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c

如果你有一个现有的使用包管理器的扩展程序,你可以安装 Extension.js 包并手动创建用于运行扩展程序的脚本。请参考上面的演示或按照以下说明操作:

第1步 - 将 extension 安装为 devDependency

npm install extension --save-dev

第2步 - 将 npm 脚本与可执行的 Extension.js 命令关联起来

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev", 
    "start": "extension start"
  },
  "devDependencies": {
    // ...其他依赖项
    "extension": "latest"
  }
}

完成。你已经准备就绪!

• 要开发扩展程序,运行 npm run dev。
• 要在生产模式下查看扩展程序,运行 npm run start。
• 要在生产模式下构建扩展程序,运行 npm run build。

使用特定浏览器进行开发

桌面浏览器

<img src="https://github.com/cezaraugusto/extension.js/assets/4672033/6ce53a31-c6f6-4a1c-b927-e9ec7fd2df78" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/6bb60aa0-18a3-4622-a40d-e946d5163625.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/0e5ce233-2482-47b2-b1f1-998e3b75f60f.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/ad756df3-d195-46cb-accd-678b8f31b634.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/64ad70a5-9186-4e26-b75c-0e90e777253c.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/2cf1b5c7-9ad4-480f-bf0f-1351b2b62d06.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/60332355-2d48-4d9c-a63c-5ba638467d76.svg" width="70">	<img width="70" src="https://yellow-cdn.veclightyear.com/835a84d5/8a4909bb-c1cd-4b02-a265-12b5a6a18ac7.svg">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/b18c1fb2-5d25-4fa0-be13-e1f0452267b9.svg" width="70">
Arc<br>☑️	Brave<br>☑️	Chrome<br>✅	Chromium<br>☑️	Edge<br>✅	Firefox<br>✅	Opera<br>☑️	Safari<br>⛔️	Vivaldi<br>☑️

☑️ = 理论上可以加载所有基于 Chromium 的浏览器,考虑到目前对 Chrome 的支持。有一个支持所有基于 Chromium 的浏览器的请求票据。最受欢迎的功能会优先添加,所以点赞可以加快开发进程。

移动浏览器

<img src="https://yellow-cdn.veclightyear.com/835a84d5/2cf1b5c7-9ad4-480f-bf0f-1351b2b62d06.svg" width="70">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/ccd7fe3b-9b03-4164-b100-aa267819407d.svg" width="70">
Firefox (Android)<br>⛔️	Safari (iOS)<br>⛔️

如果你想针对特定浏览器,只需在 dev/start 命令中传递 --browser 标志(基于上面可用的列表),例如 npx extension dev path/to/extension --browser=edge。

提示 传递 --browser="all" 可以一次加载所有可用的浏览器。

extension dev --browser=all

<img alt="Extension.js 打开所有浏览器运行程序" src="https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96">

许可证

MIT (c) Cezar Augusto。