j) Create a signInWithPopup.js file in firebase-project/signInWithPopup.js

import { initializeApp } from \\'firebase/app\\';import { getAuth, signInWithPopup, GoogleAuthProvider } from \\'firebase/auth\\';const firebaseConfig = {  // Your web app\\'s Firebase configuration  // Replace with the config you copied from Firebase Console};const app = initializeApp(firebaseConfig);const auth = getAuth();// This gives you a reference to the parent frame, i.e. the offscreen document.const PARENT_FRAME = document.location.ancestorOrigins[0];const PROVIDER = new GoogleAuthProvider();function sendResponse(result) {  window.parent.postMessage(JSON.stringify(result), PARENT_FRAME);}window.addEventListener(\\'message\\', function({data}) {  if (data.initAuth) {    signInWithPopup(auth, PROVIDER)      .then(sendResponse)      .catch(sendResponse);  }});

k) Deploy the Firebase project

npm install -g firebase-toolsfirebase loginfirebase init hostingfirebase deploy

Note the hosting URL provided after deployment. You\\'ll need this for the Chrome extension.

Step 3: Set up the Chrome Extension

a) Navigate to the chrome-extension directory
cd ../chrome-extension

b) Create a manifest.json file in chrome-extension/manifest.json

{  \\\"manifest_version\\\": 3,  \\\"name\\\": \\\"Firebase Auth Extension\\\",  \\\"version\\\": \\\"1.0\\\",  \\\"description\\\": \\\"Chrome extension with Firebase Authentication\\\",  \\\"permissions\\\": [    \\\"identity\\\",    \\\"storage\\\",    \\\"offscreen\\\"  ],  \\\"host_permissions\\\": [    \\\"https://*.firebaseapp.com/*\\\"  ],  \\\"background\\\": {    \\\"service_worker\\\": \\\"background.js\\\",    \\\"type\\\": \\\"module\\\"  },  \\\"action\\\": {    \\\"default_popup\\\": \\\"popup.html\\\"  },  \\\"web_accessible_resources\\\": [    {      \\\"resources\\\": [\\\"offscreen.html\\\"],      \\\"matches\\\": [\\\"\\\"]    }  ],  \\\"oauth2\\\": {    \\\"client_id\\\": \\\"YOUR-ID.apps.googleusercontent.com\\\",    \\\"scopes\\\": [      \\\"openid\\\",       \\\"email\\\",       \\\"profile\\\"    ]  },  \\\"key\\\": \\\"-----BEGIN PUBLIC KEY-----\\\\nYOURPUBLICKEY\\\\n-----END PUBLIC KEY-----\\\"}

c) Create a popup.html file in chrome-extension/popup.html

    Firebase Auth Extension    

Firebase Auth Extension

d) Create a popup.js file in chrome-extension/popup.js

document.addEventListener(\\'DOMContentLoaded\\', function() {    const signInButton = document.getElementById(\\'signInButton\\');    const signOutButton = document.getElementById(\\'signOutButton\\');    const userInfo = document.getElementById(\\'userInfo\\');    function updateUI(user) {        if (user) {            userInfo.textContent = `Signed in as: ${user.email}`;            signInButton.style.display = \\'none\\';            signOutButton.style.display = \\'block\\';        } else {            userInfo.textContent = \\'Not signed in\\';            signInButton.style.display = \\'block\\';            signOutButton.style.display = \\'none\\';        }    }    chrome.storage.local.get([\\'user\\'], function(result) {        updateUI(result.user);    });    signInButton.addEventListener(\\'click\\', function() {        chrome.runtime.sendMessage({action: \\'signIn\\'}, function(response) {            if (response.user) {                updateUI(response.user);            }        });    });    signOutButton.addEventListener(\\'click\\', function() {        chrome.runtime.sendMessage({action: \\'signOut\\'}, function() {            updateUI(null);        });    });});

e) Create a background.js file in chrome-extension/background.js

