浏览器插件开发【从入门到放弃之二：浏览器插件开发企业级实践】

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