526互联

chrome 浏览器插件开发框架

发布时间 2023-06-03 17:48:25作者: J.晒太阳的猫

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

相关参考

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