北京网站建设咨询公司,如何加强校园网站建设,p2p网站开发用什么平台,虚拟主机怎么弄网站在Chrome浏览器向正被浏览的外网网页植入自定义JS脚本
为了实现如标题的目的#xff0c;需要开发一个Chrome扩展程序。接下来内容是实现简要步骤#xff1a;
一、新建文件夹#xff0c;命名为项目名#xff0c;如“MyPlugin”。
二、进入文件夹内#xff0c;新建名为“…在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脚本内容并不能实时反映到浏览器中需要按CtrlR或在“扩展程序”管理界面在点击“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
fetch(url, {headers: {Accept: application/json}
}).then(response response.text()).then(text console.log(text))Fetch API是一个内置于大多数web浏览器中的现代接口它为生成HTTP请求提供了强大而灵活的方法。与XMLHttpRequestXHR不同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 posttemp.style.display nonefor (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参考
ReqBin is an online API testing tool for REST and SOAP APIs【干货】Chrome插件(扩展)开发全攻略JS复制到剪贴板的实现方法_笔记大全_设计学院详解Javascript中document.execCommand()的用法js怎么样查找比较快-阿楠教学网Making a GET request with JavaScriptFetch API - Web API 接口参考 | MDNSending POST Request in JavaScript
