问题描述
我正在尝试制作可通过google进行身份验证的firefox（以及后来的chrome）扩展程序。
我正在遵循此处概述的步骤：https://github.com/mdn/webextensions-examples/tree/master/google-userinfo
当我遵循它们的格式时，一切都会按预期进行。但是，他们的示例在单击工具栏按钮后立即启动身份流。
我正在尝试使其适应下拉菜单，该弹出菜单还显示我自己的应用程序un：pw登录名，然后显示使用Google登录的选项。
当我从弹出窗口启动身份流时，一切正常，直到登录后收到回调。
该应用程序打开一个弹出窗口，我登录，该弹出窗口关闭，并且代码中的任何内容均未继续，并且出现以下错误消息：
g_CS[e] is null 2 background.js:1
receiveCS moz-extension://cbd583bf-c5d9-9f48-a42b-8c3ace7a778b/background.js:1
onconnect_listener moz-extension://cbd583bf-c5d9-9f48-a42b-8c3ace7a778b/background.js:1
e moz-extension://cbd583bf-c5d9-9f48-a42b-8c3ace7a778b/lpfulllib.js:1
apply self-hosted:2159
applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:614
asyncWithoutClone resource://gre/modules/ExtensionCommon.jsm:2428
如果我先将请求存储在变量中，然后将其返回，我只会看到以下内容
made it to getaccessToken authorize.js:85:11
made it to authorize authorize.js:73:11
Promise { "pending" }
<state>: "pending"
<prototype>: PromiseProto { … }. authorize.js:80:11
当我使用创建的auth_url并将其添加为按钮的链接时，它将打开登录屏幕作为新标签。登录后，我会在同一选项卡中获得回调响应，并且在url中可以看到身份验证成功，并且redirect url也是正确的。
所以问题似乎出在我的弹出窗口收到回调的情况下？
这是我的清单json
{
"manifest_version": 2,"name": "Learnify","version": "1.0","description": "Sends the current url to your Learnify account for reading","browser_specific_settings": {
"gecko": {
"id": "[email protected]","strict_min_version": "53a1"
}
},"icons": {
"48": "icons/rrbetterface-48.png","96": "icons/rrbetterface-96.png"
},"permissions":[
"tabs","activeTab","identity","notifications","*://www.googleapis.com/*","*://accounts.google.com/*"
],"options_ui": {
"page": "options/options.html"
},"browser_action": {
"default_icon": "icons/rrbetterface-32.png","default_title": "Learnify","default_popup": "popup/login.html"
},"web_accessible_resources": [
"icons/*.png"
]
}
我的登录html
<body>
<form class="form-signin" action="" method="post" novalidate>
<div class="text-center mb-4">
<img class="mb-4" src="/icons/rrbetterface-96.png" alt="" height="50">
<h4>A Learning Tool</h4>
</div>
<div class="form-label-group">
<input class="form-control" id="username" name="username" placeholder="Username" required type="text" value="">
<label for="username">Username</label>
</div>
<div class="form-label-group">
<input class="form-control" id="password" name="password" placeholder="Password" required type="password" value="">
<label for="password">Password</label>
<p><a class = "small" href="/reset_password_request">Forgot Your Password?</a></p>
</div>
<div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
<div>
<a id = "google" class="btn btn-lg btn-block btn-outline-dark google_sign_in" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="google_logo.png" />
Login with Google
</a>
</div>
</div>
<div class="text-center mb-4">
<p class="mt-4">
Don't have an account?<br>
<a href="/register">Sign up for free</a>
</p>
</div>
</form>
<script src="code.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/authorize.js"></script>
<script src="scripts/userinfo.js"></script>
</body>
我自己的code.js启动身份流程。
document.addEventListener("DOMContentLoaded",function(){
if (document.getElementById("source")) {
browser.tabs.query({active:true,currentWindow:true}).then(function(tabs){
//'tabs' will be an array with only one element: an Object describing the active tab
// in the current window.
var currentTabUrl = tabs[0].url;
var currentTabTitle = tabs[0].title;
document.getElementById("Source").value = currentTabUrl;
document.getElementById("title").value = currentTabTitle;
});
}
// This next part of the code is temporary
document.getElementById('google').addEventListener("click",start);
function start(){
getAccessToken()
.then(getUserInfo)
.then(notifyUser)
.catch(logError);
}
// up until here.
});
授权main.js，userinfo.js与此处的大部分相同：https://github.com/mdn/webextensions-examples/tree/master/google-userinfo
我只是更改了main.js来删除身份流的触发器。
这是一段视频，显示我如何启动流程以及流到混乱为止的程度。
https://www.loom.com/share/fd6c401619f04b1a9d0ac3f78c6a5d1e
和另一个视频，显示了当我直接进入url而不是从扩展名进入url时，似乎从Google服务器获得了成功的响应。
https://www.loom.com/share/915a6671f32d46fb8ead5f04c73a3ff2
我意识到，按照SO标准和社区，这可能不是最好的问题，并且我尝试了很多没有意义的事情，因为它们都不是正确的，或者对更有经验的开发人员。
但是我只是希望有人将我引导到问题所在以及如何学习如何解决该问题。也许有一些关于扩展如何与我未曾见过的浏览器进行通信的重要读物，等等。
如果任何人都知道其他人通过firefox扩展程序实现了google auth的工作示例，请向我展示。最初，尝试将firefox示例不用作后台脚本而是从弹出窗口使用的整个想法可能是错误的。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）