谷歌浏览器插件开发 --- 实现华为状态码弹出

华为校园招聘很多人查看状态码。但查看需要使用到浏览器开发者工具，使用不太方便，便决定通过浏览器插件在进入招聘进度页面将状态码弹出显示。
状态码目前好像已经失效。

插件下载
GitHub : https://github.com/godwei123/hw-extensions

1、基础知识

官网有快速开始文档，可以根据文档快速完成一个简单的浏览器插件 demo。

浏览器插件开发主要包括以下几个部分：

• manifest（必要文件）

  扩展的 manifest 是唯一的必要文件，必须具有特定文件名：manifest.json。它还必须位于扩展的根目录中。manifest 记录重要的元数据，定义资源，声明权限，并确定在后台和页面上运行哪些文件。

{
  "manifest_version": 3, // manifest 版本号，2与3差别很多，会影响下面的配置项。
  "name": "Hello Extensions", // 插件名称
  "description": "Base Level Extension", // 插件描述
  "version": "1.0", // 插件版本
  "action": { // 声明Chrome应用作操作图标的图像
    "default_popup": "hello.html", //当单击操作时，HTML页面显示在弹出窗口中
    "default_icon": "hello_extensions.png" // Chrome应用作操作图标
  },
  "background": {
    "service_worker": "background.js" // 
  },
  "permissions": [ // 权限申请
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [""],
      "js": ["scripts/content.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ],
  "icons": { // 图标
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
}

• service worker

  扩展 service worker 处理和监听浏览器事件。事件有多种类型，例如导航到新页面、删除书签或关闭选项卡。它可以使用所有Chrome API，但它不能直接与网页的内容交互；这是内容脚本的工作。

• Content scripts

  Content scripts 在网页的上下文中执行 Javascript。他们还可以读取和修改注入页面的DOM。内容脚本只能使用Chrome API 的子集，但可以通过与扩展 service worker 交换消息间接访问其余部分。

• popup and other pages

  扩展名可以包括各种HTML文件，例如弹出窗口、选项页面和其他HTML页面。所有这些页面都可以访问Chrome API。

2、思路

• 通过 Content scripts 向指定页面注入 JS 代码；
• 在代码中监听此页面的所有 xhr/fetch 请求；
• 如果请求 url 与所要的请求相同，通过浏览器 postMessage 进行数据通信发送；
• 接收消息，显示。

3、实现

（1）建立基本目录结构

（2）实现请求监听 injected.js

const URL = '/services/portal/portaluser/queryMyJobInterviewPortal5';
(function (xhr) {
    var XHR = XMLHttpRequest.prototype;

    var open = XHR.open;
    var send = XHR.send;

    XHR.open = function (method, url) {
        this._method = method;
        this._url = url;
        return open.apply(this, arguments);
    };

    XHR.send = function (postData) {
        this.addEventListener('load', function () {
            if (this._url.indexOf(URL) > -1) {
                this.response && window.postMessage({ type: 'xhr', data: this.response }, '*'); // send to content script
            }
        });
        return send.apply(this, arguments);
    };
})(XMLHttpRequest);

const { fetch: origFetch } = window;
window.fetch = async (...args) => {
    const response = await origFetch(...args);
    console.log('injected script fetch request:', args);
    response
        .clone()
        .json() // maybe json(), text(), blob()
        .then(data => {
            window.postMessage({ type: 'fetch', data: data }, '*'); // send to content script
        })
        .catch(err => console.error(err));
    return response;
};

（3）实现 JS 代码插入页面 content.js

// 可以访问DOM，注入到页面

var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function () {
    this.remove();
};
(document.body || document.head || document.documentElement).appendChild(s);
window.addEventListener('message', function (e) {
    console.log('content script received:', e.data.data);
    e.data.data && alert(e.data.data) // 可以对数据进一步处理
});

（4）manifest.json

{
  "name": "华为状态码",
  "description": "华为状态码查看，登录后，进入到进展页面即可",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage","scripting","webRequest"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.huawei.com/*"],
      "js": ["scripts/content.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ],
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "web_accessible_resources": [
    {
      "resources": [ "injected.js" ],
      "matches": [ "https://*/*" ]
    }
  ]
}

使用

1、登录后点击申请进展

2、进入页面后即弹出状态码

4、参考

Chrome Developers ：https://developer.chrome.com/docs/extensions/