mv3-vue-chrome-extension-template

demo modern chrome-extension development template

Support

  • Manifest V3
  • Vue3
  • Typescript
  • Hot Reload

Quick Start

Install

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

Fix Extension ID

Open chrome://extensions

Click Pack Extension

Click Browse and select dist folder

dist.crx and dist.pem are generated.

Edit .env

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-----"

Setup Firebase

Create New Project

https://console.firebase.google.com

Copy Firebase Configuration to .env

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

Add Google to Sign-in provider in

Add chrome-extension://{Chrome Extension ID}

Setup Google Cloud Platform

Open https://console.cloud.google.com/

Open API&Service → Credential → +CREATE CREDENTIALS →　OAuth Client ID

Select Chrome App, fill Name and Application ID (Chrome Extension ID)

Edit .env.

Copy Your Client Id to VUE_APP_OAUTH2_CLIENT_ID

Edit rollup.config.js.

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
  }
}),

Build

npm run build

Hot reload

npm run dev

GitHub

View Github