Authenticate your chrome extension user through your web app

Photo by Danka & Peter on Unsplash

There are many ways to authenticate a user in a Chrome extension. In this article, we are going to look at how to send a JWTtoken to a Chrome extension from a front-end web application in order to authenticate a user and be able to make authenticated calls to your API from the Chrome extension.

Chrome extension

The first step is to have a chrome extension to use in this tutorial. You can find the code here for the simple chrome extension used in this tutorial.

We are using the manifest V2 version of the chrome extension.

In our Chrome extension, we have two files, the manifest.json and the background.js file.

In the manifest.json file we have three notable properties and they are described below.

• key: This is used to ensure that we have the same Chrome extension id whenever we install it in our browser.
• background: This property describes the background.js file we added earlier.
• externally_connectable: This property enables us to indicate to the chrome extension which websites we would like to receive data from. FIn this case, we shall be receiving the data from localhost.

To install the extension, follow the steps provided here.

External message listener

In the background.js file we set up an external message listener so that we are able to receive the message(token) that is going to be sent from the frontend application. Below is the code snippet for the listener

chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
    if (request.jwt) {
        console.log('Token ::: ', request.jwt);
        sendResponse({ success: true, message: 'Token has been received' });
    }
});

We provide a callback function to the listener, in the callback, we check if the request contains a jwt if it does we go on the log it out so that we can see it in the console of the background page within the chrome extension. We then send back a response to the sender of the token to let them know that the token was received successfully. Below is a screenshot showing the token in the Chrome extension background console.

At this point, we have gotten the token and you can then store it in the chrome storage or use it to make requests to your API.

Frontend Application

I have also created a simple React application using CRA to be used to send the JWT token to the chrome extension.

Below is the snippet that sends the token to the installed Chrome extension.

const sendTokenToChromeExtension = ({ extensionId, jwt}) => {
  chrome.runtime.sendMessage(extensionId, { jwt }, response => {
    if (!response.success) {
      console.log('error sending message', response);
      return response;
    }
    console.log('Sucesss ::: ', response.message)
  });
}

The chrome API is wrapped in a sendTokenToChromeExtension function. In the function, we use the Chrome runtime API to send a message to the extension by specifying its unique ID and the payload, in this case, the JWT token. If we do not get back a success true which we set in our Chrome extension then we know there is a problem else we console log the response message returned from our Chrome extension. We can then see it in the console as shown below.

Below is the full file snippet that sends the token to the frontend.

This marks the end of the tutorial, thank you for reading.

Send through any feedback in the comments or you can directly reach out to me on Twitter.