How to set up Parcel bundling in a Chrome extension for the whole source directory?

user_10854888 0
Viewed 1294

I'm trying to create a Chrome extension.

However, once I've tried integrating Parcel I am in a bit of a pickle. I'd like to use Parcel for compatibility with old Chrome versions + for splitting my code into multiple files.

My folder structure:

folder structure

When I try to make this command work:

//package.json
"scripts": {
    "build": "parcel build src/js/script.js", }

I end up only with the 'script.js' inside the '/dist' folder, but I want to create a dist folder that I can package and publish. I basically want to get all my html, css, js (etc.) inside a dist folder. Can this be done?

How would you go about adding a whole framework, like Vue or React e.g. to make the popup or options page?

parceljs google-chrome-extension javascript
1 Answers

Parcel 2 has a first-party WebExtensions transformer. It will pick up every files mentioned in manifest.json plus some other files like what's under _locales and it works fairly well!

.parcelrc file:

{
  "extends": "@parcel/config-webextension"
}

Install command:

npm install parcel @parcel/config-webextension

Build command:

parcel build manifest.json

✨ Built in 1.18s
user_2889060
Related