Intercept response, modify its JSON, resume

Question

I am creating a chrome extension for my website for people to be able to get partial data and complete it with their browser extension (very good for privacy), no need to implement the logic in the backend (having access to their data). I want it to work like this (with example):

1. User requests Animal (that particular user likes cats, but I don't know that due to privacy, all I know is that I will send an animal). Think of it as purely the string "Animal" in a JSON that would look like "userWants: 'Animal'"

2. Browser receives Animal and knows the Animal this user likes is a Cat. Changes the "userWants" property's content from "Animal" to "Cat".

3. Displays "Cat" in the browser instead of the default "Animal".

I have tried the following (as the main JS file for my extension) PLEASE IGNORE IT AS IT IS NONSENSE:

console.log("Im here!");
function modifyJSON(json) {
// Modify the JSON object here as needed
// Example: json.title = "Modified Title";
json.userWants = "Cat";
return json;
}

const originalFetch = window.fetch;
window.fetch = async function (...args) {
const response = await originalFetch.apply(this, args);

    if (response.url.endsWith("/fetch-json")) {
        const clonedResponse = response.clone();
        const json = await response.json();
        const modifiedJSON = modifyJSON(json);
    
        return new Response(JSON.stringify(modifiedJSON), {
            status: clonedResponse.status,
            statusText: clonedResponse.statusText,
            headers: clonedResponse.headers,
        });
    } else {
        return response;
    }

};

What I would like to know (my question):

I am looking for information on the technologies/APIs/approaches for me to intercept JSON payloads and modify their content before their data reaches DOM objects (HTML elements). Then again, displaying "Cat", instead of "Animal".

Thank you, Temp.