chrome 浏览器插件开发框架

chrome 插件开发时，基于现成的框架，启动起来会快很多，也支持调试 HMR，以下是几个框架介绍。

🍉 Plasmo#

PlasmoHQ/plasmo: 🧩 The Browser Extension Framework
Supercharge your browser extension development – Plasmo

高度集成，内置了 Storage API 和 Messaging API, 开发起来最方便。
但是正因为集成程度高，部分地方定制化就不是那么容易。

比如想自定义 popup 页面中，reactDOM 的挂载时机，或者现在挂载之前做点异步操作，就有点麻烦。

🍉 chrome-extension-boilerplate-react#

lxieyang/chrome-extension-boilerplate-react: A Chrome Extensions boilerplate using React 18 and Webpack 5.

React + TypeScript + Webpack

有一定集成，而且相关配置都暴露了出来，如果需要可以自行修改。

🍉 create-chrome-ext#

guocaoyi/create-chrome-ext: 🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla

使用 Vite2，有各种前端快框架的模板支持。使用时需要注意，看对应的模板中的框架的版本是否满足要求。不过模板很轻量，基本都可以自行修改。

🍉 chrome-extension-typescript-starter#

chibat/chrome-extension-typescript-starter: Chrome Extension TypeScript Starter

在 GitHub - openai-translator/openai-translator: 基于 ChatGPT API 的划词翻译浏览器插件和跨平台桌面端应用 - Browser extension and cross-platform desktop application for translation based on ChatGPT API. 中发现的一个框架。

相关参考#

【干货】Chrome插件(扩展)开发全攻略-好记的博客
Extensions - Chrome Developers

作者：JasonGrass

出处：https://www.cnblogs.com/jasongrass/p/17454245.html

版权：本作品采用「署名 4.0 国际」许可协议进行许可。