🖌️
Firebase+React_Notes
  • Firebase React Notes
  • React + firebase
    • Firebase - Create React app setup
      • Node & nvm
      • Create React App + Firebase
      • Create firebase app
      • Deploying To Firebase Hosting
      • Switching Environments
      • Typescript typings
      • Firebase cloud function local development
      • Resources
    • Firebase React context
      • Motivation
      • Firebase React Context setup
    • Firebase function local dev react
    • React firebase hooks
  • Multiple ENVs
    • Multiple ENVs
    • Manual setup
    • Terraform
  • Firestore
    • Firestore
      • Using a function to check email domain
    • Firestore data model
    • associated Firebase data with Users
    • Firestore write
    • Firestore - read
      • Removing a listener from firestorm
    • Firestore update
    • Persisting data offline
    • Importing json
  • Auth
    • Auth
    • Firebase UI
    • Firebase Auth with React
    • Linking auth accounts
    • Twitter sign in
    • Google sign in
      • Google sign in custom domain
    • Database Auth
      • Custom claims
      • Limit auth to certain domain only
    • Custom tokens
  • Cloud Functions
    • Cloud Functions
    • Set node version
    • Set timeout and memory allocation
    • Call functions via HTTP requests
    • HTTPS Callable
      • HTTPS Callable cloud function auth check email address domain
    • Separate Cloud Function in multiple files
    • Slack integration
    • Twilio firebase functions
    • ffmpeg convert audio
    • ffmpeg transcoding video
  • Storage
    • Security
    • Create
    • Delete
    • Uploading with React to Firebase Storage
    • Getting full path
    • Firebase `getDownloadURL`
    • Saving files to cloud storage from memory
  • Hosting
    • Hosting
    • Hosting + cloud functions
  • Firebase Admin
    • Firebase admin
  • Firebase analytics
    • Firebase analytics
  • Google App Engine
    • Google App Engine
    • GCP App Engine + video transcoding
  • STT
    • STT + Cloud Function + Cloud Task
      • Example implementation
      • `createTranscript`
      • `createHandler`
        • Firebase ENV
    • Other
      • enableWordTimeOffsets
      • STT longRunningRecognize in Cloud function
      • STT + Cloud Function
      • STT + Google App Engine
      • STT via Google Cloud Video intelligence API
  • CI Integration
    • Travis CI integration
    • Github actions integration
  • Visual code
    • Visual code extension
  • Electron
    • Firebase with electron
  • Pricing
    • Pricing
  • Testing
    • Unit testing
  • Privacy and Security
    • Privacy and security
  • Useful resources
    • links
  • Firebase Extensions
    • Firebase extension
  • Chrome Extension
    • Firebase in a chrome extension
  • Cloud Run
    • Cloud Run
Powered by GitBook
On this page

Was this helpful?

  1. Chrome Extension

Firebase in a chrome extension

Adding firebase/firestore to chrome extension

PreviousFirebase extensionNextCloud Run

Last updated 5 years ago

Was this helpful?

based on stackoverflow

in chrome extension manifest file manifest.json add firebase-app.js (https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js) and firebase-firestore.js(https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js) as follows

...
  "content_scripts": [
    {
      "matches": [
        "https://www.wsj.com/*"
      ],
      "js": [
        "firebasejs/7.5.0/firebase-app.js",
        "firebasejs/7.5.0/firebase-firestore.js",
    ...

As well as

  ...
  "content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
}

then in your extension code you can just initialise firebase as usual eg

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

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// do something with firebase/firestore

Add Cloud firestore library to chrome extension, content_scripts