const OFFSCREEN_DOCUMENT_PATH = \\'offscreen.html\\';const FIREBASE_HOSTING_URL = \\'https://your-project-id.web.app\\'; // Replace with your Firebase hosting URLlet creatingOffscreenDocument;async function hasOffscreenDocument() {    const matchedClients = await clients.matchAll();    return matchedClients.some((client) => client.url.endsWith(OFFSCREEN_DOCUMENT_PATH));}async function setupOffscreenDocument() {    if (await hasOffscreenDocument()) return;    if (creatingOffscreenDocument) {        await creatingOffscreenDocument;    } else {        creatingOffscreenDocument = chrome.offscreen.createDocument({            url: OFFSCREEN_DOCUMENT_PATH,            reasons: [chrome.offscreen.Reason.DOM_SCRAPING],            justification: \\'Firebase Authentication\\'        });        await creatingOffscreenDocument;        creatingOffscreenDocument = null;    }}async function getAuthFromOffscreen() {    await setupOffscreenDocument();    return new Promise((resolve, reject) => {        chrome.runtime.sendMessage({action: \\'getAuth\\', target: \\'offscreen\\'}, (response) => {            if (chrome.runtime.lastError) {                reject(chrome.runtime.lastError);            } else {                resolve(response);            }        });    });}chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {    if (message.action === \\'signIn\\') {        getAuthFromOffscreen()            .then(user => {                chrome.storage.local.set({user: user}, () => {                    sendResponse({user: user});                });            })            .catch(error => {                console.error(\\'Authentication error:\\', error);                sendResponse({error: error.message});            });        return true; // Indicates we will send a response asynchronously    } else if (message.action === \\'signOut\\') {        chrome.storage.local.remove(\\'user\\', () => {            sendResponse();        });        return true;    }});

f) Create an offscreen.html file in chrome-extension/offscreen.html

    Offscreen Document    

g) Create an offscreen.js file in _chrome-extension/offscreen.js
_

const FIREBASE_HOSTING_URL = \\'https://your-project-id.web.app\\'; // Replace with your Firebase hosting URLconst iframe = document.createElement(\\'iframe\\');iframe.src = FIREBASE_HOSTING_URL;document.body.appendChild(iframe);chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {    if (message.action === \\'getAuth\\' && message.target === \\'offscreen\\') {        function handleIframeMessage({data}) {            try {                const parsedData = JSON.parse(data);                window.removeEventListener(\\'message\\', handleIframeMessage);                sendResponse(parsedData.user);            } catch (e) {                console.error(\\'Error parsing iframe message:\\', e);            }        }        window.addEventListener(\\'message\\', handleIframeMessage);        iframe.contentWindow.postMessage({initAuth: true}, FIREBASE_HOSTING_URL);        return true; // Indicates we will send a response asynchronously    }});

Step 4: Configure Firebase Authentication

a) In the Firebase Console, go to Authentication > Sign-in method.
b) Enable Google as a sign-in provider.
c) Add your Chrome extension\\'s ID to the authorized domains list:
The format is: chrome-extension://YOUR_EXTENSION_ID
You can find your extension ID in Chrome\\'s extension management page after loading it as an unpacked extension.

Step 5: Load and Test the Extension

a) Open Google Chrome and go to chrome://extensions/.
b) Enable \\\"Developer mode\\\" in the top right corner.
c) Click \\\"Load unpacked\\\" and select your chrome-extension directory.
d) Click on the extension icon in Chrome\\'s toolbar to open the popup.
e) Click the \\\"Sign In\\\" button and test the authentication flow.

Troubleshooting

If you encounter CORS issues, ensure your Firebase hosting URL is correctly set in both background.js and offscreen.js.

Make sure your Chrome extension\\'s ID is correctly added to Firebase\\'s authorized domains.

Check the console logs in the popup, background script, and offscreen document for any error messages.

Conclusion

You now have a Chrome extension that uses Firebase Authentication with an offscreen document to handle the sign-in process. This setup allows for secure authentication without exposing sensitive Firebase configuration details directly in the extension code.

Remember to replace placeholder values (like YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY, and your-project-id) with your actual values before publishing your extension.

","image":"http://www.luping.net/uploads/20241006/172820052667023f4e031a4.jpg","datePublished":"2024-11-02T15:11:01+08:00","dateModified":"2024-11-02T15:11:01+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 Firebase 的 Chrome 扩展程序中的 Google 身份验证

