Auth External Communication

You want to add authentication to your extension and you already have a web app.

Install

Before you add external-auth, ensure you have the initial extension setup. If you have not done that first initialise and then comeback here.

npx ChromeKit-Org/cli add external-auth

How it works

To authenticate users in your extension, you will redirect the user to your web app's authentication page. You can do this by sending a message from your content script chrome.runtime.sendMessage({ type: "login" }) which will be picked up by the message listener in background.js and in the background script we create a new tab with the web app's authentication page. (The message listener and the code to create new tab from background script will be added by ChromeKit).

If users are already authenticated in your web page, send the auth token to your extension using external messaging. If the user is not logged in, let them login to your web app first and then send the auth token to your extension.

chrome.runtime.sendMessage(extensionId, {authToken: "Auth token from web app"}, function(response) {
  console.log("Response:", response);
});

In extension/background.js you will find a external message listener. This is where you will receive the auth token from your web app. Store the received token in the local storage and use it to make your API calls to your authenticated endpoints.

Update the externally_connectable key in manifest.json to your site from where you will be making the above chrome.runtime.sendMessage(extensionId ...) call.

"externally_connectable": {
    "matches": [
      "http://localhost:3000/*"
    ]
  }

Note: Your endpoints should have cors enabled and should allow requests from any origin. This is true even when you are making API calls from background scripts from your extension.

How to get your extension id?

How to get extension id?