Chrome插件初窥与实践

某页面获取信息时，需要验证token判断登陆信息。因为某些原因，在测试过程中，测试人员需要采用手动注入token的方式完成登陆，严重影响工作效率。

为了避免影响原始项目，所以采用chrome插件的方式，制作一个简单的登陆页面模拟实际登陆情况，并向原页面插入token用作登陆信息。

本文记录了chrome插件开发的简单概念与插件开发过程，方便以后深入学习chrome插件的开发。

1、核心概念

（1）manifest.json

每一个chrome插件都必须有一个JSON格式的清单文件放在根目录。下面是一些常见的配置项，其中manifest_version、name、version为三个必填项。

{
    // 必须
    "manifest_version": 2, // 清单文件的版本，必须为2
    "name": "插件名称",
    "version": "1.0.0",
    
    // 推荐
    "default_locale": "en",
  	"description": "插件描述",
  	"icons": {...}, // 图标
    
    // 可选
    "background":{
        "page": "background.html" // 指定后台页面
        "scripts": ["js/background.js"] // 指定后台脚本
        "persistent": false // 推荐设置后台脚本为非持久
    },
      
    "browser_action": {	// 工具栏图标（或page_action）
        "default_icon": "icon.png",
        "default_title": "图标标题",// 图标悬停时的标题，可选
        "default_popup": "popup.html"
    },
      
    "content_scripts": // 插入网页的脚本
    [
        {
            "matches": ["http://*/*", "https://*/*"], // 匹配页面url，<all_urls> 表示匹配所有地址
            "js": ["content.js"], // 多个JS按顺序注入
            "css": ["css/custom.css"],
            "run_at": "document_start"// 代码注入的时间，可选值： "document_start", "document_end", "document_idle"，最后一个表示页面空闲时，默认document_idle
        },
        {...}, // 可以配置多个规则
    ],
    "permissions": // 权限申请
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "storage", // 插件本地存储
    ],
    "default_locale": "zh_CN", // 默认语言
    "devtools_page": "devtools.html"// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
}
复制代码

（2）content_script

通过content_script，我们可以向指定页面注入JS或CSS。它与插入的页面共享dom，即脚本中使用的window对象与页面中的window对象一致。

content_script可以使用如下几种chrome APIs

• i18n
• storage
• runtime（connect, getManifest, getURL, id, onConnect, onMessage, sendMessage)

（3）background

background是一个运行与浏览器的后台脚本/页面，与当前浏览页面无关。在配置中，可以通过page引入页面，或通过scripts引入JS文件。

通过设置persistent为false，我们可以让background在需要时被加载，在空闲时被卸载，从而释放系统资源。唯一保持后台脚本持续活动的情况是扩展使用chrome.webRequest API来阻止或修改网络请求。webRequest API与非持久性后台页面不兼容。

（4）popup

popup是点击浏览器工具栏上小图标打开的窗口，焦点离开页面即关闭，可做临时性交互。右键后点击“检查”可开启开发者工具进行调试。

可以通过browser_action与page_action进行设置。browser_action可作用于任何页面，page_aciton可作用与部分页面。如vue tools插件，当检测到页面没有使用vue时，插件图标显示为不可用。

2、项目实践

（1）环境搭建

项目主要使用vue-cli与vue-cli-plugin-chrome-ext进行开发，element-ui作为组件库

1、安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

2、初始化一个项目

vue create demo
复制代码

3、进入项目目录，安装vue-cli-plugin-chrome-ext插件。依次选择插件名称、描述、版本号、使用js或ts

vue add vue-cli-plugin-chrome-ext
复制代码

4、清理文件，删除src/main.js, src/components, public/f