Chrome扩展勾选checkbox隐藏内容、取消勾选显示功能失效求解

• 执行上下文隔离问题：你的代码同时在两个完全独立的环境运行，一是注入到社交网站的content script环境，二是扩展内部的settings页面环境。你绑定click事件的.jiji checkbox仅存在于settings页面，社交网站页面里根本没有这个元素，所以content script里的事件绑定代码找不到绑定对象，永远不会触发。而你之前直接写隐藏代码能生效，是因为content script注入到社交站时，页面里确实存在.tn0ko95a信息流元素，直接执行隐藏逻辑当然有效。
• manifest配置错误：Chrome扩展的content_scripts配置项没有html字段，你把settings.html写在这里完全无效。同时你把background.js同时注册给后台脚本、content script、settings页面三个独立环境，逻辑混乱，很容易出现变量冲突、重复执行的问题。
• 缺少状态同步机制：你没有实现settings页面和content script之间的状态传递、持久化逻辑，就算checkbox点击事件在settings里触发了，也没法通知社交网站页面的content script执行隐藏/展示操作。

1. 拆分代码，不要复用同一个background.js：
   • 单独写settings.js专门处理settings页面的逻辑，只在settings.html里引入
   • 单独写content.js专门作为注入到社交站的脚本，在manifest的content_scripts里配置
2. 修正manifest.json配置（新增storage权限、清理无效配置）：

{
    "manifest_version": 2,
    "name": "//",
    "version": "//",
    "description": "//",
    "author": "//",
    "icons": {
        "128": "//"
    },
    "permissions": ["storage"],
    "content_scripts": [{
        "js": ["jquery-3.6.0.min.js", "content.js"],
        "css": ["tiktok.css", "linkedin.css", "youtube.css", "insta.css", "facebook.css", "twitter.css", "reddit.css"],
        "matches": ["https://www.tiktok.com/*", "https://www.linkedin.com/*", "https://www.youtube.com/*", "https://www.instagram.com/*", "https://www.facebook.com/*", "https://twitter.com/*", "https://www.reddit.com/*"]
    }],
    "background":
    {
        "scripts": ["jquery-3.6.0.min.js", "background.js"]
    },
    "browser_action": {
        "default_title": "//",
        "default_popup": "//"
    },
    "web_accessible_resources": ["settings.html"]
}

3. settings.js代码（处理checkbox交互，持久化开关状态）：

$(function () {
    // 页面加载时回显已有配置
    chrome.storage.local.get('fbFeedBlocked', function(res) {
        $(".jiji").prop('checked', res.fbFeedBlocked || false);
    });
    // 点击checkbox同步更新存储的状态
    $(".jiji").change(function () {
        chrome.storage.local.set({fbFeedBlocked: $(this).is(":checked")});
    });
});

4. content.js代码（注入到社交站点，根据状态控制信息流显隐）：

$(function () {
    function toggleFeed() {
        chrome.storage.local.get('fbFeedBlocked', function(res) {
            if (res.fbFeedBlocked) {
                $(".tn0ko95a").hide();
            } else {
                $(".tn0ko95a").show();
            }
        });
    }
    // 页面加载时先执行一次显隐判断
    toggleFeed();
    // 监听存储变化，实时同步显隐状态
    chrome.storage.onChanged.addListener(toggleFeed);
});

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