using webpack and manifest v3 👨‍💻

[github-actions]

Working on my amazing, incredible, life-changing Chrome extension, I noticed there wasn't much documentation available in terms of how to use manifest v3 extensions in conjunction with Webpack to modularize code. So here's a pretty quick guide.

(you can also just skip to the GitHub repository if you're into that sort of thing)

Write your code:

src/index.js

import { Example } from './example.js'

const example = new Example()

src/example.js

class Example {

    constructor() {
        console.log('hello world')
    }
}

export {
    Example
}

Setup your webpack.config.js file and run webpack:

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  // This will output a single file under `dist/bundle.js`
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
}

> webpack

asset bundle.js 76 bytes [compared for emit] [minimized] (name: main)
orphan modules 112 bytes [orphan] 1 module
./src/index.js + 1 modules 183 bytes [built] [code generated]
webpack 5.28.0 compiled successfully in 177 ms

Create your service worker entrypoint, importing the produced bundle:

service-worker.js

try {
    // This is the file produced by webpack
    importScripts('dist/bundle.js');
} catch (e) {
    // This will allow you to see error logs during registration/execution
    console.error(e);
}

Reference the file in your manifest:

manifest.json

{
    "name": "webpack-manifest-v3-example",
    "author": "Theodore Brockman",
    "version": "1.0.0",
    "description": "A Chrome extension packed using Webpack.",
    "permissions": [],
    "background": {
        "service_worker": "service-worker.js"
    },
    "manifest_version": 3
}

Load your unpacked extension and inspect the service worker view to check the output:

Done.

[noovil]

Hey, thanks for this.
I was trying to access firestore db in my v3 chrome extension. Following the steps you mentioned, I imported firebase/app and firebase/firestore in index.js -> bundle it up -> import bundle.js in my extension's background file.

Here is what inside index.js:

import { initializeApp } from "firebase/app"
import { getFirestore, collection, query, where, getDocs, addDoc } from "firebase/firestore"
const firebaseApp = initializeApp({
....
});
const db = getFirestore();

I'm trying to access db from background.js but I have no idea how to call it by looking at the code in bundle.js
Any idea?

Thank you!

[tbrockman]

@noovil hey just noticed your comment, but it looks like you were able to figure things out on your own. Hope you still found the guide a useful starting point!

[noovil]

@tbrockman Yes I did! Your guide definitely helped, thanks a lot!