Chrome扩展程序开发随记

巨輪

已于 2023-12-16 02:40:29 修改

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： chrome 前端 javascript

于 2023-09-23 09:13:34 首次发布

本文链接：https://blog.csdn.net/u011863024/article/details/133197219

版权

本文介绍了如何开发Chrome扩展程序，实现向网页植入自定义JS脚本，包括发送GET、POST消息，文本复制到剪贴板以及数据导出。讲解了Fetch API在发送请求中的优势，并探讨了在JavaScript中快速查找数据的方法，如使用对象、数组、Set和Map。此外，还提到了本地缓存工具的使用。

摘要由CSDN通过智能技术生成

在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"字段：

代码中"matches"指将自定义JS脚本植入目标网页URL。*为通配符，代表0个或n个字符。
"js"指在项目文件夹的自定义植入目标网页URL的JS脚本文件。标明后它们之间的对象、函数可互相引用。
“run_at"指JS脚本文件执行时刻，缺省值为"document_idle”，表示页面空闲时。可选值还有"document_start"和"document_end"，顾名思义。

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

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

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

开发注意事项：

植入自定义JS脚本可操控页面的DOM，但不能直接控制页面JS（变量、方法）。虽然不能直接，但可间接，方法就是向页面插入script元素，具体操作请查看参考[2]。
开发过程中，修改自定义JS脚本内容并不能实时反映到浏览器中，需要按Ctrl+R或在“扩展程序”管理界面在点击“Reload”。
在后台调试自定义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：