1. 参考文档

• Chrome插件开发教程： https://dev.crxhome.org/guide/what-is-extensions.html#%E4%BB%80%E4%B9%88%E6%98%AF%E6%89%A9%E5%B1%95
• Chrome插件开发全攻略： http://get.ftqq.com/9167.get
• manifest.json文件详解： https://blog.csdn.net/fyyyr/article/details/80949965
• chrome extensions api：https://www.cnblogs.com/chear/articles/4964945.html
• 360浏览器应用开发平台： http://open.chrome.360.cn/extension_dev/overview.html
• 结合vue-cli3开发Chrome插件： https://blog.csdn.net/weixin_34404393/article/details/91476348
• 其他：https://www.cnblogs.com/rubekid/p/11769395.html

2. 文件结构

文件结构.png

3. manifest.json

3.1 配置项

3.2 background

常驻的后台页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

{
    "background":
    {
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}

3.3 content-scripts

Chrome插件中向页面注入脚本的一种形式，借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入js和css

{
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // css注入
            "css": ["css/custom.css"],
            // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
            "run_at": "document_start"
        }
    ],
}

3.4 homepage url

开发者或者插件主页设置

"homepage_url": "http://zha-spstv-w10:4000/#/overall"

home_page.png

3.5 options page

options页设置

"options_page": "html/options.html",

option_page.png

3.6 覆盖特定页面

使用替代页，可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。

扩展可以替代如下页面：

• 书签管理器(bookmarks)：从工具菜单上点击书签管理器时访问的页面，或者从地址栏直接输入 chrome://bookmarks。
• 历史记录(history)：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history。
• 新标签页(newtabs)：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab。

注意：

• 一个扩展只能替代一个页面。
• 如果你替代隐身窗口的页面，请注意要在manifest中将 incognito 属性指定为 "spanning"。
• 不能替代隐身窗口的新标签页。

{
    "chrome_url_overrides": {
    "newtab": "html/newtab.html",
    // "history": "history.html",
    // "bookmarks": "bookmarks.html"
  },
}

3.7 桌面通知

3.8 Omnibox

omnibox 应用程序界面允许向Google Chrome的地址栏注册一个关键字，地址栏也叫omnibox。当用户输入你的扩展关键字，用户开始与你的扩展交互。每个击键都会发送给你的扩展，扩展提供建议作为相应的响应。

 "omnibox": { "keyword" : "go" }, 

omnibox.png

4. contextMenus

• type (optional enumerated string ["normal", "checkbox", "radio", "separator"] )
  
  右键菜单项的类型。默认为“normal”。

• title ( optional string )
  
  右键菜单项的显示文字；除非为“separator”类型，否则此参数是必须的。

• checked ( optional boolean )
  
  checkbox或者radio的初始状态：true代表选中，false代表未选中。在给定的radio中只能有一个处于选中状态。

• contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )
  
  右键菜单项将会在这个列表指定的上下文类型中显示。默认为“page”。

• onclick ( optional function )
  
  当菜单项被点击时触发的函数。

5. Permissions权限列表

https://blog.csdn.net/guoqiankunmiss/article/details/110491523

6. 结合vue-cli3开发Chrome插件

6.1 搭建环境

1. 安裝vue-cli3:npm install -g @vue/cli
2. 创建一个vue-cli3项目：vue create vue-extension，对话流程选择默认就行。
3. 安装vue-cli-plugin-chrome-ext插件：vue add chrome-ext,根据安装对话选项设置好。
4. 安装element-ui：npm install element-ui
5. npm install babel-plugin-component -D

6.2 运行项目

1. npm run build-watch 运行开发环境
2. npm run build 运行生产环境编译打包