Chrome 插件开发学习总结

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 配置项

Name	Description
manifest_version	清单文件的版本，这个必须写，而且必须是2
name	插件的名称
version	插件的版本
description	插件描述
icons	插件详情页面图标
background	会一直常驻的后台JS或后台页面
browser_action	浏览器右上角图标以及popup页面等设置，browser_action、page_action、app必须三选一
page_action	需要直接注入页面的JS
permissions	权限申请
homepage_url	主页地址
options_page	插件配置页

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://*/*"],
            // "" 表示匹配所有地址
            "matches": [""],
            // 多个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"
        }
    ],
}

Name	Description
matches	必须。 定义哪些页面需要注入content script
js	可选。 需要向页面中注入的javascript文件，按定义顺序注入。
run_at	可选。 控制content script注入的时机。可以是document_start，document_end或者document_idle。 缺省时是document_idle
all_frames	可选。控制是在匹配页面的所有frame中运行还是只在最上层的frame中运行。 缺省是false，也就是只在最上层frame中运行。
include_globs	可选。控制将content_script注入到哪些匹配的页面中
exclude_globs	可选。控制将content_script注入到哪些匹配的页面中。

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

Name	Description
notifications	扩展程序访问chrome.notifications API
background	具有后台权限，可以在后台运行，直到退出chrome
bookmarks	扩展程序访问chrome.bookmarks API的权限
contentSettings	扩展程序访问chrome.contentSettings API
contextMenus	开启右键菜单权限，扩展程序访问chrome.contextMenus API
notifications	开启桌面通知权限，扩展程序可以访问chrome.notifications API
webRequest	开启web请求权限，扩展程序可以访问chrome.webRequest API
webRequestBlocking	扩展程序以阻止方式使用chrome.webRequest API
cookies	扩展程序访问chrome.cookies API。
debugger	扩展程序访问chrome.debugger API
history	扩展程序访问chrome.history

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 运行生产环境编译打包