A technique that I've found works well is to create a separate bundle for each context (e.g. background, content, etc.). Here's an example directory structure:
.
├── extension
│ ├── js
│ └── manifest.json
├── lib
│ ├── background
│ │ └── index.js
│ ├── content
│ │ └── index.js
│ └── frame
│ ├── index.js
│ ├── models
│ │ └── ...
│ └── views
│ └── ...
└── package.json
Inside the lib
directory, create a folder for each context with index.js
as the entry point. This file will bootstrap the application for that particular context, require
ing whichever modules and initializing that part of the app.
Then use browserify or watchify to create the bundles in ./extension/js/
:
$ browserify ./lib/background/index.js -o ./extension/js/background.js
$ browserify ./lib/content/index.js -o ./extension/js/content.js
$ browserify ./lib/frame/index.js -o ./extension/js/frame.js
If you intend to reuse the same module in, say, background.js
and content.js
, just require()
it in each context and browserify will build the bundles accordingly.
This process can be streamlined by using a Gruntfile.js or custom npm script.
You can try a working example of this approach here.