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

For storing user data, Chrome provides the chrome.storage API, which offers both local and sync storage areas. Here’s how you can use it:

Saving Data:

chrome.storage.local.set({ key: 'value' }, function() {
  console.log('Data saved');
});

Retrieving Data:

chrome.storage.local.get(['key'], function(result) {
  console.log('Data retrieved:', result.key);
});

The local storage area is ideal for storing data that doesn’t need to be synced across devices, while sync storage allows data to be synchronized across all devices where the user is signed in.

Testing Your Extension

To test your extension locally:

  1. Open Chrome and navigate to chrome://extensions/.
  2. Enable “Developer mode” by toggling the switch in the top-right corner.
  3. Click on “Load unpacked” and select your extension’s directory.
  4. Your extension should now appear in the list, and its icon should be visible in the Chrome toolbar.

You can now interact with your extension and test its functionality.

Publishing Your Extension

Once you’re satisfied with your extension:

  1. Navigate to the Chrome Web Store Developer Dashboard.
  2. Click on “Add a new item” and upload a ZIP file of your extension’s directory.
  3. Fill out the required information, including a detailed description, screenshots, and pricing (if applicable).
  4. Click “Publish” to make your extension available to users.

Remember to adhere to Chrome’s extension policies to ensure a smooth review and approval process.

Best Practices

  • Manifest Version 3: Always use the latest manifest version to ensure compatibility and access to the newest features.
  • Content Security Policy: Define a strict content security policy to protect your extension from malicious content.
  • Permissions: Request only the permissions your extension truly needs to minimize security risks.
  • Testing: Thoroughly test your extension in different scenarios to ensure it functions as expected.
  • User Feedback: Encourage users to provide feedback and reviews to help improve your extension.

Useful Resources