Need to override the native fetch call which is written in the third-party application.
I want to intercept the fetch call using the chrome extension.
Is it possible? If yes, could you please help me with this.
Here is my sample code.
mainfest.json
{
"manifest_version": 2,
"name": "[CCG]",
"description": "[Replacing CCG]",
"version": "1.0",
"content_scripts": [
{
"matches": [
"file:///C*"
],
"js": [
"content.js"
],
"run_at": "document_start",
"all_frames": true
}
]
}
content.js Test 1
const constantMock = window.fetch;
window.fetch = function() {
console.log(arguments);
return new Promise((resolve, reject) => {
constantMock.apply(this, arguments)
.then((response) => {
if(response.url.indexOf("/me") > -1 && response.type != "cors"){
console.log(response);
// do something for specificconditions
}
resolve(response);
})
.catch((error) => {
reject(response);
})
});
}
HTML
<input type="button" value="Submit" onclick="submit()"> <script> function submit() { fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) { // The API call was successful! return response.json(); }).then(function (data) { // This is the JSON from our response console.log(data); }).catch(function (err) { // There was an error console.warn('Something went wrong.', err); }); } </script> </body>
If we added the override fetch method inside the html page script, which is overdidng. But here i don't have the contol on thirdy party application, So am planning to use chrome extenssion and unable to handle it. Help me on this.