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"
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

重点关注"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)
        }
    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

fetch(url, {
    headers: {
    	'Accept': 'application/json'
    }
}).then(response => response.text())
  .then(text => console.log(text))
1
2
3
4
5
6

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 = url
    temp.method = "post"
    temp.style.display = "none"
    for (var x in params) {
        var opt = document.createElement("input")
        opt.name = x
        opt.value = params[x]
        temp.appendChild(opt)
    }
    document.body.appendChild(temp)
    temp.submit()
    return temp;
}

POST('/my/url', {a:'3', b:'2', c:'1'})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

或者像上一节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'})
1
2
3
4
5
6
7
8
9
10
11
12
13

新的解决方法是使用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)))
1
2
3
4
5
6
7
8
9
10

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("要复制的内容");
1
2
3
4
5
6
7
8
9
10

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

用JS将文本内容导出成文件

function exportFile(filename, text){
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}
1
2
3
4
5
6
7
8
9

用JS快速查找数据

一、使用对象

let data = {
  'Alice': 25,
  'Bob': 30,
  'Charlie': 35,
  'David': 40
};

console.log(data['Alice']); // 25
1
2
3
4
5
6
7
8

二、使用数组

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

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

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三、使用Set

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

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

四、使用Map

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

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

console.log(data.get('Alice')); // 25
1
2
3
4
5
6
7
8

本地缓存工具

var myLocalStorageTool = {
    set:function(key, value){
        localStorage.setItem(key, value)
    },
    get:function(key){
        return localStorage.getItem(key)
    },
    remove:function(key){
        localStorage.removeItem(key)
    },
    removeAll:function(){
        localStorage.clear()
    },
    toJsonString:function(jsData){
        return JSON.stringify(jsData)
    },
    toJsData:function(jsonString){
        return JSON.parse(jsonString)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

参考

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
9. Window.localStorage - Web API 接口参考 | MDN