These are general guidelines on how to implement OAuth in a Chrome extension.

Things to note before getting 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:

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.

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:

Here is our popup.js file:

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:

If you were to check your background console, you should see an output like this:

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: 

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:

After the user has logged in successfully, redirect the user to the URL located in the ext parameter with the token attached.

After the redirect is successful, your oauth.js file will be able to send the token back to your background script to store.

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.

You can test this without logging in by grabbing your URL from the background console by calling:

Or by adding example tokens in the URL and pasting the link in your browser:

Congratulations, you have implemented OAuth in a Chrome Extension!