如何在Chrome扩展程序中使用Firebase?

开发 Chrome 扩展程序通常感觉与开发任何其他网络应用非常相似：同样是使用 HTML、JavaScript 和 CSS 进行开发。 

不过，尽管从技术上讲开发 Chrome 扩展程序与开发网络应用在某些方面相似，仍有一些差异需要注意。必须进行特殊设置，才能启用和使用 Firebase 等第三方托管内容库和服务。此外，Chrome 扩展程序可以使用 chrome.identity API 之类的特殊 API，并且这些 API 可以改善用户体验。让我们浏览一下在 Chrome 扩展程序中启用 Firebase 所需的步骤。 

Firebase 初始化

我们通常指示开发者在其 main.html 文件中导入和配置 Firebase SDK。不过，在 Chrome 扩展程序中，由于内容安全政策的缘故，最好避免使用内联脚本。因此，您需要在 JS 文件而非通常指示的 HTML 中添加 Firebase SDK 初始化代码。您的扩展程序 JS 文件中现已加入了下列代码行： 

1. // Initialize Firebase

2. var config = {

3.   apiKey: "<qwertyuiopasdfghjklzxcvbnm>",

4.   databaseURL: "https://<my-app-id>.firebaseio.com",

5.   storageBucket: "<my-app-id>.appspot.com"

6. };

7. firebase.initializeApp(config)

高级技巧：我们移除了 authDomain 行，因为它只对 Firebase SDK 中 我们 不使用的弹窗和重定向身份验证方法有用。 

您仍需要在 HTML 文件内加载 firebase.js：
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

不过，您需要将托管脚本的网域（即 www.gstatic.com）加入白名单。您还需要将实时数据库和 Firebase 存储使用的 *.firebaseio.com 和 www.googleapis.com 加入白名单。要允许访问这些网域，请向您的 manifest.json 添加以下代码： 
"Content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"

对用户进行身份验证

尽管 Firebase 密码身份验证和匿名身份验证能够在 Chrome 扩展程序中按照预期方式工作，Google Sign-In 仍会要求进行一些附加设置，该设置包括以下两个要点： 

配置客户端 ID

您需要创建一个设置为在您的 Chrome 扩展程序中使用的 Google 客户端 ID，并在您的 Firebase 项目中将其加入白名单。执行以下步骤： 

• 在您的项目的 Developers Console 中新建一个 OAuth Client ID，选择 Chrome App，然后输入您的 Chrome 扩展程序/Chrome 应用 ID。

• 在您的项目的 Firebase 控制台中，在 Auth 部分 > SIGN IN METHOD 标签中启用 Google 身份验证方法。
  

• 利用 Whitelist client IDs from external projects (optional) 将您刚创建的 Client ID 添加到白名单，然后点击 SAVE。

您的客户端 ID 现已设置为在您的 Chrome 扩展程序中使用，并且已加入白名单，可在您的 Firebase 项目中使用。 

使用 chrome.identity API 和授权 Firebase

可以按照 https://developer.chrome.com/apps/app_identity 中所述使用 chrome.identity API 对您的用户进行身份验证。需要对上述说明稍加修改的是，您需要请求访问 电子邮件 和 个人资料 作用域，因此在您的 manifest.json 内，您需要： 

1. "permissions": [

2.   "identity"

3. ],

4. "oauth2": {

5.   // Use your Client ID Below.

6.   "client_id": "1234567890-abcdefjhijk.apps.googleusercontent.com",

7.   "scopes": [

8.     "https://www.googleapis.com/auth/userinfo.email",

9.     "https://www.googleapis.com/auth/userinfo.profile"

10.   ]

11. },

Chrome Identity API 的优点在于，您的用户可以获得“本机”般的登录体验，因为您的用户可以使用他们在 Chrome 浏览器中登录时使用的那个帐户进行身份验证。 

用户通过身份验证后，您将获得一个 Google OAuth 令牌。可以利用这个令牌通过 Auth.signInWithCredential() 授权 Firebase： 
var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential);

这样就行了！现在您可以随时开始使用 Firebase SDK 的功能，如 Firebase 实时数据库和 Firebase 存储。 

示例扩展程序

我们发布了一个示例 Chrome 扩展程序，用于展示如何通过 Google Sign-In 在 Chrome 扩展程序中使用 Firebase。敬请随时浏览并开始使用：

https://github.com/firebase/quickstart-js/tree/master/auth/chromextension 

您还可以直接试用该 Chrome 扩展程序：

https://chrome.google.com/webstore/detail/lpgchdfbjddonaolofeijjackhnhnlla 

9.21 Google Doodle: 亚美尼亚独立 25 周年纪念日