使用 Firebase 的 Chrome 扩展程序中的 Google 身份验证

发布于2024-11-02
浏览:753

Google Authentication in a Chrome Extension with Firebase

We're writing this guide because the official guide by Google is missing a few important steps, we've linked in below:

Authenticate with Firebase in a Chrome extension

This will work on any operating system. For the purposes of this guide we'll be using Mac OS

Prerequisites

  • Google Chrome browser
  • A Google account
  • A Chrome web store developer account ($5 one time fee)
  • Node.js and npm installed

Step 1: Create the Project Structure

a) Create a new directory for your project:

mkdir firebase-chrome-auth
cd firebase-chrome-auth

b) Create two subdirectories:

mkdir chrome-extension
mkdir firebase-project

Step 2: Set up the Firebase Project

a) Go to the Firebase Console.
b) Click "Add project" and follow the steps to create a new project.
c) Once created, click on "Web" to add a web app to your project.
d) Register your app with a nickname (e.g., "Chrome Extension Auth").
e) Copy the Firebase configuration object. You'll need this later.

const firebaseConfig = {
  apiKey: "example",
  authDomain: "example.firebaseapp.com",
  projectId: "example",
  storageBucket: "example",
  messagingSenderId: "example",
  appId: "example"
};

f) Navigate to the firebase-project directory
cd firebase-project
g) Initialize a new npm project
npm init -y
h) Install Firebase:
npm install firebase
i) Create an index.html file in firebase-project/index.html


 
  Firebase Auth for Chrome Extension
 
 
  

Firebase Auth for Chrome Extension

j) Create a signInWithPopup.js file in firebase-project/signInWithPopup.js

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  // Your web app's Firebase configuration
  // Replace with the config you copied from Firebase Console
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();

// This gives you a reference to the parent frame, i.e. the offscreen document.
const PARENT_FRAME = document.location.ancestorOrigins[0];

const PROVIDER = new GoogleAuthProvider();

function sendResponse(result) {
  window.parent.postMessage(JSON.stringify(result), PARENT_FRAME);
}

window.addEventListener('message', function({data}) {
  if (data.initAuth) {
    signInWithPopup(auth, PROVIDER)
      .then(sendResponse)
      .catch(sendResponse);
  }
});

k) Deploy the Firebase project

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

Note the hosting URL provided after deployment. You'll need this for the Chrome extension.

Step 3: Set up the Chrome Extension

a) Navigate to the chrome-extension directory
cd ../chrome-extension

b) Create a manifest.json file in chrome-extension/manifest.json

{
  "manifest_version": 3,
  "name": "Firebase Auth Extension",
  "version": "1.0",
  "description": "Chrome extension with Firebase Authentication",
  "permissions": [
    "identity",
    "storage",
    "offscreen"
  ],
  "host_permissions": [
    "https://*.firebaseapp.com/*"
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    {
      "resources": ["offscreen.html"],
      "matches": [""]
    }
  ],
  "oauth2": {
    "client_id": "YOUR-ID.apps.googleusercontent.com",
    "scopes": [
      "openid", 
      "email", 
      "profile"
    ]
  },
  "key": "-----BEGIN PUBLIC KEY-----\nYOURPUBLICKEY\n-----END PUBLIC KEY-----"
}

c) Create a popup.html file in chrome-extension/popup.html



    Firebase Auth Extension


    

Firebase Auth Extension

d) Create a popup.js file in chrome-extension/popup.js

document.addEventListener('DOMContentLoaded', function() {
    const signInButton = document.getElementById('signInButton');
    const signOutButton = document.getElementById('signOutButton');
    const userInfo = document.getElementById('userInfo');

    function updateUI(user) {
        if (user) {
            userInfo.textContent = `Signed in as: ${user.email}`;
            signInButton.style.display = 'none';
            signOutButton.style.display = 'block';
        } else {
            userInfo.textContent = 'Not signed in';
            signInButton.style.display = 'block';
            signOutButton.style.display = 'none';
        }
    }

    chrome.storage.local.get(['user'], function(result) {
        updateUI(result.user);
    });

    signInButton.addEventListener('click', function() {
        chrome.runtime.sendMessage({action: 'signIn'}, function(response) {
            if (response.user) {
                updateUI(response.user);
            }
        });
    });

    signOutButton.addEventListener('click', function() {
        chrome.runtime.sendMessage({action: 'signOut'}, function() {
            updateUI(null);
        });
    });
});

