Importing external libraries to a Chrome Extension

Question

I'm a little bit stuck building my first Chrome Extension. After working trough the basic concepts, I'm now trying to get an external library running. Furthermore it's a npm library and I'm aware that a Chrome Extension is not running node.js!

So I just learned about module bundlers and that I could try using a minimized .js file to import it in my popup.js.

The module I'm trying to import is the following:

https://www.npmjs.com/package/sbd?activeTab=code

And they already provide a minimized version under the path: /sbd/dist/sbd.min.js

(it might get more complicated trying to import any other npm library that does not support this file already)

So far so good.

Now... I changed my manifest.json:

Imported the library and tried to use a function: +

At this point it looked promising. Visual Studio Code already recognising the imported, available functions. However... when I try to run them I get the following error:

And I don't get why. Am I still missing something about the concept of "How to import external libraries to a Chrome Extension"? The error makes no sense to me.

What might cause the error? Is there an easier way to get this running?

Thanks in advance.

Cheers, Dennis

1) You need to build your code in rollup or webpack or a similar bundler and remove the library from manifest.json or html. 2) If you want to use it without a bundler you can't do it via `import` because that file is not a ES module. Just load it as a separate script. It'll probably create a global variable on `window`. 3) Don't load content scripts in the popup, these are two different unrelated environments. — wOxxOm, Mar 19 '23 at 15:12

score 1 · Answer 1 · answered Mar 19 '23 at 14:28

Content scripts run in the context of a webpage and not your extension. So, adding an external JS file in content_script will not make it available in your popup.

To use an external JS file in a popup, what you can do is, create a popup.html file and import it there along with your popup.js. For example:

popup.html

<html>
  <head>
    <title>Getting Started Extension's Popup</title>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->

    <script src="./lib/sbd-master/dist/sbd.min.js"></script>
    <script src="popup.js"></script>

  </head>
  <body>
  </body>
</html>

With this, you do not need to import the file again in your popup.js file.

Also, you need to keep in mind the order of the files as well while importing them (for the content script, background scripts as well as popup).

The external one should always be loaded first, so it is available to the files using it later on.

I already tried this. My popup.html looks like this: Error is still the same. — DJM, Mar 19 '23 at 14:35
If I delete the `type=module` I can't use the "import" in the popup.js anymore as the import has to be inside of a module. You mentioned that it is not necessary to import the file again. However, if I delete the import the function is still unknown. — DJM, Mar 19 '23 at 14:50

Importing external libraries to a Chrome Extension

1 Answers1