Chrome扩展开发问题：内容脚本执行后未修改DOM

问题原因 #

1. 页面重定向导致脚本执行时机错误：亚马逊会根据用户地区自动重定向到对应区域站点，你的代码在页面第一次触发complete状态时就移除了监听器，此时页面可能正处于重定向过程中，脚本实际执行在即将跳转的原页面，用户看不到任何效果。
2. 多框架执行导致DOM修改无效：allFrames: true会让脚本在页面所有iframe中执行，修改的是iframe的body而非主页面的DOM，因此主页面无变化。
3. 监听器未绑定目标Tab：chrome.tabs.onUpdated默认监听所有Tab的更新事件，存在误触发其他Tab的可能，导致脚本在错误页面执行。

修正后的代码 #

popup.js #

'use strict';

function changeBodyForTesting() {
    alert('changeBodyForTesting');
    document.body.innerHTML = 'Hello!';
}

document.getElementById('postsSearchStart').addEventListener('click', async () => {
    alert('Button Click');
    // 获取当前活动Tab的ID
    const [currentTab] = await chrome.tabs.query({active: true, currentWindow: true});
    if (!currentTab) return;

    // 更新当前Tab到亚马逊
    await chrome.tabs.update(currentTab.id, {url: 'https://www.amazon.com'});

    // 定义Tab更新监听器
    function handleTabUpdate(tabId, changeInfo, tab) {
        // 仅处理目标Tab、页面加载完成且URL为亚马逊站点的情况
        if (tabId === currentTab.id && changeInfo.status === 'complete' && tab.url.includes('amazon.com')) {
            chrome.tabs.onUpdated.removeListener(handleTabUpdate);
            // 仅在主框架执行脚本
            chrome.scripting.executeScript({
                target: {tabId: tabId, frameIds: [0]},
                func: changeBodyForTesting
            }, () => {
                alert('Script executed!');
            });
        }
    }

    chrome.tabs.onUpdated.addListener(handleTabUpdate);
});

关键优化点 #

• 使用async/await简化异步逻辑，避免回调嵌套混乱。
• 通过chrome.tabs.query明确获取当前活动Tab的ID，确保监听器只关注目标页面。
• 增加URL检查，确保脚本在最终加载完成的亚马逊页面执行，规避重定向问题。
• 指定frameIds: [0]让脚本仅在主框架执行，保证DOM修改作用于主页面。

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