chrome-extension development template with firebase

Support

• Chrome Extension
• Manifest V3
• Vue3
• Typescript
• Hot Reload
• Firebase Authentication

git clone https://github.com/munron/mv3-vue-chrome-extension-template.git
cd mv3-vue-chrome-extension-template
npm install
npm run build
mv .env.sample .env

dist.crx and dist.pem are generated.

Copy private key from dist.pem and paste to VUE_APP_MV3_KEY

VUE_APP_FIREBASE_APIKEY=XXXXXXXX
VUE_APP_FIREBASE_AUTHDOMAIN=XXXXXXXX
VUE_APP_FIREBASE_PROJECTID=XXXXXXXX
VUE_APP_FIREBASE_STORAGEBUCKET=XXXXXXXX
VUE_APP_FIREBASE_MESSAGINGSENDERID=XXXXXXXX
VUE_APP_FIREBASE_APPID=XXXXXXXX
VUE_APP_MEASUREMENTID=XXXXXXXX
VUE_APP_OAUTH2_CLIENT_ID=XXXXXXXX
VUE_APP_MV3_KEY="-----BEGIN PRIVATE KEY-----\nXXXXX.....XXXXXX\n....\nXXXXXX.....XXXXXXX\n-----END PRIVATE KEY-----"

https://console.firebase.google.com

const firebaseConfig = {
   apiKey: "XXX",
   authDomain: "XXX",
   projectId: "XXX",
   storageBucket: "XXX",
   messagingSenderId: "XXX",
   appId: "XXX",
   measurementId: "XXX"
};

Build → Authentication → Sign-in method → Google → Save

Build → Authentication → Settings → Add domain
domain: chrome-extension://{Chrome Extension ID}

Copy Your Client Id to VUE_APP_OAUTH2_CLIENT_ID

Uncomment oauth2 settings.

chromeExtension({
  extendManifest: {
    "oauth2": {
      "client_id": process.envVUE_APP_OAUTH2_CLIENT_ID,
      "scopes": [
        "https://www.googleapis.com/authuserinfo.email",
        "https://www.googleapis.com/authuserinfo.profile"
      ]
    },
    "key": process.env.VUE_APP_MV3_KEY
  }
}),

npm run build

npm run dev