Chrome扩展页面URL变更时如何重新注入内容脚本？

你的Chrome扩展在Etsy这类单页应用（SPA）点击新链接时无法注入内容脚本，核心问题在于现有代码的配置错误+SPA导航事件监听逻辑失效，具体问题和修正方案如下：

一、现有代码的核心错误 #

1. manifest.json配置错误 #

• 把background.js放到了content_scripts数组中：后台脚本有独立的运行环境，不能作为内容脚本注入页面，这会导致脚本重复加载且运行异常。
• content_scripts的matches用<all_urls>范围过大且没必要，应该只针对目标网站（Etsy）。
• web_accessible_resources中包含background.js完全多余，后台脚本不需要被页面访问。

2. background.js逻辑错误 #

• tab.url.indexOf("https://www.etsy.com/*")中的*是普通字符串，不是通配符，永远匹配不到有效URL，导致条件不成立。
• 依赖chrome.tabs.onUpdated事件：SPA通过history.pushState更新URL时不会触发页面刷新，tabs.onUpdated事件可能不会触发（或changeInfo的状态不符合预期），无法捕获导航行为。
• 使用已废弃的chrome.tabs.executeScript：Manifest V3中该API已被移至chrome.scripting.executeScript。

二、修正后的完整代码 #

1. 修正manifest.json #

{
    "manifest_version": 3,
    "name": "Test",
    "description": "Test.",
    "version": "1.0",
    "permissions": ["activeTab", "scripting", "tabs", "webNavigation"],
    "content_scripts": [{
        "matches": ["https://www.etsy.com/*"],
        "js": ["etsy-replies.js"],
        "css": ["stylesheet.css"]
    }],
    "background": {
        "service_worker": "background.js"
    },
    "web_accessible_resources": [
        {
            "resources": ["etsy-replies.js", "popup.html", "stylesheet.css"],
            "matches": ["https://www.etsy.com/*"]
        }
    ]
}

2. 修正background.js #

// 监听SPA的History状态变化（处理Etsy无刷新导航）
chrome.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
    if (details.url.startsWith("https://www.etsy.com/")) {
        try {
            await chrome.scripting.executeScript({
                target: { tabId: details.tabId },
                files: ["etsy-replies.js"]
            });
        } catch (err) {
            console.error("内容脚本注入失败:", err);
        }
    }
}, { url: [{ hostSuffix: "etsy.com" }] });

// 监听页面完整加载（处理手动刷新或首次打开页面的情况）
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
    if (tab.url?.startsWith("https://www.etsy.com/") && changeInfo.status === "complete") {
        try {
            await chrome.scripting.executeScript({
                target: { tabId },
                files: ["etsy-replies.js"]
            });
        } catch (err) {
            console.error("内容脚本注入失败:", err);
        }
    }
});

三、关键修正点说明 #

• 针对SPA导航的监听：用chrome.webNavigation.onHistoryStateUpdated捕获SPA的无刷新导航事件，这是Etsy这类网站切换页面的核心方式。
• 正确的脚本注入API：使用Manifest V3要求的chrome.scripting.executeScript替代旧API，确保兼容性。
• 精准的URL匹配：用startsWith或hostSuffix限制监听范围，避免不必要的性能损耗。
• 分离后台与内容脚本：移除manifest中错误的脚本引用，确保两类脚本运行在各自的环境中。

四、关于你添加的reloadUrl代码 #

强制页面刷新的方案会破坏SPA的流畅体验，不建议使用。上述修正方案可以在不刷新页面的前提下，自动在每次导航时注入内容脚本，完全解决你的问题。

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