How to Implement OAuth in a Chrome Extension

overview these are general guidelines on how to implement oauth in a chrome extension things to note before getting started the permissions of the token you will be sending from your server must be safe enough to be exposed publicly this method only verified to work with chrome, firefox, and safari desktop extensions safari on ios has special security precautions when redirecting to a non https protocol, so this method will need some modifications to work on safari for ios ideally, you would use the native ios app to handle logins for your extension to fully understand this tutorial, some knowledge of how chrome extensions work is required please check the documentation https //developer chrome com/docs/extensions/mv2/ for basic information on getting a chrome extension set up and how they work the v2 manifest version is used in the examples here is the example code used in this tutorial https //archbee doc uploads s3 amazonaws com/wthfaksfl2gjn63 tet7t/ihbcd2nvgm6q6aoc2p86i oauth example zip get started here is a basic layout for a chrome extension, yours will probably differ the first step in this process is creating an html page that your server will redirect to this html page will be hosted within the extension itself, not on a server, which helps maintain a secure environment the common pattern that we see is having the html page display a loading screen while your js file parses the url to grab the token passed back from your server here are the example pages we have created oauth html oauth html loading loading oauth js oauth js // example url \<https //examplelogin com?access token=token&=refresh token=token> const url = new url(window\ location href); const accesstoken = url searchparams get("access token"); const refreshtoken = url searchparams get("refresh token"); chrome runtime sendmessage({ type "oauth token recieved", payload { accesstoken, refreshtoken, }, }); update your manifest json and specify your oauth html file, so it can be accessed as a resource you will also need the “tabs” permission for the later steps manifest json { "manifest version" 2, "name" "example", "description" "example", "version" "1 0 0", "background" { "scripts" \["background js"] }, "content scripts" \[ { "js" \["content js"], "matches" \["\<all urls>"] } ], "web accessible resources" \["oauth html"], "browser action" { "default popup" "popup html", "default icon" { "16" "images/toolbar icon 16 png", "19" "images/toolbar icon 19 png", "32" "images/toolbar icon 32 png", "38" "images/toolbar icon 38 png" } }, "permissions" \["tabs"] } request the token now that we have built out the pages to receive the token, we can work on requesting the token let's add a login button to our popup html file, so we can use the background script to navigate to our hosted login page here is our popup html page popup html login &#x9;&#x9; here is our popup js file const button = document queryselector("button"); button onclick = () => chrome runtime sendmessage({ type "oauth token request", }); this will create a simple html page that displays when you click the icon in your browser now, when we click the login button, it sends a message to that background script to request the oauth token we must modify our background js file to handle the request chrome runtime onmessage addlistener(({ type, payload }) => { switch (type) { case "oauth token request" &#x9; const oauth = chrome runtime geturl("oauth html"); const exampleloginpage = "\<https //examplelogin com>"; // < replace this with your login url const url = new url(exampleloginpage); url searchparams append("ext", oauth); console log(url tostring()); break; } }); if you were to check your background console, you should see an output like this \<https //examplelogin com/?ext=chrome extension%3a%2f%2fjiaieifpmjjbmaghajbhhppmhfgbikpp%2foauth html> note example link will be replaced by your login url we can continue by calling chrome tabs create to open the login page while passing the auth page as the query parameter chrome runtime onmessage addlistener(({ type, payload }) => { switch (type) { case "oauth token request" const oauth = chrome runtime geturl("oauth html"); const exampleloginpage = "\<https //examplelogin com>"; // < replace this with your login url const url = new url(exampleloginpage); url searchparams append("ext", oauth); chrome tabs create({ active true, url url tostring(), }); break; } }); when the user clicks login, it will open your login page after the user has logged in, the parameter will be forwarded to your backend it's important to do some validation with the ext parameter for example if (!req query ext startswith('chrome extension')) { &#x9;res status(400) send() } option #1 send access token after the user has logged in successfully, redirect the user to the url located in the ext parameter with the token attached const url = req query ext + `?access token=${accesstoken}\&refresh token=${refreshtoken}` res redirect(url) store the token after the redirect is successful, your oauth js file will be able to send the token back to your background script to store chrome runtime onmessage addlistener(({ type, payload }) => { switch (type) { case "oauth token request" const oauth = chrome runtime geturl("oauth html"); const exampleloginpage = "\<https //examplelogin com>"; // < replace this with your login url const url = new url(exampleloginpage); url searchparams append("ext", oauth); chrome tabs create({ active true, url url tostring(), }); break; case "oauth token recieved" const { accesstoken, refreshtoken } = payload; console log("recieved ", accesstoken, refreshtoken); break; } }); option #2 send tracking code alternatively, you can send the tracking code you would like used for the user directly, avoiding the oauth flow the uuid is the only value required by the extension so things can be simplified by just providing the extension with the uuid that should be used as the tracking code const url = req query ext + `?uuid=\<tracking code>` res redirect(url) you can test this without logging in by grabbing your url from the background console by calling chrome runtime geturl("oauth html") or by adding example tokens in the url and pasting the link in your browser congratulations, you have implemented oauth in a chrome extension!