Chrome扩展程序开发随记

在Chrome浏览器向正被浏览的外网网页植入自定义JS脚本

为了实现如标题的目的，需要开发一个Chrome扩展程序。接下来内容是实现简要步骤：

一、新建文件夹，命名为项目名，如“MyPlugin”。

二、进入文件夹内，新建名为“manifest.json”的文件，向其写入以下内容：

{"manifest_version": 2,"name": "My Plugin","version": "1.0.0","description": "Hello, Chrome Plugin","icons":{"16": "icon.png","48": "icon.png","128": "icon.png"},"content_scripts": [{"matches": ["https://*.baidu.com/*"],"js": ["Constant.js", "Public.js", "MyPlugin.js"],"run_at": "document_idle"}]
}

重点关注"content_scripts"字段：

1. 代码中"matches"指将自定义JS脚本植入目标网页URL。*为通配符，代表0个或n个字符。

2. "js"指在项目文件夹的自定义植入目标网页URL的JS脚本文件。标明后它们之间的对象、函数可互相引用。

3. “run_at"指JS脚本文件执行时刻，缺省值为"document_idle”，表示页面空闲时。可选值还有"document_start"和"document_end"，顾名思义。

三、接着是安装部署，在Chrome浏览器打开“扩展程序”管理界面。

基于Chrome内核浏览器打开方法都大同小异，不是在浏览器菜单栏找出“扩展程序”，就是直接在地址栏写入"chrome://extensions"然后回车。

四、在“扩展程序”管理界面勾选“开发者模式”，然后点击“加载已解压的扩展程序”，选择项目文件夹，确定后便完成安装部署。

开发注意事项：

1. 植入自定义JS脚本可操控页面的DOM，但不能直接控制页面JS（变量、方法）。虽然不能直接，但可间接，方法就是向页面插入script元素，具体操作请查看参考[2]。
2. 开发过程中，修改自定义JS脚本内容并不能实时反映到浏览器中，需要按Ctrl+R或在“扩展程序”管理界面在点击“Reload”。
3. 在后台调试自定义JS脚本：按F12打开后台，在“Console”tab页点击选择top下拉菜单，选择自定义扩展程序，如上文示例“My Plugin”，接着便可访问自定义JS中变量等内容。

用JS发送GET消息

传统解决方法是使用XMLHttpRequest对象：

function GET(url, handleFunc){var httpRequest = new XMLHttpRequest()httpRequest.open('GET', url, true)httpRequest.send()httpRequest.onreadystatechange = function(){if (httpRequest.readyState == 4 && httpRequest.status == 200) {var responseText = httpRequest.responseText// console.log("responseText:")// console.log(responseText)if(handleFunc) handleFunc(responseText)}};
}

XMLHttpRequest是一种从JavaScript发送GET请求的旧方法，几乎所有浏览器都支持它。XMLHttpRequest可以发送和接收任何类型的数据，包括JSON、XML、文本等。它的使用主要是出于历史原因，因为有很多基于XMLHttpRequest的遗留代码，并且需要支持较旧的浏览器。

新的解决方法是使用Fetch API：

fetch(url, {headers: {'Accept': 'application/json'}
}).then(response => response.text()).then(text => console.log(text))

Fetch API是一个内置于大多数web浏览器中的现代接口，它为生成HTTP请求提供了强大而灵活的方法。与XMLHttpRequest（XHR）不同，Fetch API是基于promise-based的，这使得发送HTTP请求更加容易，并为您提供了一个更简单、更干净的API，而无需嵌套回调。Fetch API支持GET、POST、DELETE和其他请求方法，可以检索和发送数据，包括文本、JSON和二进制数据。Fetch API是XMLHttpRequest的最佳替代方案，可以轻松地与其他技术（如Service Workers）集成。

XMLHttpRequest相对于Fetch的唯一优点是Fetch还不能跟踪向服务器发送数据的进度。在Fetch API之前，从JavaScript发送请求是相当尴尬的。这就产生了几个流行的JavaScript库（jQuery、Axios等），它们使从JavaScript发送GET和POST请求变得简单，并且可以在XMLHttpRequest之上工作。

用JS发送POST消息

传统解决方法是用创建form元素迂回发送POST消息：

function POST(url, params) {var temp = document.createElement("form")temp.action = urltemp.method = "post"temp.style.display = "none"for (var x in params) {var opt = document.createElement("input")opt.name = xopt.value = params[x]temp.appendChild(opt)}document.body.appendChild(temp)temp.submit()return temp;
}POST('/my/url', {a:'3', b:'2', c:'1'})

或者像上一节GET那样创建使用XMLHttpRequest对象发送POST消息：

function POST(url, data){var httpRequest = new XMLHttpRequest();httpRequest.open("POST", url, true);httpRequest.setRequestHeader("Content-Type", "application/json");httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {//TODO:}}httpRequest.send(JSON.stringify(data));
}POST('/my/url', {a:'3', b:'2', c:'1'})

新的解决方法是使用Fetch API：

fetch('https://reqbin.com/echo/post/json', {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({ "id": 78912 })
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)))

Fetch API的简要概述可看上一节，具体参考[7]。

用JS将文本内容直接复制到系统剪贴板

function copyTextToClipboard(text) {var textArea = document.createElement("textarea");textArea.value = text;document.body.appendChild(textArea);textArea.select();document.execCommand("copy");document.body.removeChild(textArea);
}copyTextToClipboard("要复制的内容");

调用execCommand()还可以实现浏览器菜单的很多功能，如保存文件、打开新文件、撤消、重做操作…等等。参考[4]

用JS快速查找数据

一、使用对象

let data = {'Alice': 25,'Bob': 30,'Charlie': 35,'David': 40
};console.log(data['Alice']); // 25

二、使用数组

使用数组来存储数据，然后使用一些高效的算法来实现快速查找。

二分搜索可以说是最高效的排序算法，不过要是先对数组进行排序操作。

let data = [25, 30, 35, 40];function binarySearch(arr, key) {let low = 0;let high = arr.length - 1;while (low <= high) {let mid = Math.floor((low + high) / 2);if (arr[mid] === key) {return mid;} else if (arr[mid] < key) {low = mid + 1;} else {high = mid - 1;}}return -1;
}console.log(binarySearch(data, 30)); // 1

三、使用Set

Set是一种新的数据类型，可以用来存储不重复的值。在JavaScript中，可以使用Set来实现快速查找。

let data = new Set(['Alice', 'Bob', 'Charlie', 'David']);
console.log(data.has('Alice')); // true

四、使用Map

Map是一种新的数据类型，可以用来存储键值对。在JavaScript中，可以使用Map来实现快速查找。

let data = new Map([['Alice', 25],['Bob', 30],['Charlie', 35],['David', 40]
]);console.log(data.get('Alice')); // 25

参考

1. ReqBin is an online API testing tool for REST and SOAP APIs
2. 【干货】Chrome插件(扩展)开发全攻略
3. JS复制到剪贴板的实现方法_笔记大全_设计学院
4. 详解Javascript中document.execCommand()的用法
5. js怎么样查找比较快-阿楠教学网
6. Making a GET request with JavaScript
7. Fetch API - Web API 接口参考 | MDN
8. Sending POST Request in JavaScript