Chrome扩展：新标签页加载完成后修改页面标题失败问题

问题根源 #

• 每次调用openNewTabAndConquerGoogle都会新增chrome.tabs.onUpdated监听器，未及时移除导致监听器累积，逻辑混乱。
• 谷歌主页可能存在动态加载场景，原代码的消息发送时机与content script注入时机不匹配。

解决方案一：优化监听器绑定，避免重复触发 #

修改extension.js中的openNewTabAndConquerGoogle函数，添加监听器后触发一次即移除：

const googleUrl = "https://www.google.com/";

function conquerGoogle(tab) {
    chrome.tabs.sendMessage(tab.id, { action: "conquer" });
}

async function openNewTabAndConquerGoogle() {
    const [tab] = await chrome.tabs.create({ url: googleUrl, active: true });

    // 命名监听器函数，方便后续移除
    function handleTabUpdate(tabId, changeInfo) {
        if (tabId === tab.id && changeInfo.status === 'completed') {
            conquerGoogle(tab);
            // 完成后移除监听器，避免重复绑定
            chrome.tabs.onUpdated.removeListener(handleTabUpdate);
        }
    }

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

document.querySelector('button').onclick = async (e) => {
    const [tab] = await chrome.tabs.query({ active: true });

    // 改用startsWith匹配，避免严格相等的路径参数问题
    if (tab.url.startsWith(googleUrl)) {
        conquerGoogle(tab);
    } else {
        openNewTabAndConquerGoogle();
    }
};

同时确保manifest.json中content script的匹配规则正确：

{
    "manifest_version": 3,
    "name": "Google Title Changer",
    "version": "1.0",
    "permissions": ["tabs"],
    "content_scripts": [
        {
            "matches": ["https://www.google.com/*"],
            "js": ["content.js"]
        }
    ],
    "action": {
        "default_popup": "popup.html"
    }
}

解决方案二：直接注入脚本修改标题（无需content.js） #

改用chrome.scripting.executeScript直接在目标标签页执行代码，省去消息传递环节，更可靠：

修改extension.js：

const googleUrl = "https://www.google.com/";

async function conquerGoogle(tab) {
    await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => {
            document.title = "THIS IS MY GOOGLE NOW";
        }
    });
}

async function openNewTabAndConquerGoogle() {
    const [tab] = await chrome.tabs.create({ url: googleUrl, active: true });

    function handleTabUpdate(tabId, changeInfo) {
        if (tabId === tab.id && changeInfo.status === 'completed') {
            conquerGoogle(tab);
            chrome.tabs.onUpdated.removeListener(handleTabUpdate);
        }
    }

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

document.querySelector('button').onclick = async (e) => {
    const [tab] = await chrome.tabs.query({ active: true });

    if (tab.url.startsWith(googleUrl)) {
        conquerGoogle(tab);
    } else {
        openNewTabAndConquerGoogle();
    }
};

对应的manifest.json需要添加scripting权限和主机权限：

{
    "manifest_version": 3,
    "name": "Google Title Changer",
    "version": "1.0",
    "permissions": ["tabs", "scripting"],
    "host_permissions": ["https://www.google.com/*"],
    "action": {
        "default_popup": "popup.html"
    }
}

额外说明 #

• 原代码中用tab.url === googleUrl做判断可能存在问题，因为谷歌主页的URL可能带路径参数（如https://www.google.com/?hl=en），改用startsWith更稳妥。
• 方案二无需content.js文件，减少了文件依赖，逻辑更直接。

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