我正在尝试在Chrome扩展中设置身份验证。我希望用户只需单击扩展图标,使用电子邮件和密码进行登录,然后能够使用扩展的不同组件。如果关闭了扩展弹出窗口,他们就不必再次登录。
我一直在仔细遵循文档这里、这里和特定于Chrome扩展的文档,但我的开发经验非常有限。
这是我的
使用这个扩展,我可以说每次单击扩展图标时登录都有效,但是如果我关闭并重新打开弹出窗口,则需要再次登录。我已经在各个地方询问过这个问题。我还尝试向我的
如果我没有完全迷失,我想我知道为什么会这样。如果我没有错,浏览器操作弹出窗口会覆盖后台页面/脚本正在执行的操作。然而,我不确定应该修改什么。我也看了一下在Chrome扩展中使用Firebase进行身份验证,但我无法理解它如何适用于我的工作。
现在我不知道接下来该怎么做了。
我一直在仔细遵循文档这里、这里和特定于Chrome扩展的文档,但我的开发经验非常有限。
这是我的
manifest.json
。{
"name": "Extension",
"version": "0.1",
"description": "",
"permissions": [
"tabs",
"activeTab",
"storage"
],
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://*.firebase.com https://www.googleapis.com; object-src 'self'",
"background": {
"page":"background.html",
"persistent": true
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {}
},
"manifest_version": 2
}
我的background.html
和background.js
与我上面链接的最后一个示例严格相同,除了当然我用自己的Firebase配置替换它。
我的popup.html
是:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>
<script src="firebase/initialize.js" charset="utf-8"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css"/>
<link type="text/css" rel="stylesheet" href="styles/popup.css" />
</head>
<body>
<h1>Extension</h1>
<div id="firebaseui-auth-container"></div>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="src/popup.js"></script>
</body>
</html>
其中,initialize.js
仅是Firebase初始化脚本,而我的popup.js
则为:
//Initizalier FirebaseUI instance
var ui = new firebaseui.auth.AuthUI(firebase.auth());
//Define sign-in methods
var uiConfig = {
callbacks: {
//Callbacl if sign up successful
signInSuccessWithAuthResult: function(authResult) {
// User successfully signed in.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
//Script to replace popup content with my Extension UI
return false;
},
},
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
],
};
//Initialize UI
ui.start('#firebaseui-auth-container', uiConfig);
使用这个扩展,我可以说每次单击扩展图标时登录都有效,但是如果我关闭并重新打开弹出窗口,则需要再次登录。我已经在各个地方询问过这个问题。我还尝试向我的
background.js
脚本询问此stackoverflow问题的答案,但没有成功。如果我没有完全迷失,我想我知道为什么会这样。如果我没有错,浏览器操作弹出窗口会覆盖后台页面/脚本正在执行的操作。然而,我不确定应该修改什么。我也看了一下在Chrome扩展中使用Firebase进行身份验证,但我无法理解它如何适用于我的工作。
现在我不知道接下来该怎么做了。