I add a listener to modify HTTP Headers like below in my chrome extension:
chrome.webRequest.onBeforeSendHeaders.addListener(my_listener, {urls: ["<all_urls>"]}, ["blocking", "requestHeaders"]);
Normally, it will capture every HTTP request sent by the web pages, but it doesn't work when another chrome extension send a request with XMLHTTPRequest.
What the other extension does:
var xhr = new XMLHttpRequest;
xhr.open('GET', 'http://example.com/');
xhr.send()
Related
I want to open a browser popup for client site on rest api request to nodejs backend.
I had tried
res.setHeader('Content-Type', 'text/html');
res.render('index', { title: 'Hey', message: 'Hello' });
But it still returning html codes as data to the client.
I also used window.open but window is not defined in server side
Is there anyway to make my backend redirect or render html form on api request!
the following image is how the client get response
If you want the browser change page/view, you need something like location.href = /yourview.html
If you want fill your popup with html built on the server, you need to get it using fetch or XMLHttpRequest or something built on top of them (for example axios, like you did) and then attach to the dom.
Once you got it, you can show the popup. But you are on the client side.
res.render return rendered html. http://expressjs.com/en/api.html#app.render
Is there a browser-based API(s) can load/read the DOM of a web page without opening it in a tab?
Giving the fact that Chrome extensions can make cross-origin XMLHttpRequest, can I make use of this for reading the DOM of other web pages without opening them in tabs?
This works in firefox.. haven't tried in chrome:
let xhr = new XMLHttpRequest();
xhr.onload = () => {
let doc = xhr.responseXML;
//todo...
}
xhr.onerror = () => console.error('error');
xhr.open("GET", url);
xhr.responseType = "document";
xhr.send();
This gives you a document, which can be used like a normal javascript document.
Edit:
Keep in mind, that some webpages create or modify the dom using javascript. The above code will only give you the dom from the raw HTML as if no javascript was run on it!
The background page of a webextension is a webpage, which can contain iframes. So you should be able to load the page in question into that frame and instrument it with a content script without opening a tab.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://httpbin.org', true);
xhr.send();
When running this simple code above from example.org, request headers in Chrome devtools shows this:
Host:httpbin.org
Origin:http://example.org
Referer:http://example.org
When running the same code in Brave, I get this:
Host:httpbin.org
Origin:https://example.org
Referer:https://httpbin.org
I feel that that the referrer being the same that that the host is a bug, but maybe I'm missing something. Should I report this?
This behavior is intended.
We spoof cross-origin referer when '3rd party cookie block' is on.
Source
I'm trying to send a HTTP request from a Extension in which I need to change the User-Agent.
My code looks like this:
function getXMLHttpRequest(method, url, extraHeaders) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true)
for (var headerKey in extraHeaders) {
xhr.setRequestHeader(headerKey, extraHeaders[headerKey]);
}
return xhr;
}
//....
getXMLHttpRequest("POST", "....", { "User-Agent": "Blahblahblah" })
Then, I get an error "Refused to set unsafe header: UserAgent"
I need to change that because my Backend needs to have an special User-Agent, is it possible to do that from an extension?
I tried webRequest API, to change the header before sending the request, but it says it does not work with XMLHttpRequest made from extensions in order to prevent locking.
You can easily change the User-Agent header with the webRequest API.
For sample code, see Associate a custom user agent to a specific Google Chrome page/tab.
Take the code from that answer, and change "main_frame", "sub_frame" to "xmlhttprequest" to modify network requests initiated via XMLHttpRequest.
Obviously, to prevent deadlocks, this method does not work with synchronous requests ( i.e. when the third parameter of xhr.open is set to false).
I'm developing a chrome extension to verify page content of current tab from devtools when request finishes. I'm only interested in following types of requests: main_frame, sub_frame, and xmlhttprequest.
It can be done like this:
listen for chrome.webRequest.onCompleted event in background.js and filter out non-interested requests
communicate with contentScript.js to get the page content
send page content as a message to devtools
But will such situation happen?
In background.js, request A completes and send a message M_A to contentScript.js to get page content.
Request B completes and page content changed.
In contentScript.js, M_A is received, then ...
So I want to find a better way, like put all the logic in devtools:
var requestFinishedHandler = function(request) {
// do something here ...
}
chrome.devtools.network.onRequestFinished.addListener(requestFinishedHandler);
Any advice?
There is a chrome.devtools.inspectedWindow.onResourceAdded. I use it in DevTools Autosave. It doesn’t specify request type such as main_frame, sub_frame, and xmlhttprequest.