Chrome extension: block page elements before access

Question

I am trying to make block elements on a web page, but I want to do this before they are loaded. So for example, I could use

chrome.webRequest.onBeforeRequest.addListener(...);

And redirect / cancel the request. But I want to check the actual content of the request. What I'm doing right now is running XMLHttpRequest to load the url / object myself, checking the contents and blocking it if necessary. However, the main problem is that in reality not many objects are locked. This means that each object is loaded twice: once for "my verification" and once, after I said "well, you can load it."

How can I intercept the boot process so that I can check it on the fly and transfer data bytes, if allowed?

I hope you understand my question, thanks :-)

An example of how I am doing this right now:

 function shall_be_blocked(info){ var xhr = new XMLHttpRequest(); xhr.open("GET", file, false); //... #load the file and inspect the bytes if (xhr.responseText=="block it") { return true; } return false; } chrome.webRequest.onBeforeRequest.addListener( function(info) { ret = shall_be_blocked(info); if (ret ...){return {cancel:true};}//loads the file once, as it is getting blocked return {};//loads the file twice }, {},["blocking"] ); 

Answer 1

I was able to achieve what I was trying to do. The solution does not necessarily need extensions, but it can be useful to install a proxy server. Subsequently, the solution (for the above task) is as follows:

• Use the chrome extension to use the proxy server, in this case localhost
• Configuring a proxy server, for example. using python to route all traffic (and possibly to install certificates, so HTTP traffic can also be analyzed)
• => Man-in-the-middle is installed, analyzes traffic and modifies if necessary

Yes, this is actually not a solution to the problem of creating a chrome extension, but it is not yet possible (see https://bugs.chromium.org/p/chromium/issues/detail?id=104058 ).

Regards, mutilis

Answer 2

You can use ServiceWorker to read the original Response before returning the contents of the original Response or new content.

 if ("serviceWorker" in navigator) { navigator.serviceWorker.register("sw.js").then(function(reg) { console.log("register", reg); }).catch(function(err) { console.log("err", err); }); } 

 self.addEventListener("fetch", function(event) { if (event.request.url == "/path/to/fetched/resource/") { console.log("fetch", event); event.respondWith( fetch(event.request).then(function(response) { return response.text() .then(function(text) { if (text === "abc123") { return new Response("def456") } else { return new Response(text) } }) }) ); } }); 

plnkr https://plnkr.co/edit/MXGSZN1i3quvZhkI7fqe?p=preview

See What happens when you read the answer?

Answer 3

I believe that you can use arraybuffers to read content in real time.

Here is an example of loading a file / page into a buffer;

 var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if (arrayBuffer) { var byteArray = new Uint8Array(arrayBuffer); for (var i = 0; i < byteArray.byteLength; i++) { // do something with each byte in the array } } }; oReq.send(null); 

This is the code snippet found on the XMLHttpRequest documentation page. Link