How to Build an API-Based Chrome Extension

To simplify our work and save time, we use countless browser extensions. There are thousands of browser extensions in the marketplace. Sometimes we didn’t find the extension that we are looking for. Did tried to make any browser extensions ever? If so, Did you work with API? It’s quite tricky to make an API project for a browser extension. No worries, I will show you, how to build an API-Based Chrome Extension.

Since last year, I have developed many Chrome extensions for me and my office. All of them are API based, from one of them is Login Me Now. I will share about this Chrome extension, how I developed and what were the difficulties to make it.

Folder Structure

Here is a sample Chrome extension folder structure.

Create manifest.json

In browser extension projects everything is powered up from the manifest.json you have to configure it as per your requirements. here is an example of a real-life API-based Chrome extension manifest.json.

{
  "manifest_version": 3,
  "name": "Login Me Now",
  "version": "1.3.0",
  "author": "HeyMehedi",
  "description": "A time saver instant login app for WordPress Websites",
  "icons": {
    "128": "images/icon.png"
  },
  "action": {
    "default_icon": "images/icon.png",
    "default_popup": "index.html",
    "default_title": "Login Me Now"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline';"
  },
  "permissions": ["storage", "scripting"],
  "host_permissions": ["http://*/*", "https://*/*"],
  "content_scripts": [
    {
      "matches": ["http://*/wp-admin/*", "https://*/wp-admin/*"],
      "js": ["scripting.js"]
    }
  ]
}

“manifest_version” the current version of Chrome extension manifest is 3

“name” is Your extension name.

“version” is the Current version of your extension.

“author” Extension author name.

“description” Write your extension short description

“icons” Your extension icon, that will display on the icon panel like this

“action”

• “default_icon”: “images/icon.png”,
• “default_popup”: “index.html”,
• “default_title”: “Login Me Now”

“content_security_policy”

“permissions”

“host_permissions”

“content_scripts”

Storing Data in Local Storage

There are different ways to store data in an extension storage.