打开新世界大门，测试人可以用Chrome插件干什么？

什么是Chrome插件

这篇文章所说的Chrome插件，也就是我们通常说的Chrome扩展 (Chrome Extension)，是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由 HTML、CSS、JS、图片等资源组成的一个 .crx 后缀的压缩包。

让我们来看看官方解释：

Chrome Extension 是一个小的软件程序，它可以用来定义浏览器的浏览体验，让用户可以根据个人需求或者偏好定制 Chrome 浏览器的功能和行为，主要使用的技术栈是 HTML、Javascript 和 CSS。

简单来说，就是：利用前端的技术栈，来定制浏览器的功能，改善用户体验。

只要你会写 JS、HTML、CSS，你就能开发 Chrome 插件！！！

Chrome插件能干什么

利用Chrome浏览器提供的已有功能和和各种API，进行功能组合，从而增强浏览器网页的功能，改善浏览器体验，轻松实现属于自己的 “定制版” 浏览器。

通过Chrome插件，你可以实现包括但不限于以下相关功能：

书签控制
下载控制
窗口控制
标签控制
网络请求控制
各类事件监听
自定义原生菜单
完善的通信机制

测试人员能用Chrome插件干什么？

下面简单介绍下作为测试人员，我基于业务开发的一个Chrome插件：

这是一个多个角色一键切换登录系统的Chrome插件，在业务测试的过程中，测试人员可以非常方便的在各个角色之间来回切换测试，不需要再用文档去记录各种角色、各种账号，大大提升了测试效率。

另外，对于PM、UI走查，以及开发联调都提供了极大的方便。

也就是说，只要你测试的业务形态是web项目，你就可以基于Chrome插件的各种能力，对web项目进行各种操作，以达到提升效率的目的。

Chrome插件核心概念

manifest.json

manifest.json是一个JSON格式的清单文件，是插件必不可少的文件，用来配置所有和插件相关的配置，提供重要信息。

manifest.json 文件必须放在根目录下。

目前，Chrome官方推出的manifest最新版本是V3。

建议使用最新的V3版本进行开发，V2版本2023年开始就不维护了。

下面给出V3版本的一些常用配置：

{// 清单文件的版本，这个必须写，目前最新版本是3"manifest_version": 3,// 插件的名称，必须配置"name": "demo",// 插件的版本，必须配置"version": "1.0.0",// 插件描述"description": "Chrome扩展demo",// 图标"icons":{"16": "img/icon.png","48": "img/icon.png","128": "img/icon.png"},// 会一直常驻的后台JS或后台页面"background":{// 如果需要 background，则下面的配置必须要有，指定后台运行的脚本"service_worker": "background.js"},// 浏览器右上角图标等，对应 v2 版本的 browser_action、page_action 设置"action":{// 图标"default_icon": {"16": "images/favicon.png","32": "images/favicon.png","48": "images/favicon.png","128": "images/favicon.png"},// 图标悬停时的标题，可选"default_title": "这是一个示例Chrome插件","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"]}],// 权限申请，可以用来指定使用 Chrome 插件的那些功能"permissions":["contextMenus", // 右键菜单"cookies", // cookie"tabs", // 标签"notifications", // 通知"webRequest", // web请求"webRequestBlocking","storage", // 插件本地存储"scripting" // 允许向页面注入脚本执行],// 网站权限申请，可以通过 executeScript 或者 insertCSS 访问的网站"host_permissions": ["http://*/*","https://*/*"],// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的// 扩展通常使用此功能来公开需要在网页中加载的图像或其他资产，但扩展包中包含的任何资产都可以通过网络访问"web_accessible_resources": ["js/inject.js"],// 插件主页，这个很重要，不要浪费了这个免费广告位"homepage_url": "https://www.baidu.com",// 覆盖浏览器默认页面"chrome_url_overrides":{// 覆盖浏览器默认的新标签页"newtab": "newtab.html"},// 允许用户通过提供选项页面来自定义扩展的行为。用户可以通过右键单击工具栏中的扩展图标然后选择选项来查看扩展的选项，或者导航到位于 chrome://extensions 的扩展管理页面，找到所需的扩展，单击详细信息，然后选择选项链接// Chrome40以前的插件配置页写法"options_page": "options.html",// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个"options_ui":{"page": "options.html",// 添加一些默认的样式，推荐使用"chrome_style": true},// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字"omnibox": { "keyword" : "go" },// 默认语言"default_locale": "zh_CN",// devtools页面入口，只能指向一个HTML文件，不能是JS文件"devtools_page": "devtools.html"}

更多配置请参考：manifest.json 配置

popup

popup 是点击扩展图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。

比如：

popup可以包含任意你想要的HTML内容，并且会自适应大小。

在 manifest.json 文件中，可以通过 default_popup 字段来指定 popup 页面，也可以调用 setPopup() 方法。

下面给出在 manifest.json 中如何进行配置：

"action":{...,// 指定 popup 页面"default_popup": "popup.html",// 图标"default_icon": {"16": "images/favicon.png","32": "images/favicon.png","48": "images/favicon.png","128": "images/favicon.png"},// 图标悬停时的标题，可选"default_title": "这是一个示例Chrome插件",    ...},

popup页面的生命周期一般很短，需要长时间运行的代码千万不要写在popup里面。

background

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

background 的权限非常高，几乎可以调用所有的 Chrome 扩展 API（除了 devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置 CORS。

在 manifest.json 文件中，可以通过 service_worker 字段指定 background：

"background":{// 如果需要 background，则下面的配置必须要有，指定后台运行的脚本"service_worker": "background.js"},

background 页面是看不到的，我们只能调试它的代码。

content-scripts

content-scripts 是 Chrome 插件中向页面注入脚本的一种形式。

通过 content-scripts 我们可以以配置的方式轻松向指定页面注入 JS 和 CSS，实现一些脚本执行和 CSS 定制。

在 manifest.json 文件中，可以通过 content-scripts 字段配置：

"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-scripts，另外还有一种注入的方式我们称之为动态注入，也就是在插件运行时，在任何你想要注入的时候进行注入，而不用提前指定。

通过 chrome.scripting.executeScript 来执行脚本，从而实现访问 web 页面的 DOM。

使用 chrome.scripting.executeScript 方式注入脚本，必须在 manifest.json 文件中指定 permission 字段进行权限申请。

"permissions": ["tabs", "scripting"]

content-scripts 和动态注入这两种方式与原始页面共享 DOM，但是不共享 JS，如要访问页面 JS（例如某个 JS 变量），只能通过 injected js 来实现。

什么是 injected js？

Injected js 是通过 DOM 操作的方式向页面注入的一种 JS。

比如下面的代码就是一段 Injected js：

/ 向页面注入JSfunction injectCustomJs(jsPath){jsPath = jsPath || 'js/inject.js';var temp = document.createElement('script');temp.setAttribute('type', 'text/javascript');// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.jstemp.src = chrome.extension.getURL(jsPath);temp.onload = function(){// 放在页面不好看，执行完后移除掉this.parentNode.removeChild(this);};document.head.appendChild(temp);}

使用 injected js 也需要申请 permissions：

"permissions": ["tabs", "scripting"]

上面几种 js 的对比：

homepage_url

用来设置插件的主页【一个免费的广告位～