Chrome扩展修改网页HTML时仅作用于popup.html的问题如何解决

问题根源 #

Chrome扩展的运行环境是上下文隔离的，popup.html 和你正在浏览的网页属于完全独立的DOM环境，你在 popup.js 中直接调用 document 操作的是popup页面本身的元素，不可能触达网页内容。另外你将 popup.js 同时配置为内容脚本注入网页也是错误用法，popup.js 中监听的是popup页面的加载事件，注入到网页后无法正常触发逻辑。

修复步骤 #

1. 调整配置文件 manifest.json

将 popup.js 从内容脚本配置中移除，单独新增一个专门用于操作网页DOM的内容脚本文件（示例命名为 content.js）

{
    "manifest_version": 2,
    "name": "Tester",
    "version": "0.1.0",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "tabs"
     ],
     "content_scripts": [{
       "js": ["content.js"],
       "matches": ["<all_urls>"]
     }]
}

2. 修改popup.js逻辑

popup中只处理按钮点击事件，通过消息通信通知当前激活标签页的内容脚本执行DOM操作

document.addEventListener('DOMContentLoaded', function() {
    const buttonEvent = document.getElementById('thisButton');
    buttonEvent.addEventListener('click', function() {
        // 获取当前窗口激活的标签页
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            // 给对应标签页的内容脚本发送操作指令
            chrome.tabs.sendMessage(tabs[0].id, {action: "modifyElements"});
            // 操作完成可自动关闭popup，可选
            window.close();
        });
    });
}, false);

3. 新增content.js内容脚本

内容脚本运行在网页的上下文环境中，可以直接访问和操作网页DOM，同时监听来自popup的消息

// 监听popup发送的消息
chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === "modifyElements") {
        // 注意getElementsByClassName返回的是元素集合，需要指定下标获取具体元素
        const targetEle = document.getElementsByClassName("className")[0];
        if(targetEle) targetEle.className = "";
        const removeEle = document.getElementsByClassName("otherClass")[0];
        if(removeEle) removeEle.remove();
    }
});

简化方案：无需单独配置内容脚本 #

如果你的操作逻辑非常简单，也可以直接在popup中通过executeScript向当前页面注入执行代码，省略content.js的配置和编写：

// popup.js 点击事件里直接执行以下逻辑
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {
        code: `
            const targetEle = document.getElementsByClassName("className")[0];
            if(targetEle) targetEle.className = "";
            const removeEle = document.getElementsByClassName("otherClass")[0];
            if(removeEle) removeEle.remove();
        `
    });
});

注意事项 #

• 操作DOM前加非空判断可以避免页面没有对应元素时抛出异常
• 你原有代码中的getElementByClassName是拼写错误，正确写法为复数形式getElementsByClassName，返回的是HTMLCollection集合，不能直接修改属性，必须取下标访问具体元素
• 如果后续升级到Manifest V3版本，executeScript需要调整为chrome.scripting.executeScript，同时需要额外申请scripting权限

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