0

I've got a constants.js file that contains export statements like: const domains = ['target.com', 'amazon.com', '88rising.com'];

When I import from another file, which looks like this:

const domains = ['target.com', 'amazon.com', '88rising.com'];

document.addEventListener('DOMContentLoaded', () => {
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
      
      const currentUrl = tabs[0].url;
      const truncatedUrlElement = document.getElementById('truncated-url');
      const siteIndexElement = document.getElementById('index-number');

      truncatedUrl = new URL(currentUrl).hostname.replace(/^www\./, '');
      truncatedUrlElement.textContent = truncatedUrl;
      console.log(truncatedUrl)
      
      siteIndex = domains.indexOf(truncatedUrl) + 1;
      siteIndexElement.textContent = siteIndex.toString();
    });
  });

domains actually does properly log to the console, but is not properly logging from inside the document.addEventListener block. I'm having a really tough time understanding why this would be the case, and how to properly reference and import constants from my constants.js file across my entire Chrome extension project.

Tried to import a variable from another file, constants.js and expected the reference to be correctly handled.

It's strangely working at the beginning of the file, but not in the middle where it needs to?

Alex Kim
  • 1
  • 1
  • `DOMContentLoaded` does not wait for modules/scripts to load. It may not seem like that's how it should work, but indeed, you're looking for `load` event in that case rather than the one you're using. Another option to consider is perhaps using promises if that would work for you. Under the hood, modules behave in a manner similar to promises. You could also try `import ( "name" )` function, which returns a promise that fulfills when the module is loaded. – Nolo Mar 20 '23 at 00:31
  • Gotcha, unfortunately I'm not familiar with promises, and I'm not quite sure how to make this work – Alex Kim Mar 20 '23 at 00:40
  • Your code wouldn't need to subscribe to an event, just use `import ( "moduleName" ).then ( function ( moduleObj ) { /* your code, using module as object */ } )`. That will run your code as soon as the module becomes available. See: [Chained Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises) [Module Namespace Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import#module_namespace_object) – Nolo Mar 20 '23 at 00:45
  • The code in the question does not correlate to the question itself, so the problem is unclear. To use modules in a content script see [this answer](/a/53033388). To use modules in a script that runs inside an html page you need to declare the main script as a module as shown in JavaScript tutorials for ES modules. – wOxxOm Mar 20 '23 at 03:06

1 Answers1

0

Alright, so after some working and debugging, it seems that storing constants in a constants.js file is actually not a good idea. Chrome extension projects have a much easier way to store and retrieve constants using a built in method called chrome.storage.sync.

Here's an example of how I can set a constant for use in other files from background.js:

let domains_list = ['target.com', 'amazon.com', '88rising.com']

chrome.storage.sync.set({
  domains: domains_list
});

Then I can retrieve that another file, which for me is index_state.js, with a simple .get:

chrome.storage.sync.get('domains', (result) => {
  domains = result.domains;
});

I found this in the documentation after struggling to use import and export methods to pass constants from one file to another properly. I hope someone can see this answer in the future and save some of the time that I spent struggling with this!

Alex Kim
  • 1
  • 1