e) Create a background.js file in chrome-extension/background.js

const OFFSCREEN_DOCUMENT_PATH = 'offscreen.html';
const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL

let creatingOffscreenDocument;

async function hasOffscreenDocument() {
    const matchedClients = await clients.matchAll();
    return matchedClients.some((client) => client.url.endsWith(OFFSCREEN_DOCUMENT_PATH));
}

async function setupOffscreenDocument() {
    if (await hasOffscreenDocument()) return;

    if (creatingOffscreenDocument) {
        await creatingOffscreenDocument;
    } else {
        creatingOffscreenDocument = chrome.offscreen.createDocument({
            url: OFFSCREEN_DOCUMENT_PATH,
            reasons: [chrome.offscreen.Reason.DOM_SCRAPING],
            justification: 'Firebase Authentication'
        });
        await creatingOffscreenDocument;
        creatingOffscreenDocument = null;
    }
}

async function getAuthFromOffscreen() {
    await setupOffscreenDocument();
    return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage({action: 'getAuth', target: 'offscreen'}, (response) => {
            if (chrome.runtime.lastError) {
                reject(chrome.runtime.lastError);
            } else {
                resolve(response);
            }
        });
    });
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'signIn') {
        getAuthFromOffscreen()
            .then(user => {
                chrome.storage.local.set({user: user}, () => {
                    sendResponse({user: user});
                });
            })
            .catch(error => {
                console.error('Authentication error:', error);
                sendResponse({error: error.message});
            });
        return true; // Indicates we will send a response asynchronously
    } else if (message.action === 'signOut') {
        chrome.storage.local.remove('user', () => {
            sendResponse();
        });
        return true;
    }
});

f) Create an offscreen.html file in chrome-extension/offscreen.html



    Offscreen Document


    


g) Create an offscreen.js file in _chrome-extension/offscreen.js
_

const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL

const iframe = document.createElement('iframe');
iframe.src = FIREBASE_HOSTING_URL;
document.body.appendChild(iframe);

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'getAuth' && message.target === 'offscreen') {
        function handleIframeMessage({data}) {
            try {
                const parsedData = JSON.parse(data);
                window.removeEventListener('message', handleIframeMessage);
                sendResponse(parsedData.user);
            } catch (e) {
                console.error('Error parsing iframe message:', e);
            }
        }

        window.addEventListener('message', handleIframeMessage);
        iframe.contentWindow.postMessage({initAuth: true}, FIREBASE_HOSTING_URL);
        return true; // Indicates we will send a response asynchronously
    }
});

Step 4: Configure Firebase Authentication

a) In the Firebase Console, go to Authentication > Sign-in method.
b) Enable Google as a sign-in provider.
c) Add your Chrome extension's ID to the authorized domains list:
The format is: chrome-extension://YOUR_EXTENSION_ID
You can find your extension ID in Chrome's extension management page after loading it as an unpacked extension.

Step 5: Load and Test the Extension

a) Open Google Chrome and go to chrome://extensions/.
b) Enable "Developer mode" in the top right corner.
c) Click "Load unpacked" and select your chrome-extension directory.
d) Click on the extension icon in Chrome's toolbar to open the popup.
e) Click the "Sign In" button and test the authentication flow.

Troubleshooting

If you encounter CORS issues, ensure your Firebase hosting URL is correctly set in both background.js and offscreen.js.

Make sure your Chrome extension's ID is correctly added to Firebase's authorized domains.

Check the console logs in the popup, background script, and offscreen document for any error messages.

Conclusion

You now have a Chrome extension that uses Firebase Authentication with an offscreen document to handle the sign-in process. This setup allows for secure authentication without exposing sensitive Firebase configuration details directly in the extension code.

Remember to replace placeholder values (like YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY, and your-project-id) with your actual values before publishing your extension.

