[英]Getting "Uncaught ReferenceError: i is not defined" error whenever I want to use an exported element from another file
I'm developing a chrome extension using webpack and babel.我正在使用 webpack 和 babel 开发一个 chrome 扩展。
I have this popup.js:我有这个 popup.js:
import 'regenerator-runtime/runtime' // This is required in every JS files that has an async-await function!!
const { NEW_MAPPING_BUTTON } = require('./constants/mapping-page-elements')
const gen_traffic = document.querySelector('.gen-traffic')
gen_traffic.addEventListener('click', async (e) => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: getPageData,
});
})
const getPageData = () => {
console.log('okk?')
console.log( NEW_MAPPING_BUTTON )
}
mapping-page-elements.js:映射页面elements.js:
exports.NEW_MAPPING_BUTTON = () => {
return document.querySelector("app-mappings")
}
webpack.common.js: webpack.common.js:
const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = {
entry: ["regenerator-runtime/runtime.js", "./src/popup.js"],
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
noParse: /(mapbox-gl)\.js$/
},
resolve: {
extensions: ["*", ".js"],
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
},
devServer: {
static: path.resolve(__dirname, "./dist"),
},
plugins: [new ESLintPlugin()],
};
For some reason, whenever I use the "NEW_MAPPING_BUTTON" in the popup.js file, it gives me "i is not defined" error.出于某种原因,每当我在 popup.js 文件中使用“NEW_MAPPING_BUTTON”时,都会出现“我未定义”错误。 I tested the same element that i exported locally in popup.js and it was returning the element just fine, so I believe this is a problem with webpack's exporting system.
我测试了我在 popup.js 中本地导出的相同元素,它返回的元素很好,所以我相信这是 webpack 导出系统的问题。 Thanks in advance.
提前致谢。
Since the function is executed in the context of the page, its original context is lost as explained the Chrome extension docs :由于 function 是在页面上下文中执行的,因此其原始上下文已丢失,如Chrome 扩展文档所述:
This function will be executed in the context of injection target.
这个 function 将在注入目标的上下文中执行。 However, this will not carry over any of the current execution context of the function. As such, bound parameters (including the this object) and externally-referenced variables will result in errors.
但是,这不会继承 function 的任何当前执行上下文。因此,绑定参数(包括 this 对象)和外部引用的变量将导致错误。
For a start, referencing variables from outside the definition of the function will fail, including imports.首先,从 function 的定义之外引用变量将失败,包括导入。
As Webpack (and or Babel/Typescript) bundle and transpile your file, some language features are replaced by polyfills.当 Webpack(和/或 Babel/Typescript)捆绑和转译你的文件时,一些语言特性被 polyfills 取代。 In my case an
error instanceof Error
check was transpiled to _instanceof(error,Error)
or something along those lines, where _instanceof
is a custom function defined in the file.在我的例子中,
error instanceof Error
检查被转换为_instanceof(error,Error)
或类似的东西,其中_instanceof
是文件中定义的自定义 function。 Consequently, this custom functions will not be available when the function is eventually executed.因此,当最终执行 function 时,此自定义函数将不可用。 This exacerbates the problem described above.
这加剧了上述问题。
Create a new file instead with the contents of the function, with a matching webpack entrypoint/bundle.使用 function 的内容创建一个新文件,并使用匹配的 webpack 入口点/包。 You can then use the
files
argument of chrome.scripting.executeScript
:然后,您可以使用
chrome.scripting.executeScript
的files
参数:
const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
const tabId = tabs[0].id
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: ['getPageData.js'],
}
Pros:优点:
Cons:缺点:
You can inject a script in other ways besides chrome.scripting
as explained here .除了
chrome.scripting
之外,您还可以按照此处所述以其他方式注入脚本。 The answer also has some links elaborating how you can set up two-way communication with the injected script.答案还有一些链接详细说明了如何与注入的脚本建立双向通信。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.