Let's break down exactly what's going wrong and how to fix it step by step:

1. Why Your Current Setup Fails #

The error happens because:

• You placed "type": "module" in the wrong section of your manifest (it doesn't belong under action).
• Chrome needs explicit confirmation that a script should be treated as an ES module (to support import/export syntax).
• Additionally, your import statements reference Node.js modules (requests, json) which aren't supported in browser/extension environments—we'll fix that too.

2. Correct Manifest Configuration #

First, clean up your manifest and add module support where it matters:

Option A: If Your Script Runs in the Popup #

Remove the misplaced "type": "module" from action, then mark your script as a module directly in your popup HTML (auto_select.html):

Updated Manifest:

{ 
  "manifest_version": 3, 
  "name": "Python Chrome Plugin", 
  "description": "This extension runs Python code.", 
  "version": "1.0", 
  "action": { 
    "default_icon": "icon.ico", 
    "default_popup": "auto_select.html" 
  }, 
  "permissions": [ "activeTab" ] 
}

In auto_select.html:
Add type="module" to your script tag when including your JS file:

<script type="module" src="your-script-filename.js"></script>

Option B: If Your Script Runs as a Background Service Worker #

If you want to run module code in the background, add a background section to your manifest with "type": "module":

Updated Manifest:

{ 
  "manifest_version": 3, 
  "name": "Python Chrome Plugin", 
  "description": "This extension runs Python code.", 
  "version": "1.0", 
  "action": { 
    "default_icon": "icon.ico", 
    "default_popup": "auto_select.html" 
  }, 
  "permissions": [ "activeTab" ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  }
}

3. Fix Your JS Script (Replace Node.js Modules) #

Chrome extensions don't support Node.js modules like requests or json. Use browser-native APIs instead:

Corrected JS Script:

// No need to import JSON—use the global JSON object built into browsers
let json_formatted_str, obj, url; 
console.log("Getting page data");

// Replace Node.js requests with browser's native fetch API
fetch(url)
  .then(response => response.json())
  .then(data => {
    obj = data;
    json_formatted_str = JSON.stringify(obj, null, 2);
    console.log(json_formatted_str);
  })
  .catch(error => console.error('Request failed:', error));

4. Test Your Extension #

1. Open Chrome's extensions page (chrome://extensions/).
2. Toggle "Developer mode" on (top-right corner).
3. Click "Load unpacked" and select your extension's folder.
4. Check the popup console (right-click the extension icon → Inspect) or background service worker console (from the extensions page) to confirm no more errors.

Key Reminders #

• Manifest V3 only supports ES modules in popup scripts (via type="module" in script tags) and background service workers (via the background.type field).
• Always use browser-native APIs instead of Node.js modules—extensions run in a browser environment, not Node.js.
• If you need to use external libraries, include them as bundled ES modules (not Node.js packages) in your extension folder.

内容的提问来源于stack exchange，提问作者Wt Riker