Chrome插件开发浅浅谈

chrome-extension-development.blog.md

• 浅谈Chrome插件开发

• 可能有很多人都用过Chrome插件，有没有好奇过Chrome插件是怎么开发的？

• Chrome插件开发使用到的技术栈并不复杂，也是 HTML/CSS/JS 这些前端相关的技术，只是会有一套自己的 API 和限制等，下面带大家认识下 Chrome 插件的开发。

• 插件是什么？

  • 

• 插件怎么开发？

  • 原始阶段（类似于手动操作dom）
    • 引入各个浏览器（主要是Firefox）的sdk，调用sdk开发浏览器专用的插件

    • var widgets = require("sdk/widget");
      var tabs = require("sdk/tabs");
      var widget = widgets.Widget({
        id: "mozilla-link",
        label: "Mozilla website",
        contentURL: require("sdk/self").data.url("icon-16.png"),
        onClick: function() {
          tabs.open("http://developer.mozilla.org/");
        }
      });

    • 例子：
      • 油猴 插件
  • Web阶段（类似于 jQuery）
    • 开发方式：手写 manifest.json、js、css、html等
    • 例子
      • GoogleChrome/chrome-extensions-samples Google官方Demo
  • 脚手架时代（类似于 create-react-app 或 angular cli等）
    • 开发方式：使用脚手架，或cli生成初始化模板，一般自带主流前端框架
    • 例子
      • yeoman/generator-chrome-extension 生成器
      • larscom/ng-chrome-extension Angular模板
      • guocaoyi/create-chrome-ext
      • lxieyang/chrome-extension-boilerplate-react
  • 框架时代（类似于 Next.js、Umi等）
    • 开发方式：封装底层API，抽象出开发框架，拥有良好的文档和成熟的解决方案
    • 例子
      • PlasmoHQ/plasmo 类Next.js开发框架

• 现代化的 Chrome 插件

  • Manifest V3
    • Manifest V3是新一代插件开发标准，与之前的 Manifest V2相比，有很多的 API 的变化，是一次大的标准更新，各个浏览器厂商也都在努力实现（chrome >= 88）
    • Manifest中更注重安全性，封锁了几乎所有的使用远程（或动态）代码攻击用户的入口。当然同时也给插件开发者带来了诸多的限制。
  • 部分设定边界模糊
    • 类似于HTML5中的语义化标签，Chrome插件中的许多传统设定也逐渐模糊或者意义较小了
    • 如Popup弹窗、 Options 选项页面，NewTab 新标签页等等，都不必再拘泥于传统的实现方式

• 理想中的框架&平台

  • 开箱即用的开发者体验
  • 约定式的规则
  • 抽象、开放的API
  • CI、CD支持
  • 国内环境版本更新支持
  • 模块化隔离
    • 复杂插件不会仅用于一个网站，或一个业务之上。
    • 需要有开箱即用的模块化支持
    • 模块化细节：
      • 整个模块的启用、禁用
      • 模块内各项功能的启用、禁用
      • 模块文档
      • 各模块、各功能页面提示
      • 自动生成的选项页面
      • 模块内约定式路由
        • 快速搜索

附图