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

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

相关推荐
随风飞翔的胖子4 天前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
子兮曰5 天前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
mCell5 天前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
奇舞精选6 天前
前端必修课:万字长文带你搞定浏览器插件开发
浏览器
摸着石头过河的石头8 天前
HTTP内容类型:从基础到实战的全方位解析
前端·http·浏览器
前端小白19958 天前
面试取经:浏览器篇-跨标签页通信
前端·面试·浏览器
前端拿破轮11 天前
从零到一开发一个Chrome插件(三)
前端·chrome·浏览器
子兮曰11 天前
🚀2025年Web开发的20大痛点,每一个都让前端想转行!
前端·javascript·浏览器
一刻缱绻11 天前
Mixed Content 问题及解决方案详解
前端·浏览器
金金金__14 天前
浏览器插件开发的大致流程详解~
前端·浏览器