0

I have this content script which I have labeled as content.mjs, into which I have imported some assets.

Right now the code looks like this

import CompareIcon from '@mui/icons-material/Compare';
import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';

const symbolArray = [ FormatQuoteIcon, CompareIcon, AttachMoneyIcon ];

export function insert (symbolArray) {

    let symbolBar = document.createElement("div"); // create a div to be inserted between the doodle and the search bar
    symbolBar.classname = 'symbolBar'; //the class name is assigned to the div

    symbolBar.innerHTML='${symbolBar}';//the contents of the symbolBar array are inserted into div
 
    const searchBar = document.getElementById("body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf")

    searchBar.before(symbolBar);

 }

in the manifest.json I have put

"content_scripts": [
    {
      "matches": ["http://*.google.com/*", "https://*.google.com/*"],
      "js": [{"file": "scripts/content.mjs", "type": "module"}]
    }
  ]

When I go to load the unpacked extension in chrome://extensions, I get the following error: Error at key 'content_scripts'. Parsing array failed at index 0: Error at key 'js': Parsing array failed at index 0: expected string, got dictionary.

I am trying to make the machine recognize the script as a module, so I can import assets into the script. I have tried multiple ways but am unsure how to get it to work.

To reproduce these errors, clone my repository here: https://github.com/SMSonGitHub/GSUA

-tried using the '.mjs' file extension instead of 'js'. -tried declaring the content script to be of the type module in the manifest by the way mentioned in the problem description. -tried declaring the type as module separately like so:

"content_scripts": [
    {
      "matches": ["http://*.google.com/*", "https://*.google.com/*"],
      "js": ["scripts/content.mjs"],
      "type": "module" 
    }
  ]

-tried declaring "type": "module" in package.json

All separately, to no avail.

I get the following error in chrome://extensions

Uncaught SyntaxError: Cannot use import statement outside a module

SMS
  • 1
  • 1
  • `"type": "module" in package.json` - does nothing, that's for node.js, which has nothing to do with the final extension – Jaromanda X Aug 18 '23 at 05:48
  • use the most upvoted answer in [this](https://stackoverflow.com/questions/48104433/how-to-import-es6-modules-in-content-script-for-chrome-extension) not the accepted "unsafe" answer - actually, read all the answers, there's some useful information in there – Jaromanda X Aug 18 '23 at 05:51
  • You need to build your script using webpack or a similar bundler into a normal JS script (it'll include all imported code in one bundle) because browser JS can only import from a ES module script, but you have an npm package (these two things are very different). There's also no way to specify a module inside `content_scripts`. – wOxxOm Aug 18 '23 at 08:00

0 Answers0