1.引言
想要开发一个企业级的浏览器插件,如果可爱的工程师们单凭谷歌官方的开发文档,往往很难满足实际的开发要求。比如我们想采用react、antd、状态管理、代码热加载等。如果自己从零去实现,不仅会让项目的开发周期变得很长,还容易搞出一堆bug。而且等你搞出来的时候,老板都带着设计师美眉跑路了!!!
这里,我推荐一个国外比较热门的插件开发解决方案,老外们的维护频率也比较高:Plasmo,我也是基于这个脚手架给公司上架过一款ChatGPT-AI产品。
2.Plasmo教程
2.1Plasmo介绍
The Plasmo(opens in a new tab) Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.
蹩脚翻译:Plasmo框架是由黑客为可爱的程序员们准备的浏览器扩展SDK,让程序员不再担心去配置项目的配置文件(manifest.json)和构建浏览器扩展的奇怪特性。
2.2开发要求
- Node.js 16.14.x or later
- MacOS or Windows or Linux
- pnpm (Strongly Recommended)
2.3起步
arduino
// 创建一个基础项目
pnpm create plasmo
pnpm dev
pnpm build
项目结构如下:
这里我们主要关注
1 .assets文件夹,是放置静态资源的文件,唯一不同的是,我们应该在这里放一个icon.png图片,脚手架能帮我们自动生成不同尺寸并且符合谷歌要求的icon。
2 .popup.tsx就是我们查看的popup弹窗,它本质一个React组件,框架底层会自动帮我们转换。
3 .package.json这个文件和普通的json文件有点区别,这里不仅仅能写项目的基础信息和作为插件包管理文件,主要是浏览器插件的manifest.json也是写在里面,长这样:
2.4如何添加各类扩展页
1.添加popup页面
javascript
// 根目录下添加一个popup.tsx文件
import { useState } from "react"
function IndexPopup() {
const [data, setData] = useState("")
return (
<div
style={{
padding: 16
}}>
<h2>
Welcome to your{" "}
<a href="https://www.plasmo.com" target="_blank">
Plasmo
</a>{" "}
Extension!
</h2>
<input onChange={(e) => setData(e.target.value)} value={data} />
<a href="https://docs.plasmo.com" target="_blank">
View Docs
</a>
</div>
)
}
export default IndexPopup
2.添加options页面,options页面用来写一些插件的配置信息或者设置信息等
javascript
// 根目录下创建一个options.tsx文件
import { useState } from "react"
function OptionsIndex() {
const [data, setData] = useState("")
return (
<div>
<h1>
Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
</h1>
<h2>This is the Option UI page!</h2>
<input onChange={(e) => setData(e.target.value)} value={data} />
</div>
)
}
export default OptionsIndex
3.添加new tabs页面,具体表现形式如下图
javascript
//根目录下创建newtab.tsx
import { useState } from "react"
function IndexNewtab() {
const [data, setData] = useState("")
return (
<div
style={{
display: "flex",
flexDirection: "column",
padding: 16
}}>
<h1>
Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
</h1>
<input onChange={(e) => setData(e.target.value)} value={data} />
</div>
)
}
export default IndexNewtab
本次更新就到这啦,更多知识需要小伙伴们自己去研究了。由于博主平时比较忙,几乎很少上掘金,如在开发中有遇到无法解决的问题,可以加入我的WEB前端QQ交流群:1032595904