I'm trying to make a firefox (and later chrome) extension that authenticates with google.
I was following the steps outlined here: https://github.com/mdn/webextensions-examples/tree/master/google-userinfo
And when I follow their format, everything works as intended. But their example launches the identity flow as soon as the toolbar button is clicked.
I'm trying to adapt it to work from a dropdown popup that also shows my own apps un:pw login, and then an option to sign in with Google.
When I launch the identity flow from the popup, everything works up until receiving the callback after sign in.
The app opens a popup, I sign in, the popup closes, and nothing in the code continues and I get an error message with the following:
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
And if I first store the request in a variable, and then return it, I only see the following
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
When I take the created auth_url and add it as a link to the button, it opens the sign in screen as a new tab. Then on sign in, I get the callback response right in the same tab, and I can see in the url that the authentication was successful and that the redirect url is correct too.
So the issue seems to be something going on with my popup receiving the callback?
Here's my manifest 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": "learnbetter@example.org",
"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"
]
}
My login 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>
My own code.js which starts the identity flow.
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.
});
And the authorize, main.js, userinfo.js are mostly the same as here: https://github.com/mdn/webextensions-examples/tree/master/google-userinfo
I just changed main.js to remove the trigger for the identity flow.
here's a video showing how i'm initiating the flow and how far it gets until messing up.
https://www.loom.com/share/fd6c401619f04b1a9d0ac3f78c6a5d1e
and another video showing what seems like a successful response from google servers when I just go to the url directly and not from the extension.
https://www.loom.com/share/915a6671f32d46fb8ead5f04c73a3ff2
I realize that this may not be the best question according the SO standards and community, and I've tried a number of things which it doesn't make sense to share as none of them were likely correct or would make sense to more experienced developers.
But I'm just hoping for someone to direct me to where the problem is and how I can learn how to troubleshoot it. Maybe there's some critical reading on how extensions communicate with the browser that I didn't see, etc.
If anyone knows of any working examples where other people have implemented google auth from a firefox extension, please show me. Maybe the whole idea of trying to use the firefox example not as a background script but from a popup was wrong to begin with.