├── .prettierrc ├── .github └── workflows │ └── test.yml ├── tsconfig.json ├── package.json ├── LICENSE ├── README.md ├── src └── index.ts └── .gitignore /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v4 16 | 17 | - name: Setup Node.js 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: "24" 21 | cache: "npm" 22 | 23 | - name: Install dependencies 24 | run: npm ci 25 | 26 | - name: Run tests 27 | run: npm run test 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "module": "commonjs", 5 | "lib": ["ES2020", "DOM"], 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "strict": true, 9 | "esModuleInterop": true, 10 | "skipLibCheck": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "declaration": true, 13 | "declarationMap": true, 14 | "sourceMap": true, 15 | "moduleResolution": "node", 16 | "resolveJsonModule": true, 17 | "allowSyntheticDefaultImports": true 18 | }, 19 | "include": ["src/**/*"], 20 | "exclude": ["node_modules", "dist"] 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-extension-firebase-persistence", 3 | "version": "1.0.0", 4 | "description": "Custom firebase persistence for browser extensions", 5 | "homepage": "https://github.com/ivliag/browser-extension-firebase-persistence#readme", 6 | "bugs": { 7 | "url": "https://github.com/ivliag/browser-extension-firebase-persistence/issues" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ivliag/browser-extension-firebase-persistence.git" 12 | }, 13 | "license": "ISC", 14 | "author": "Ivan Liagushkin", 15 | "type": "commonjs", 16 | "main": "dist/index.js", 17 | "scripts": { 18 | "build": "tsc", 19 | "test": "tsc --noEmit", 20 | "format": "prettier --write ." 21 | }, 22 | "dependencies": { 23 | "@plasmohq/storage": "^1.15.0" 24 | }, 25 | "devDependencies": { 26 | "@types/chrome": "^0.1.12", 27 | "prettier": "^3.6.2", 28 | "typescript": "^5.9.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ivan Lyagushkin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Browser Extension Firebase Persistence 2 | 3 | A custom Firebase persistence implementation for browser extensions that stores authentication data in Chrome storage. 4 | 5 | ## Purpose 6 | 7 | This library provides a custom [Firebase Auth state persistence](https://firebase.google.com/docs/auth/web/auth-state-persistence) solution specifically designed for browser extension contexts. 8 | 9 | Traditional web storage mechanisms don't work across extension contexts, making it necessary to use [Chrome Storage API](https://developer.chrome.com/docs/extensions/reference/api/storage) to persist and share Firebase authentication data between different parts of the extension. 10 | 11 | ## Installation 12 | 13 | ```bash 14 | npm install browser-extension-firebase-persistence 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```javascript 20 | import { createBrowserExtensionPersistence } from "browser-extension-firebase-persistence"; 21 | import { initializeAuth } from "@firebase/auth"; 22 | 23 | const browserStoragePersistence = createBrowserExtensionPersistence(); 24 | 25 | const auth = initializeAuth(firebaseApp, { 26 | persistence: browserStoragePersistence, 27 | }); 28 | ``` 29 | 30 | ## Why This Is Needed 31 | 32 | In browser extensions, Firebase authentication data needs to be shared between: 33 | 34 | - Content scripts 35 | - Background scripts 36 | - Popup pages 37 | - Options pages 38 | 39 | Chrome Storage is the only reliable way to share this authentication state across all these contexts, as regular web storage (localStorage, sessionStorage) is isolated per origin and not accessible across extension components. 40 | 41 | More details in [Firebase JS SDK GitHub discussion](https://github.com/firebase/firebase-js-sdk/issues/1874). 42 | 43 | ## License 44 | 45 | [MIT](./LICENSE) 46 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Storage } from "@plasmohq/storage"; 2 | 3 | type StorageListener = (newValue: unknown) => void; 4 | 5 | export function createBrowserExtensionPersistence() { 6 | return class { 7 | static type = "LOCAL" as const; 8 | type = "LOCAL" as const; 9 | 10 | STORAGE_KEY = "FIREBASE_PERSISTENCE"; 11 | 12 | listeners: Record = {}; 13 | 14 | storage: Storage; 15 | 16 | constructor() { 17 | const storage = new Storage({ area: "local" }); 18 | storage.watch({ 19 | [this.STORAGE_KEY]: this.combinedListener.bind( 20 | this, 21 | ) as (typeof this)["combinedListener"], 22 | }); 23 | this.storage = storage; 24 | } 25 | 26 | _isAvailable(): Promise { 27 | return Promise.resolve(true); 28 | } 29 | 30 | async _set(key: string, value: T): Promise { 31 | const storageValue = await this.storage.get<{ [key: string]: T }>( 32 | this.STORAGE_KEY, 33 | ); 34 | return this.storage.set(this.STORAGE_KEY, { 35 | ...storageValue, 36 | [key]: value, 37 | }); 38 | } 39 | 40 | async _get(key: string): Promise { 41 | const value = await this.storage 42 | .get<{ [key: string]: T }>(this.STORAGE_KEY) 43 | .then((value) => value?.[key]); 44 | return value; 45 | } 46 | 47 | async _remove(key: string): Promise { 48 | const storageValue = await this.storage.get<{ [key: string]: T }>( 49 | this.STORAGE_KEY, 50 | ); 51 | return this.storage.set(this.STORAGE_KEY, { 52 | ...storageValue, 53 | [key]: undefined, 54 | }); 55 | } 56 | 57 | _addListener(key: string, listener: StorageListener): void { 58 | this.listeners[key] = [...(this.listeners[key] || []), listener]; 59 | } 60 | 61 | _removeListener(key: string, listener: StorageListener): void { 62 | if (this.listeners[key]) { 63 | this.listeners[key] = this.listeners[key].filter((l) => l !== listener); 64 | } 65 | } 66 | 67 | combinedListener(change: chrome.storage.StorageChange) { 68 | type StorageChangeItem = { [key: string]: unknown }; 69 | 70 | Object.entries(this.listeners).forEach(([key, listeners]) => { 71 | if ( 72 | (change.oldValue as StorageChangeItem)?.[key] !== 73 | (change.newValue as StorageChangeItem)?.[key] 74 | ) { 75 | listeners.forEach((listener) => 76 | listener((change.newValue as StorageChangeItem)?.[key]), 77 | ); 78 | } 79 | }); 80 | } 81 | }; 82 | } 83 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional stylelint cache 57 | .stylelintcache 58 | 59 | # Optional REPL history 60 | .node_repl_history 61 | 62 | # Output of 'npm pack' 63 | *.tgz 64 | 65 | # Yarn Integrity file 66 | .yarn-integrity 67 | 68 | # dotenv environment variable files 69 | .env 70 | .env.* 71 | !.env.example 72 | 73 | # parcel-bundler cache (https://parceljs.org/) 74 | .cache 75 | .parcel-cache 76 | 77 | # Next.js build output 78 | .next 79 | out 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and not Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # vuepress v2.x temp and cache directory 95 | .temp 96 | .cache 97 | 98 | # Sveltekit cache directory 99 | .svelte-kit/ 100 | 101 | # vitepress build output 102 | **/.vitepress/dist 103 | 104 | # vitepress cache directory 105 | **/.vitepress/cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # Firebase cache directory 120 | .firebase/ 121 | 122 | # TernJS port file 123 | .tern-port 124 | 125 | # Stores VSCode versions used for testing VSCode extensions 126 | .vscode-test 127 | 128 | # yarn v3 129 | .pnp.* 130 | .yarn/* 131 | !.yarn/patches 132 | !.yarn/plugins 133 | !.yarn/releases 134 | !.yarn/sdks 135 | !.yarn/versions 136 | 137 | # Vite logs files 138 | vite.config.js.timestamp-* 139 | vite.config.ts.timestamp-* 140 | --------------------------------------------------------------------------------