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