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

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

相关推荐
闲坐含香咀翠30 分钟前
记一次交互优化:从根源上解决Axios请求竞态问题
前端·http·浏览器
前端小巷子1 小时前
浏览器的同源策略与跨域问题
前端·面试·浏览器
bo521001 小时前
浏览器缓存优先级
前端·面试·浏览器
mortimer10 天前
Chrome 开发者工具终极指南:从入门到精通
前端·chrome·浏览器
专注VB编程开发20年10 天前
java/.net跨平台UI浏览器SDK,浏览器控件开发包分析
linux·ui·跨平台·浏览器·cef·miniblink
断竿散人10 天前
🌈CSS渐进增强实战指南:构建跨世代浏览器的稳健体验
前端·css·浏览器
前端小巷子13 天前
跨标签页通信(五):IndexedDB
前端·面试·浏览器
前端小巷子14 天前
跨标签页通信(四):SharedWorker
前端·面试·浏览器
Senar15 天前
听《富婆KTV》让我学到个新的API
前端·javascript·浏览器
前端小巷子15 天前
跨标签页通信(三):Web Storage
前端·面试·浏览器