Using multiple JavaScript files in a Chrome extension

Asked Jan 14 '17 at 20:46

Active Jan 14 '17 at 20:57

Viewed 341 times

I'm learning how to make Chrome extensions, but I'm having trouble figuring out what the best practices are to organize my code. In any other language, I know I would break down my codebase into multiple files and do imports, but when I had a file tree like this:

|
|-background.js
|-someotherfile.js

And someotherfile.js has a function like

export function somefunction(){alert("somefunction was called");}

But in background.js when I do

import * from 'someotherfile';
chrome.runtime.onInstalled.addListener(function() {
    somefunction();
});

and I load my unpacked extension, background.js doesn't run, even though it does if I put somefunction in background.js.

What is the right practice for organizing my code in Chrome?

asked Jan 14 '17 at 20:46

Andy Haskell

1

Chrome doesn't support dynamic loading of imports yet. You need to bundle it or use `require`-like solution. Or use a polyfill: [Which browsers support import and export syntax for ECMAScript 6?](//stackoverflow.com/q/33516906) – wOxxOm Jan 14 '17 at 20:59
Bundle as in like have a Gulp task to concatenate all my JavaScript files into one background.js? – Andy Haskell Jan 14 '17 at 21:03
1

Yes. Or webpack and so on. – wOxxOm Jan 14 '17 at 21:06
3

Or just list the other files in the manifest. – Daniel Herr Jan 14 '17 at 21:09
Thanks wOxxOm and Daniel! – Andy Haskell Jan 15 '17 at 00:23

Using multiple JavaScript files in a Chrome extension

0 Answers0