我是构建Chrome扩展mv3的新手。现在我正在使用Typescript作为我的主要语言创建扩展 *。我尝试导入Es6模块**,但当我加载扩展时,Chrome显示“Uncatch ReferenceError:未定义导出"
这是我的项目结构
| .babelrc
| manifest.json
| package.json
| tsconfig.json
| webpack.config.js
|
+---public
| +---html
| | index.html
| | popup.html
| |
| +---js
| | background.d.ts
| | background.js
| | background.js.map
| | background.utils.d.ts
| | background.utils.js
| | background.utils.js.map
| | index.html
| | main.js
| | popup.d.ts
| | popup.js
| | popup.js.map
| |
| \---styles
| popup.css
|
\---src
| background.ts
| background.utils.ts
| popup.ts
|
\---@types
\---background
index.d.ts
我的manifest.json文件:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "./public/js/background.js",
"persitent": true
},
"action": {
"default_popup": "./public/html/popup.html"
},
"minimum_chrome_version": "92",
"permissions": [
"management",
"scripting",
"activeTab",
"webRequest",
"tabs",
"webNavigation",
"storage"
],
"content_scripts": [
{
"matches": [
"*://*.nytimes.com/*"
],
"js": [
"./public/js/popup.js"
]
}
]
}
我的tsconfig.json文件:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"typeRoots": [
"./node_modules/@types"
],
"sourceMap": true,
"outDir": "./public/js",
"sourceRoot": "./src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
在我的背景.utils.ts文件中:
const myFunction = ()=>{}
export default myFunction
在我的背景.ts文件中:
import myFunction from './background.utils/'
但Chromes说,即使我在互联网上尝试了几种方法,如添加“类型”,导出也没有定义:“模块”到mainifest.json文件中或远程“模块”:“commonjs”到tsconfig.json文件中。
你们知道为什么会这样吗
期待你们的回答
非常感谢你。
2条答案
按热度按时间pw136qt21#
您已经尝试插入到清单中,“键入:模块”?
tkclm6bt2#
你能试试
"module": "amd"
吗?不久前我也遇到过类似的问题,我想这就是解决办法:因为“amd”删除了所有的“出口”,如果我没记错的话。让我知道,如果这没有帮助,我会更深入地看看这个项目。
另一个选择是运行剥离器并删除导出,但这听起来不必要。