当访问内容脚本中定义的函数时，tabs.executeScript遇到ReferenceError

Question

更新： 看来问题出在Webpack按照其自身的功能执行每个模块这一事实，这意味着在全局范围内不能存在任何模块。是否有任何优雅的方法可以解决此问题，以便我可以在Webpacked内容脚本中定义一个函数并从其他内容脚本访问它？

原始：

在我的主要内容脚本中，我定义了一个函数

function foo() {
    console.log("foo")
}

在我的background.js中，我像这样注入新的内容脚本：

browser.tabs.query({currentWindow: true, active: true}).then(res => {
    browser.tabs.executeScript(res.id, {code: "foo()"})
})

在标签页的控制台中，看到

VM181:1 Uncaught ReferenceError: foo is not defined
at <anonymous>:1:1

两个内容脚本都应该在同一执行环境中，因此我应该能够在两个脚本中共享函数和变量。

我最近添加了Webpack来构建我的Chrome扩展程序，并且我正在使用Webextension-Polyfill将chrome.* API简化为browser。

在我的代码的旧版本中，此方法工作正常，但现在不起作用。我觉得这是因为Webextension-Polyfill所致，但老实说，我无法弄清楚。

编辑：

executeScript代码正在选项卡中运行。我可以console.log，它出现在控制台中。但是，它似乎无法访问我现有内容脚本的名称空间。

编辑2 ：

我添加了另一个内容脚本，

function foo() {
    console.log("foo")
}

并且可以从注入的脚本访问它。所以我想这与Webpack有关。

与Webpack捆绑包的范围界定有关吗？