'importScripts while error thrown from one of the script

In my chrome extension (manifest V3) I want to import some scripts like jquery and more.

Inside my backgound.js I have:

try {
    importScripts('/js/jquery-3.4.1.min.js', '/js/common.js');
} catch (e) {
    console.error('importScripts: ' + e);
}
...
calling to getCookie...

inside common.js I have function like:

async function getCookie(key) {   
    return ...;
}

but when I load the extension I get the error:

background.js:22 importScripts: TypeError: Cannot read property 'createElement' of undefined

This error comes from the Jquery library

and after I get another error:

Uncaught (in promise) ReferenceError: getCookie is not defined

because the error in jquery it doesn't load the common script? how can I fix that?

Is there a more stable solution to import the scripts? so that error in one script will not cause a fail to other scripts?

google-chrome-extension import

Solution 1:^[1]

You can package your extension application with the version of jquery you would like to use . then you add it as part of your service workers. This is how my manifest.json looks like

    {
    "name": "Foo Bar",
  "description": "NA",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "storage"
],
"action": {
    
    "default_popup": "popup.html"
},
"background": { "service_workers": ["bg-loader.js","/js/jquery-3.6.0.min.js" ]}

}

I have a bg-loader.js which i use to import my js logic script where i have my jquery functions

try {
    importScripts('/js/index.js' /*, and so on */);
} catch (e) {
    console.error(e);
}

Then in my index.html i add my jquery script to my popup.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
 


</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>

<script type="text/javascript" src="js/index.js"></script>


</html>

Solution 2:^[2]

Posting the working solution for me: import the scripts from npm into background service worker:

In my manifest.json adding "type": "module" to my background script:

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

Inside my background.js simply importing desired module script:

import Dexie from "/node_modules/dexie/dist/modern/dexie.min.mjs"

REMAKRS:

Please notice that from Manifest Version 3 in order to invoke script into web-page from your background service workers you need to use chrome.scripting.executeScript. Example:

//background.js
let [tab] = await chrome.tabs.query({active: true, currentWindow: true})

      //invoke function
      await chrome.scripting.executeScript({
        target: {tabId: tab.id},
        function: colorSelectedText,
        args: [tab.title]
      })
  });
//OR
      //invoke file
      await chrome.scripting.executeScript({
        target: {tabId: tab.id},
        files: ['your_script.js']
      })
  });

Desirable scripts must be in same parent folder as your manifest.json (wasn't working when I was trying to use two dots ../path)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman
Solution 2

'importScripts while error thrown from one of the script

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]