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

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

相关推荐
FliPPeDround5 天前
🚀 CRXJS v2.0正式版发布:Chrome扩展开发新体验
前端·浏览器·vite
海底火旺6 天前
浏览器渲染全过程解析
前端·javascript·浏览器
拾光拾趣录6 天前
浏览器存储:从Cookie到IndexedDB
前端·浏览器·indexeddb
拾光拾趣录6 天前
前端静态资源本地缓存:从秒开到省流量
前端·性能优化·浏览器
yanlele6 天前
【实践篇】【01】我用做了一个插件, 点击复制, 获取当前文章为 Markdown 文档
前端·javascript·浏览器
星语卿7 天前
浏览器重绘与重排
前端·浏览器
唐叔在学习7 天前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
拾光拾趣录7 天前
油猴插件开发学习:从零编写你的第一个浏览器增强脚本
前端·浏览器
kingsley10 天前
刷新页面前, 我们能够将请求发出么
浏览器
bo5210010 天前
浏览器事件机制详解以及发展史
前端·面试·浏览器