谷歌浏览器插件开发简介

最近业务需求需要做一个浏览器插件，于是我立马去查了有关浏览器插件的开发资料，这里整理一下。建议开发中还是直接看开发文档然后再动手写。

谷歌官方开发文档 (opens new window)（需要科学上网）

360 浏览器插件开发文档 (opens new window) （这个文档写的很齐，应该是直接翻译谷歌的开发文档所来的。）

# 浏览器插件介绍

浏览器的插件其实本质就是与 web 页面的交互，所以大家就知道其实插件就是 js 脚本，当然可以加载 css 静态文件和 HTML 文件，但是主角还是 js。至于为什么开发谷歌浏览器插件，当然是因为国内的浏览器基本都是基于谷歌的内核开发的，所以受众面最广，毕竟 Firefox 和 Opera 以及苹果的 Safari 浏览器还是比较小众

# 配置文件

{
  "name": "插件名字",
  "manifest_version": 2,
  "version": "版本名称",
  "homepage_url": "插件的url地址",
  "description": "插件描述",
  "permissions": [
    "cookies",
    "activeTab",
    "contextMenus",
    "tabs",
    "storage",
    "webRequest",
    "management",
    "webRequestBlocking",
    "*://*/*"
  ],
  "icons": {
    "48": "图片绝对路径",
    "128": "图片绝对路径"
  },
  "background": {
    "page": "background.html"   # 常驻后台的HTML文件
    // "scripts": ["js/background.js"]  # 也可以选择直接加载js文件
    // "persistent": false  # 在需要的时候才挂起background服务
  },
  "browser_action": {
    "default_icon": "浏览器的默认图标文件",
    "default_title": "插件的默认title",
    "default_popup": "popup.html"  #默认的popup文件，后面会讲
  },

  "content_scripts": [
    {
      "matches": [
        "插件作用的url地址"  #可以写正则来匹配url
      ],
      "js": [
        "js/jquery-3.3.1.min.js",   #加载的js文件
        "js/contentscript.js"
      ],
      "css": [
        "css/style.css"   #加载的css文件
      ],
      "run_at": "document_end"
    }
  ]
}

以上就是 manifest.json 的大概内容，一般的插件开发所需要的配置基本这些就够了。这边需要注意的是一些必填项。"name", "manifest_version", "version" 这三个字段是必须的。其中"manifest_version"的值必须是 2，"permissions"为插件所需要用到的权限。

# background.html

这个文件是常驻文件，就是一旦开启插件使用的时候，就会生效，也会随着插件关闭或者浏览器关闭而失效。一般来说可以用来写一些监听事件，因为它是常驻的。如下图，我们可以把交互代码写到 background.js 里面，background.html 负责加载 js 文件。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/background.js"></script>
  </head>
  <body></body>
</html>

popup.html 为弹出菜单窗口，什么是弹出菜单窗口呢？

fanyi

如图所示，popup页面就是点击浏览器插件图标之后出来一个框，当然你也可以把它叫做一个页面。popup.html同样可以加载js文件来实现交互。

# welcome.html

看名字大概就知道什么意思了，这个文件就是用户成功添加插件的时候弹出的页面文件。也是可以加载 js 文件。不过要监听插件安装成功或者更新的事件来调用。可以在 background.js 监听：

// background.js

chrome.runtime.onInstalled.addListener(function(details) {
  if (details.reason == "install") {
    // 插件安装成功
    chrome.tabs.create({ url: "welcome.html" }); // 插件安装成功后添加欢迎页面
  } else if (details.reason == "update") {
    // 插件升级成功
    chrome.tabs.create({ url: "welcome.html" }); // 插件更新成功后添加欢迎页面
  }
});

# contentscript.js

这个 js 文件就是整个插件的灵魂，几乎所有的开发精力都会花在此文件中，主要的页面交互都是写在这里，当然你也可以分拆引入到这个文件。可以调用谷歌提供的 api 完成一系列的交互。建议大家看英文原版的谷歌官方 API 文档。还有如果需要在页面增加 HTML 内容的话，只能用 js 生成渲染，这点比较蛋疼。

谷歌 API 文档 (opens new window) （需求科学上网）

# 打包发布

chrome

在谷歌浏览器的扩展程序页面点击打包扩展程序，然后选择目录就能打包成.crx文件了，然后上传到谷歌应用商店，交5$就能发布了，别人就能在商店下载你的插件应用。

# 结语

以上是大概的谷歌浏览器插件开发流程和大概的了解，其实还是建议大家去通读开发文档和谷歌 API 文档，写的都比较通彻易读，工欲善其事必先利其器。需求定下来之后先花一两天的时间学(mo)习(yu)是我们程序员的日常操作 😏，至于定的发布日期嘛，肯定是熬(shan)夜(ku)加(pao)班(lu)啦。

huaji

Mercer-Lee的空间

Choose mode