华为校园招聘很多人查看状态码。但查看需要使用到浏览器开发者工具,使用不太方便,便决定通过浏览器插件在进入招聘进度页面将状态码弹出显示。
状态码目前好像已经失效。
插件下载
GitHub : https://github.com/godwei123/hw-extensions
官网有快速开始文档,可以根据文档快速完成一个简单的浏览器插件 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。
Content scripts
向指定页面注入 JS
代码;xhr/fetch
请求;url
与所要的请求相同,通过浏览器 postMessage
进行数据通信发送;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;
};
// 可以访问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) // 可以对数据进一步处理
});
{
"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、进入页面后即弹出状态码
Chrome Developers :https://developer.chrome.com/docs/extensions/