拦截响应，修改其JSON，恢复

Question

我正在为我的网站创建一个 chrome 扩展，以便人们能够获取部分数据并使用他们的浏览器扩展完成它（非常有利于隐私），无需在后端实现逻辑（可以访问他们的数据）。我希望它像这样工作（例如）：

1. 用户请求动物（那个特定的用户喜欢猫，但由于隐私我不知道，我只知道我会发送一只动物）。将其视为 JSON 中的纯字符串“Animal”，看起来像“userWants: 'Animal'”

2. 浏览器接收到 Animal 并知道这个用户喜欢的动物是猫。将“userWants”属性的内容从“Animal”更改为“Cat”。

3. 在浏览器中显示“猫”而不是默认的“动物”。

我已经尝试了以下（作为我的扩展的主要 JS 文件）请忽略它，因为它是无意义的：

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;
    }

};

我想知道的（我的问题）：

我正在寻找有关技术/API/方法的信息，以便在数据到达 DOM 对象（HTML 元素）之前拦截 JSON 有效负载并修改其内容。再一次，显示“猫”，而不是“动物”。

谢谢你，温度