javascript - Import es6 module in chrome extension mv 3 background script with typescript - Stack Overflow

admin管理员组

文章数量:1296858

I'm new at building a Chrome extension mv3. Now I'm creating an extension using Typescript as my main language. I've tried to import Es6 modules, but when I loaded the extension, Chrome says that "Uncaught ReferenceError: exports is not defined".

Here's my project structure

|   .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

My manifest.json file:

{
  "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/*"
      ],
      "js": [
        "./public/js/popup.js"
      ]
    }
  ]
}

My tsconfig.json file:

{
  "pilerOptions": {
    "target": "es2016",                                  
    "module": "monjs",                                
    "typeRoots": [
      "./node_modules/@types"
    ],                                 
    "sourceMap": true,                            
    "outDir": "./public/js",                      
    "sourceRoot": "./src",                        
    "esModuleInterop": true,                      
    "forceConsistentCasingInFileNames": true,     
    "strict": true,                               
    "skipLibCheck": true                          
  }
}

In my background.utils.ts file:

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

In my background.ts file:

import myFunction from './background.utils/'

But Chromes says that export is not defined even though I've tried serveral methods on Internet like add "type": "module" into the mainifest.json file or remote "module":"monjs" in tsconfig.json file.

Do you guys have any idea why this happens?

Looking forward to receiving you guys' answers

Thank you so much.

I'm new at building a Chrome extension mv3. Now I'm creating an extension using Typescript as my main language. I've tried to import Es6 modules, but when I loaded the extension, Chrome says that "Uncaught ReferenceError: exports is not defined".

Here's my project structure

|   .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

My manifest.json file:

{
  "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./*"
      ],
      "js": [
        "./public/js/popup.js"
      ]
    }
  ]
}

My tsconfig.json file:

{
  "pilerOptions": {
    "target": "es2016",                                  
    "module": "monjs",                                
    "typeRoots": [
      "./node_modules/@types"
    ],                                 
    "sourceMap": true,                            
    "outDir": "./public/js",                      
    "sourceRoot": "./src",                        
    "esModuleInterop": true,                      
    "forceConsistentCasingInFileNames": true,     
    "strict": true,                               
    "skipLibCheck": true                          
  }
}

In my background.utils.ts file:

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

In my background.ts file:

import myFunction from './background.utils/'

But Chromes says that export is not defined even though I've tried serveral methods on Internet like add "type": "module" into the mainifest.json file or remote "module":"monjs" in tsconfig.json file.

Do you guys have any idea why this happens?

Looking forward to receiving you guys' answers

Thank you so much.

• javascript
• typescript
• google-chrome
• google-chrome-extension
• babeljs

Share Improve this question Follow asked Jan 8, 2022 at 4:10 jackieTruong123jackieTruong123 32111 gold badge33 silver badges88 bronze badges 1

• 1 ...and so did you discover a solution? – jflood Commented Oct 18, 2022 at 3:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You already tried to insert into manifest, "type: module"?

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

For future reference, this is what worked for me with v3 of the manifest.

My tsconfig.json:

{
  "pilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "esModuleInterop": false,
    "rootDir": "./src",
    "types": [
      "chrome"
    ],
    "outDir": "./dist",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

My manifest.json:

{
    "manifest_version": 3,
    "name": "A Chrome Extension",
    "version": "1.0",
    "description": "bla bla",
    "action": {
        "default_popup": "dist/popup.html",
        "default_icon": {
            "16": "dist/assets/images/icon16.png",
            "48": "dist/assets/images/icon48.png",
            "128": "dist/assets/images/icon128.png"
        }
    },
    "permissions": [ ... ],
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    },
    "host_permissions": [ ... ]
}

The things that need to be locked down are:

• ES6 for both target and module in tsconfig.json and
• "type": "module" in manifest.json's "background".

Can you try "module": "amd"?

I've faced similar issue a while ago, and I guess that was the solution: as "amd" removed all the "exports", if i remember correctly. Let me know if that does not help, I'll take a deeper look at the project.

Another option was to run a stripper and remove the exports, but that sounds unnecessary.

本文标签： javascriptImport es6 module in chrome extension mv 3 background script with typescriptStack Overflow