How to import ES6 modules in content script for Chrome Extension

by

As it’s already mentioned, for background script, it’s good idea to use background.page and use <script type="module"> to kick your JavaScript.

The problem is content script, and injecting <script> tag with type attribute can be a solution.

Another approach than injecting script tag is to use dynamic import function. By this approach, you don’t need to loose scope of chrome module and still can use chrome.runtime or other modules.

In content_script.js, it looks like

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

You’ll also need to declare the imported scripts in manifest’s Web Accessible Resources:

{
  "web_accessible_resources": [
    "your/content_main.js"
  ]
}

For more details:

Hope it helps.

More Related Contents:

  1. How can I get the current Crome URL?
  2. Chrome extension that enables chatting with users on same page [closed]
  3. Persistent Service Worker in Chrome Extension
  4. How to use jQuery in chrome extension?
  5. Chrome extension: How to save a file on disk
  6. Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.
  7. Contexts and methods for communication between the browser action, background scripts, and content scripts of chrome extensions?
  8. Executing code at page-level from Background.js and returning the value
  9. Chrome Extension: Make it run every page load
  10. Chrome Extension: Get Page Variables in Content Script
  11. Checkbox Check Event Listener
  12. saving and retrieving from chrome.storage.sync
  13. How do I send an HTTP GET request from a Chrome extension?
  14. Completely lost on how to save extension popup window content
  15. Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?
  16. How to make side panel in chrome extension?
  17. Does extension messaging like chrome.runtime.sendMessage internally use JSON.stringify?
  18. google chrome extension :: console.log() from background page?
  19. Can I prevent an alert() with a Google Chrome Extension
  20. How can I save information locally in my chrome extension?
  21. How to get the currently opened tab’s URL in my page action popup?
  22. Using ‘let’ as a variable name is not throwing any errors in google v8
  23. How to get errors stack trace in Chrome extension content script?
  24. Pass a variable from content script to popup
  25. Prevent window.open from focusing
  26. Associate a custom user agent to a specific Google Chrome page/tab
  27. ECMAScript 6 not working although experimental JS is enabled
  28. How to fix chrome-extension inline JavaScript invocation error?
  29. Cross-domain XMLHttpRequest using background pages
  30. Chrome Extension get selected text

Leave a Comment