大家好，我是ConardLi。其实我们平时所说的浏览器插件就是指的浏览器扩展，它可以帮助我们实现很多强大的能力。以我们最常接触到的Chrome扩展（ChromeExtension）为例，它可以帮助我们实现请求捕获和劫持、各种事件监听、浏览器窗口控制、改变网页内容等等。其实浏览器扩展使用的技术很简单，就是Web技术，只需要浏览器指定的几个简单的HTML、CSS、JS文件和扩展文件就可以运行，但是下面的问题可能会让我们开发一些障碍：技术栈：为了更好地维护一个大型项目，必须引入现代开发方式，如React、Vue、TypeScript、Webpack等，目前还没有成熟的浏览器扩展脚手架工具。部署发布：发布过程繁琐。如果你的插件想要在尽可能多的不同环境中生效，你需要对开发的程序进行适配，手动发布到不同的浏览器（如Chrome、Firefox、Edge）展开商店。Plasmo然而，我最近在Github上发现了一个用于开发浏览器扩展的框架：Plasmo。https://github.com/PlasmoHQ/plasmo开源没多久就拿到了2.4kstar。看来大家在这方面的痛点还是很多的。Plasmo官方是这样描述它的：它就像浏览器扩展中的Next.js！开发框架默认支持React+Typescript技术栈，基本可以告别使用create-react-app搭建。.我们可以使用如下命令直接创建项目：npmxplasmoinit初始化的项目非常简洁明了：popup.tsx是默认导出的一个React组件，也就是我们点击插件时的弹框;assets会存放一些我们插件中必备的图标；其他的是项目的基本配置。另外，官方文档（https://docs.plasmo.com/quickstarts）给出了使用以下不同技术栈进行开发的能力：Next.jsStripeReduxTailwindCSSGoogleAnalyticsSupabaseAuthenticationFirebaseAuthentication，大家可以根据自己的需要搭配，也可以参考到官方示例仓库：https://github.com/PlasmoHQ/examples调试也很简单，只需要进入chrome://extensions并开启开发者模式，然后在项目中执行npmdev，然后单击加载解压并导航到扩展的build/chrome-mv3-dev。这时候你会发现你的浏览器扩展具备了热更新的能力！非常好。发布Plasmo框架带有一个方便的GitHub操作，称为浏览器平台发布或BPP。此功能会自动将您的扩展发布到所有受支持的浏览器扩展市场。BrowserMarketSubmitMozillaWebstoreUploadChromeWebstoreUploadEdgeWebstoreUpload你只需要在项目中创建一个keys.json文件，然后填写不同浏览器的配置即可。这真的很简单：{"$schema":"https://raw.githubusercontent.com/plasmo-corp/bpp/v2/keys.schema.json","chrome":{"clientId":"xxx","refreshToken":"xxx","extId":"xxx"},"edge":{"clientId":"ConardLi","clientSecret":"代码秘密花园","productId":"xxx","accessTokenUrl":"https://login.xxx/oauth2/v2.0/token"}}为了安全起见，密钥不要直接提交到Github，最好配合Github的Encrypted使用秘诀~嗯，就是这么简单，基于这个框架开发一个浏览器扩展，我们只需要专注于业务的核心逻辑，Plasmo可以帮助我们完成其他的环境、配置、部署和发布。以后需要开发浏览器扩展的朋友可以收藏~
