Contents
mv3-vue-chrome-extension-template
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…..XXXXXXn….nXXXXXX…..XXXXXXXn—–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