mv3-solid-chrome-extension-template

chrome-extension development template with firebase

Support

• Chrome Extension
• Manifest V3
• SolidJS
• Typescript
• HMR
• Firebase Authentication

Quick Start

Install

git clone https://github.com/munron/mv3-solid-chrome-extension-template.git
cd mv3-vue-solid-extension-template
npm install
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 VITE_MV3_KEY

VITE_FIREBASE_APIKEY=XXXXXXXX
VITE_FIREBASE_AUTHDOMAIN=XXXXXXXX
VITE_FIREBASE_PROJECTID=XXXXXXXX
VITE_FIREBASE_STORAGEBUCKET=XXXXXXXX
VITE_FIREBASE_MESSAGINGSENDERID=XXXXXXXX
VITE_FIREBASE_APPID=XXXXXXXX
VITE_MEASUREMENTID=XXXXXXXX
VITE_OAUTH2_CLIENT_ID=XXXXXXXX
VITE_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

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

Add domain

Build → Authentication → Settings → Add domain
domain: 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.env.VITE_OAUTH2_CLIENT_ID,
      "scopes": [
        "https://www.googleapis.com/authuserinfo.email",
        "https://www.googleapis.com/authuserinfo.profile"
      ]
    },
    "key": process.env.VITE_MV3_KEY
  }
}),

HMR

npm run dev

Build

npm run build