使用 typescript 在 chrome 擴展 mv 3 后台腳本中導入 es6 模塊

Question

我是構建Chrome 擴展 mv3的新手。 現在我正在使用Typescript作為我的主要語言創建一個擴展。 我嘗試導入Es6 模塊，但是當我加載擴展時，Chrome 顯示“未捕獲的 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                          
  }
}

在我的 background.utils.ts 文件中：

const myFunction = ()=>{}
export default myFunction

在我的 background.ts 文件中：

import myFunction from './background.utils/'

但是 Chromes 說即使我在 Internet 上嘗試了幾種方法，例如在 mainifest.json 文件中添加“type”：“module”或在 tsconfig.json 文件中添加遠程“module”：“commonjs”，也沒有定義導出。

你們知道為什么會這樣嗎？

期待收到大家的回答

太感謝了。

Answer 1

您已經嘗試插入清單，“類型：模塊”？

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

Answer 2

對於 Vite 用戶

有一個很棒的插件叫做crxjs ，你只需要在vite.config.ts中更新它並給你的 manifest.json 提供路徑（它只適用於 mv3）

請按照以下步驟運行您的腳本

1.將crxjs添加到你的項目中

npm install @crxjs/vite-plugin -D

2.創建或更新manifest.json

{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

3.使用清單路徑更新您的 vite.config.ts 文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})

運行你的項目之后，現在 config.js 將被捆綁，你可以在其中導入包