版本声明 本文转载于:https://dev.to/lvn1/google-authentication-in-a-chrome-extension-with-firebase-2bmo?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 将图片浮动到底部右侧并环绕文字的技巧
    将图片浮动到底部右侧并环绕文字的技巧
    在Web设计中围绕在Web设计中,有时可以将图像浮动到页面右下角,从而使文本围绕它缠绕。这可以在有效地展示图像的同时创建一个吸引人的视觉效果。 css位置在右下角,使用css float and clear properties: img { 浮点:对; ...
    编程 发布于2025-07-02
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    postgresql:为每个唯一标识符提取最后一行,在Postgresql中,您可能需要遇到与在数据库中的每个不同标识相关的信息中提取信息的情况。考虑以下数据:[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息,您可以在操作员上使用Postgres的有效效率: ...
    编程 发布于2025-07-02
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在银光应用程序中,尝试使用LINQ建立错误的数据库连接的尝试,无法找到以查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中,tblpersoon可能需...
    编程 发布于2025-07-02
  • 在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    mysql-python安装错误:“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题,建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB: sudo apt-get安装python-mysqldb sudo pip in...
    编程 发布于2025-07-02
  • PHP未来:适应与创新
    PHP未来:适应与创新
    PHP的未来将通过适应新技术趋势和引入创新特性来实现:1)适应云计算、容器化和微服务架构,支持Docker和Kubernetes;2)引入JIT编译器和枚举类型,提升性能和数据处理效率;3)持续优化性能和推广最佳实践。 引言在编程世界中,PHP一直是网页开发的中流砥柱。作为一个从1994年就开始发展...
    编程 发布于2025-07-02
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-07-02
  • 如何使用不同数量列的联合数据库表?
    如何使用不同数量列的联合数据库表?
    合并列数不同的表 当尝试合并列数不同的数据库表时,可能会遇到挑战。一种直接的方法是在列数较少的表中,为缺失的列追加空值。 例如,考虑两个表,表 A 和表 B,其中表 A 的列数多于表 B。为了合并这些表,同时处理表 B 中缺失的列,请按照以下步骤操作: 确定表 B 中缺失的列,并将它们添加到表的末...
    编程 发布于2025-07-02
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-07-02
  • 用户本地时间格式及时区偏移显示指南
    用户本地时间格式及时区偏移显示指南
    在用户的语言环境格式中显示日期/时间,并使用时间偏移在向最终用户展示日期和时间时,以其localzone and格式显示它们至关重要。这确保了不同地理位置的清晰度和无缝用户体验。以下是使用JavaScript实现此目的的方法。方法:推荐方法是处理客户端的Javascript中的日期/时间格式化和时...
    编程 发布于2025-07-02
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-07-02
  • 如何使用Python有效地以相反顺序读取大型文件?
    如何使用Python有效地以相反顺序读取大型文件?
    在python 中,如果您使用一个大文件,并且需要从最后一行读取其内容,则在第一行到第一行,Python的内置功能可能不合适。这是解决此任务的有效解决方案:反向行读取器生成器 == ord('\ n'): 缓冲区=缓冲区[:-1] ...
    编程 发布于2025-07-02
  • 查找当前执行JavaScript的脚本元素方法
    查找当前执行JavaScript的脚本元素方法
    如何引用当前执行脚本的脚本元素在某些方案中理解问题在某些方案中,开发人员可能需要将其他脚本动态加载其他脚本。但是,如果Head Element尚未完全渲染,则使用document.getElementsbytagname('head')[0] .appendChild(v)的常规方...
    编程 发布于2025-07-02
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-07-02
  • 如何使用Depimal.parse()中的指数表示法中的数字?
    如何使用Depimal.parse()中的指数表示法中的数字?
    在尝试使用Decimal.parse(“ 1.2345e-02”中的指数符号表示法表示的字符串时,您可能会遇到错误。这是因为默认解析方法无法识别指数符号。 成功解析这样的字符串,您需要明确指定它代表浮点数。您可以使用numbersTyles.Float样式进行此操作,如下所示:[&& && && ...
    编程 发布于2025-07-02
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-07-02

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3