We are developing a Chrome extension for a website with webpages divided into left and right sections. The left side contains a list of 10 elements, and the right side displays details of the element selected on the left.
Upon page load, the user needs to click one element on the left, which triggers a GraphQL query, providing a response containing details of all 10 elements on the left side. But only the details of the element selected by user are displayed on left and in the html page.
The challenge we are facing is accessing the response of this GraphQL query. Unfortunately, the response is not available in the HTML, and we cannot access it using chrome.devtools.network.onRequestFinished.addListener.
Could you please guide us on how to access the data for this request in Chrome, Firefox, or Safari for our extension?
chrome.devtools.network.onRequestFinished.addListener gives me an error that network is not accessible. I have added permission for devtools in manifest
"permissions": [
"activeTab",
"tabs",
"devtools"
],
My code in content.js
chrome.devtools.network.onRequestFinished.addListener(request => {
request.getContent((body) => {
if (request.request && request.request.url) {
if (request.request.url.includes('abc')) {
//continue with custom code
var bodyObj = JSON.parse(body);//etc.
console.log("hahah");
console.log(bodyObj);
}
}
});
});
I am expecting a output of this graphql response in console along after "hahah". But currently I am getting -
Uncaught TypeError: Cannot read properties of undefined (reading 'network')