Chrome/Edge/Safari/Firefox/Opera浏览器扩展插件的开发过程概览

浏览器市场份额

Top Browsers Market Share 给出了主流浏览器的市场份额，桌面的和移动端的份额分布差距挺大，下面是 2022年6月份数据（不包含中国）：。

2022年6月份数据（不包含中国）：

Desktop: Chrome 64.86%,  Edge   12.57%,   Safari  9.71%,  Firefox 6.97%,  Opera     1.94%,  Other 3.95%
Mobile:  Chrome 48.80%,  Safari 41.84%,   Samsung 5.68%,  Opera   1.47%,  Firefox   0.65%,  Other 1.57%
Tablet:  Chrome 52.44%,  Safari 33.77%,   Samsung 3.48%,  Opear   1.08%,  YaBrowser 1.00%,  Other 8.24%

Chrome 浏览器插件开发概览

执行 Chrome Extensions Getting Started 中的例子，感受下 chrome extension 的实现过程。

建立一个空目录来存放插件的代码文件。

创建顶层文件 manifest.json，该文件是插件的入口文件，索引了插件的运行代码、权限、资源等。

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,                  // manifest 适用版本
  "background": {  
    "service_worker": "background.js"     // 插件加载后执行的后台脚本
  },
  "permissions": [
    "storage","activeTab","scripting"     // 插件需要的权限
  ],
  "action": {
    "default_popup": "popup.html",        // 在工具栏点击插件图标出现的弹窗
    "default_icon": {
      "16": "/images/get_started16.png",  // 插件的显示图标
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",    // 插件的显示图标
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "options_page": "options.html"          // 右击插件图标后点击「选项」弹出的插件配置页面
}