Chrome扩展点击按钮打开新标签时仅执行指定脚本的实现咨询

1. 修改manifest.json #

首先删除原有配置中的content_scripts字段，避免myScript.js自动注入所有匹配域名的页面。同时Manifest V2版本的后台配置不支持service_worker，同步修正background配置：

{
    "manifest_version": 2,
    "name": "extension",  
    "description": "extension",  
    "version": "1.0",    
    "browser_action": { 
        "default_popup": "popup.html"  
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["tabs", "<all_urls>", "http://*/", "https://*/"]
}

如果后续升级到Manifest V3，只需要把background改回service_worker配置、把browser_action改为action、executeScript调用调整为chrome.scripting.executeScript即可，核心逻辑不变。

2. 调整popup.js逻辑 #

不需要额外的openTab.js文件，直接在按钮点击回调中完成「创建新标签→监听页面加载完成→注入指定脚本」的全流程：

document.getElementById('myButton').addEventListener('click', () => {
    // 替换为你要打开的目标站点地址
    const targetUrl = "https://xxx.somewebsite.com/xxx";
    // 创建新标签
    chrome.tabs.create({ url: targetUrl }, (newTab) => {
        // 监听新标签的页面加载状态
        function updateListener(tabId, changeInfo, tab) {
            // 仅触发当前新标签、且页面加载完成时执行注入
            if (tabId === newTab.id && changeInfo.status === 'complete') {
                // 注入myScript.js到新标签
                chrome.tabs.executeScript(tabId, { file: "myScript.js" });
                // 移除监听器，避免重复触发
                chrome.tabs.onUpdated.removeListener(updateListener);
            }
        }
        chrome.tabs.onUpdated.addListener(updateListener);
    });
})

实现原理 #

移除manifest中声明的content_scripts后，脚本不会再自动注入所有匹配域名的页面，只有在点击按钮打开新标签、且页面加载完成后，才会主动调用executeScript注入myScript.js，完全符合仅指定场景执行的需求。

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