Login/Register
importScripts while error thrown from one of the script
Asked Answered
google-chrome-extensionimport
M

2

2

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?

Mongeau answered 8/4, 2021 at 8:27 Comment(8)
The problem is that jQuery can't be used in a service worker because jQuery is DOM-based but service workers don't have neither DOM nor related things like XMLHttpRequest. – Vanthe
I'm getting XMLHttpRequest is not defined @wOxxOm – Mongeau
This is exactly what my comment says. – Vanthe
To rephrase, don't use jQuery. – Vanthe
@wOxxOm Then how can I preform an http call within the background script – Mongeau
You can use fetch. – Vanthe
@wOxxOm till now in V2 all my http request was with ajax in background script, so now I should replace all to fetch? that's insane – Mongeau
Yes, half the changes in ManifestV3 are insane but it is what it is. – Vanthe
T
4

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

  1. In my manifest.json adding "type": "module" to my background script:
"background": {"service_worker": "background.js" , "type":"module"}
  1. 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)
Tomy answered 3/5, 2022 at 15:3 Comment(0)
I
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>
Insight answered 10/10, 2021 at 6:50 Comment(1)
I don't know if the code will work, but using manifest V3, changing service_worker to service_workers in manifest.json, causes Chrome to not enable the "Inspect views/service worker" link in the extension details, making it much more difficult to debug the extension. – Abbate

© 2022 - 2024 — McMap. All rights reserved.