在谷歌插件中拦截并修改请求参数

前言

目前正在开发一款批量自动发布小红书笔记的谷歌插件，卡在了如何自动添加话题标签这一步。有两种处理方式：

一种是模拟人工手动输入操作，触发平台查询话题标签列表的后台接口，然后选择列表中的第一个话题标签
另一种则是点击下方的"# 话题"按钮，然后拦截修改查询话题标签列表接口的请求参数，最后也是选择列表中的第一个话题标签

由于本人技术水平有限，第一种方式尝试了很久，总是存在各种问题，故而选择了第二种方式。

事实上，第二种方式先前就已验证过，当时我采用的是Automa(也是一款浏览器自动化扩展插件)+油猴脚本的方式实现。现在要做的，无非是把当时的油猴脚本迁移到插件内而已。

实现请求拦截修改

我并不是谷歌插件开发老手，并未经历过Manifest V2的时代，通过查阅谷歌官方文档和自己的试验得知，原本在V2中能实现一些功能的API，例如修改请求体中的参数，在V3中已不可用。

当然，如果你发现V3仍有办法利用原生AI做到这点，还请不吝告知。

当前我使用的方式是注入请求拦截的脚本，而脚本内容正是上面我提到的油猴脚本内容。

以下是我的注入拦截脚本的代码块，位于content_script.js内。该代码块的逻辑是，在执行自动化发布笔记时，预先设置要查询的话题标签参数，这样在点击"话题"按钮并触发查询请求时，便是直接查询指定的话题标签。

js 复制代码

const topicInterceptScript = document.createElement('script');
// 不能使用内联脚本，只能通过加载外部脚本文件的方式
topicInterceptScript.src = chrome.runtime.getURL(
'topicintercept.js'
);
document.documentElement.appendChild(topicInterceptScript);
try {
    
    // 点击"话题"按钮，触发查询请求

    // 选择查询到的话题标签列表中的第一个
    
} finally {
  // 移除脚本
  topicInterceptScript.remove();
}

为了防止意外出现，我使用try包裹了业务逻辑，并在finanlly中移除该脚本.

另外，topicintercept.js是不允许直接使用的，还需要在manifest.json中开放web访问权限：

json 复制代码

"web_accessible_resources": [
    {
      "resources": [
        "content.styles.css",
        "icon-128.png",
        "icon-34.png", 
        "topicintercept.js"
      ],
      "matches": ["*://*/*"]
    }
]

最后，帖一下topicintercept.js的脚本内容:

js 复制代码

(() => {
    // 监听外部消息并存储新的 keyword 值
    window.addEventListener("message", (event) => {
        if (event.data.type === "replace-keyword") {
            // 保存新的 keyword 值
            window.newKeyword = event.data.keyword;
        }
    });

    // 劫持 fetch 请求
    const originalFetch = window.fetch;
    window.fetch = function(resource, config) {
        if (
            resource ===
                "https://edith.xiaohongshu.com/web_api/sns/v1/search/topic" &&
            config.method === "POST"
        ) {
            // 解析请求体
            const requestBody = JSON.parse(config.body);

            // 修改 keyword 字段
            if (requestBody.keyword && window.newKeyword) {
                requestBody.keyword = window.newKeyword;
            }

            // 更新请求体
            config.body = JSON.stringify(requestBody);
        }

        // 调用原始 fetch 方法
        return originalFetch.apply(this, arguments);
    };

    // 劫持 XMLHttpRequest 请求
    const originalXHR = window.XMLHttpRequest;
    window.XMLHttpRequest = function () {
        const xhr = new originalXHR();

        // 重写 open 方法
        const originalOpen = xhr.open;
        xhr.open = function (method, url) {
            if (
                url ===
                    "https://edith.xiaohongshu.com/web_api/sns/v1/search/topic" &&
                method === "POST"
            ) {
                // 重写 send 方法
                const originalSend = xhr.send;
                xhr.send = function (body) {
                    let requestBody = JSON.parse(body);

                    // 修改 keyword 字段
                    if (window.newKeyword) {
                        requestBody.keyword = window.newKeyword;
                    }

                    // 更新请求体
                    const modifiedBody = JSON.stringify(requestBody);

                    // 发送修改后的请求体
                    originalSend.call(xhr, modifiedBody);
                };
            }

            // 调用原始 open 方法
            originalOpen.apply(xhr, arguments);
        };

        return xhr;
    };
})();