在chrome扩展mv 3后台脚本中导入es6模块

qvtsj1bj  于 2022-12-06  发布在  Go
关注(0)|答案(2)|浏览(215)

我是构建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文件中。
你们知道为什么会这样吗
期待你们的回答
非常感谢你。

pw136qt2

pw136qt21#

您已经尝试插入到清单中,“键入:模块”?

"background": {
  "service_worker": "./public/js/background.js",
  "type": "module"
},
tkclm6bt

tkclm6bt2#

你能试试"module": "amd"吗?
不久前我也遇到过类似的问题,我想这就是解决办法:因为“amd”删除了所有的“出口”,如果我没记错的话。让我知道,如果这没有帮助,我会更深入地看看这个项目。
另一个选择是运行剥离器并删除导出,但这听起来不必要。

相关问题