谷歌扩展拦截推特提交失败，如何实现含黑名单词的推文发布拦截？

看起来你遇到的问题是Twitter的动态UI和非传统表单提交逻辑导致的，我来帮你分析原因并给出可行的解决方案：

为什么你的现有代码无效？ #

1. 按钮点击阻止失效 #

你绑定button.tweet-action的点击事件虽然能触发日志，但阻止不了推文发布，大概率是因为：

• Twitter使用React这类框架的合成事件系统，事件处理逻辑在捕获阶段就已经执行了，你的e.preventDefault()和stopPropagation()在冒泡阶段调用，已经无法覆盖框架的默认处理。
• 或者按钮的实际触发逻辑是绑定在父元素上的事件委托，你的事件阻止没有触碰到根源。

2. 表单submit事件无响应 #

你能修改.tweet-form的样式但监听不到submit事件，核心原因是Twitter根本不用传统的表单提交流程。点击发推按钮后，页面是通过JS收集文本内容，直接发送AJAX请求到API，不会触发表单的submit事件。

可行的解决方案 #

方案1：用事件委托+捕获阶段绑定（针对按钮点击） #

改用事件委托绑定到document上（确保动态生成的按钮也能被监听），同时在捕获阶段阻止事件，这样能优先于框架的事件处理：

// 先确认当前Twitter发推按钮的选择器，建议用开发者工具检查
// 比如当前常用的选择器是[data-testid="tweetButton"]
$(document).on('click', 'button[data-testid="tweetButton"]', function(e) {
    // 获取推文内容，同样要确认文本框的选择器
    const tweetContent = $('div[data-testid="tweetTextarea_0"]').text().trim();
    
    // 检查黑名单词汇
    const blacklist = ['黑名单词1', '黑名单词2'];
    const hasForbiddenWord = blacklist.some(word => tweetContent.includes(word));

    if (hasForbiddenWord) {
        // 在捕获阶段阻止事件传递
        e.stopImmediatePropagation();
        e.preventDefault();
        alert('你的推文中包含禁止词汇，无法发布！');
        return false;
    }
}, true); // 第三个参数true表示在捕获阶段触发事件

注意：Twitter的UI元素data-testid或class可能会更新，建议每次测试前用Chrome开发者工具重新确认元素选择器。

方案2：拦截API请求（更可靠，覆盖所有发推方式） #

如果用户用快捷键（比如Ctrl+Enter）发推，按钮点击拦截会失效，这时候拦截API请求是更彻底的方案：

步骤1：更新manifest.json（以Manifest V3为例）

添加必要的权限和后台脚本配置：

{
    "manifest_version": 3,
    "name": "Tweet Blocker",
    "version": "1.0",
    "permissions": ["webRequest", "webRequestBlocking"],
    "host_permissions": ["https://api.twitter.com/*"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["https://twitter.com/*"],
            "js": ["jquery.min.js", "content.js"]
        }
    ]
}

步骤2：在background.js中拦截请求

监听Twitter的发推API，检查请求内容中的黑名单词汇：

chrome.webRequest.onBeforeRequest.addListener(
    (details) => {
        // 匹配Twitter发推的API接口（需要抓包确认最新接口）
        if (details.url.includes('/1.1/statuses/update.json') || details.url.includes('/2/tweets')) {
            const requestBody = details.requestBody;
            if (requestBody?.formData) {
                // 获取推文文本（不同API的字段名可能不同，这里以status/text为例）
                const tweetText = requestBody.formData.status?.[0] || requestBody.formData.text?.[0];
                const blacklist = ['黑名单词1', '黑名单词2'];
                
                if (tweetText && blacklist.some(word => tweetText.includes(word))) {
                    // 取消请求，阻止推文发布
                    return { cancel: true };
                }
            }
        }
    },
    { urls: ["https://api.twitter.com/*"] },
    ["blocking", "requestBody"]
);

这个方案能覆盖所有发推途径，包括按钮点击、快捷键、甚至第三方工具触发的请求，可靠性更高。

内容的提问来源于stack exchange，提问作者Christian