一文教会你如何用Vue开发Chrome插件

前言

作为一个常年的B端前端开发者来说，千篇一律的业务开发有着些许的枯燥无味。在联调过程中，会经常发现后端在部署服务，然后又不知什么时候部署好，由于公司的部署系统查看系统部署状态入口较深，所以闲暇之余，研究了一下Chrome插件开发。因此从今天起，我们进行Chrome插件的开发学习。

通过下拉框可以快速的切换不同项目的前后端部署状态，先看一下成果：

插件

1. 什么是Chrome插件

• 谷歌浏览器插件是一种小型的定制浏览器体验的程序，通过插件可以自定义浏览器的一些行为来适合个人的需求，例如上面的查看服务器状态插件。

• 在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的HTML，Javascript，CSS 、图片资源等等文件。

• 开发Chrome插件只需要会 HTML，Javascript，CSS 就可以动手开发了。

2. 基础概念

2.1 基本原理

下面这张图很好的可以理解Chrome插件的原理。

原理

2.2 文件的目录

│  manifest.json
├─html
│   index.html
├─images
│   icon-128.png
│   icon-48.png
│   icon-16.png
├─scripts
│   background.js
├─styles
│   main.css
└─_locales
    ├─en
    │  messages.json
    └─zh_CN
        messages.json

• manifest.json 是整个插件的功能和文件配置清单，非常重要

• images 存放的为插件的图标文件

• _locales 存放的为插件的国际化语言脚本

• scripts 存放的为js 文件

• styles存放的为样式文件

• html存放的html文件

着重说一下manifest.json 文件

{
 // 清单文件的版本，这个必须写，而且必须是2
 "manifest_version": 2,
 // 插件的名称
 "name": "hello-world-plugin",
 // 插件的版本
 "version": "1.0.0",
 // 插件描述
 "description": "简单的Chrome扩展demo",
 // 图标，一般偷懒全部用一个尺寸的也没问题
 "icons":
 {
  "16": "img/icon.png",
  "48": "img/icon.png",
  "128": "img/icon.png"
 },
 // 会一直常驻的后台JS或后台页面
 "background":
 {
  // 2种指定方式，如果指定JS，那么会自动生成一个背景页
  "page": "background.html"
  //"scripts": ["js/background.js"]
 },
 // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
 "browser_action": 
 {
  "default_icon": "img/icon.png",
  // 图标悬停时的标题，可选
  "default_title": "hello-world-plugin",
  "default_popup": "popup.html"
 },
 // 当某些特定页面打开才显示的图标
 /*"page_action":
 {
  "default_icon": "img/icon.png",
  "default_title": "我是pageAction",
  "default_popup": "popup.html"
 },*/
 // 需要直接注入页面的JS
 "content_scripts": 
 [
  {
   //"matches": ["http://*/*", "https://*/*"],
   // "<all_urls>" 表示匹配所有地址
   "matches": ["<all_urls>"],
   // 多个JS按顺序注入
   "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
   // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
   "css": ["css/custom.css"],
   // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
   "run_at": "document_start"
  },
  // 这里仅仅是为了演示content-script可以配置多个规则
  {
   "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
   "js": ["js/show-image-content-size.js"]
  }
 ],
 // 权限申请
 "permissions":
 [
  "contextMenus", // 右键菜单
  "tabs", // 标签
  "notifications", // 通知
  "webRequest", // web请求
  "webRequestBlocking",
  "storage", // 插件本地存储
  "http://*/*", // 可以通过executeScript或者inser