Chrome扩展Manifest V3：API请求后当前标签页脚本注入失败

你的核心问题出在**executeScript的func参数使用错误**，以及参数传递方式不对：

• 你写的func: foo(content)是直接在popup页面里执行了foo(content)，把执行结果传给了func，而不是把foo函数本身传递给注入逻辑。这就导致代码直接在popup里跑了，没注入到目标标签页。
• 要给注入的函数传参，不能直接在函数调用时传，得用executeScript的args字段来传递。

修正后的代码如下：

document.getElementById('myBtn').addEventListener('click', async function() {
    // 先请求API获取数据
    const response = await fetch("http://localhost:8888/get-data");
    const content = await response.json();

    chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
        chrome.scripting.executeScript({
            target: { tabId: activeTabs[0].id },
            func: foo, // 这里只传函数引用，不要加括号调用
            args: [content] // 用args传递参数，会作为foo的入参
        }).then(() => {
            // 这里写后续逻辑，注意避免使用finally作为函数名（它是JS内置关键字）
        });
    });
});

// 要注入到目标标签页的foo函数，接收传入的参数
function foo(content) {
    // 这里写你要在目标标签页执行的逻辑，比如操作DOM、处理数据等
    console.log('注入函数已执行，API返回数据：', content);
}

额外注意：

• 确保你的Manifest V3配置文件中，已经声明了scripting权限，以及目标网站的host_permissions（如果需要操作目标页面DOM或资源的话）。
• 避免使用finally作为自定义函数名，它是JavaScript的内置关键字，可能引发语法错误。

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