10 Things Every Chrome Extension Needs

Just getting started with building a Chrome extension? Make sure you've got these covered.

1. An SEO-friendly name

The extension name is a terrific opportunity for search engine optimization. Your extension's listing on the Chrome Web Store will rank very high if it contains the exact search phrase. The ranking within the Chrome Web Store itself will also greatly depend on keyword matches.

{
  "name": "ChatGPT Assistant"
}

The "ChatGPT Assistant" extension ranks #1 for that exact search, even though there are a significant number of apps and GitHub repositories with similar names.

2. An efficient description

This is your change to describe in one sentence what the extension has to offer. It is also a secondary opportunity to include additional search keywords.

{
  "description": "Use ChatGPT in search engines, to write emails, and on any website"
}

The extension description appears as the subtitle in Chrome Web Store search results.

3. A post-install action

Right after a user installs your extension, what then? They need to be told what to do next. This is a perfect opportunity to kick them over to an extension-rendered page. There, you have a full extension-controlled webpage to welcome them, give instructions, and prompt for a signup or login.

The simplest way to accomplish this is to create an options page. Often, the options page will be used as a full single page application, allowing for routing. You can programmatically direct the user over to the options page after an INSTALL event:

chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {     
    chrome.runtime.openOptionsPage();
  }
});

4. An uninstall URL

After a user uninstalls your extension, that's it - your extension has no ability to send analytics events. However, you can direct them to a URL of your choice. The best use of this URL is to allow them to reach out or provide feedback. An easy way to take advantage of this is to link to Google Forms and collect anonymous feedback.

chrome.runtime.setUninstallURL("https://buildingbrowserextensions.com");

5. A popup page

Your extension gets a button in the browser toolbar no matter what, so you might as well make it do something. Users are accustomed to interacting with these extension toolbar buttons, so this is a good fallback location for placing instructions in case the user doesn't understand how the extension is supposed to work.

{
  "action": {
    "default_popup": "popup.html"
  }
}

Clicking the extension's toolbar button opens the popup page.

6. A snazzy icon

Sounds obvious, but a good icon makes all the difference. Chrome Web Store search results and the toobar button both greatly benefit from a great icon that looks good large and small. 16x16, 48x48, 64x64, and 128x128 are all you need.

{
  "icons": {
    "16": "icons/codesearch_16x16.png",
    "48": "icons/codesearch_48x48.png",
    "64": "icons/codesearch_64x64.png",
    "128": "icons/codesearch_128x128.png"
  }
}

7. Screenshots and promo videos

A handful of high-quality screenshots and a short YouTube promo video are an easy way to give the user an idea of what your extension does. A Chrome Web Store listing looks barren without them.

Screenshots should not be cluttered, and text within them should be large and easy to read. A subtitle overlay describing what a screenshot is showing is often helpful.

8. A dedicated URL

Acquiring a URL for your extension is a cheap and easy way to improve its appearance. Most URLs are less than $10/year, and you can have it redirect to a GitHub repository or some other makeshift homepage.

Adding a URL for your extension greatly enhances the appearance of the search result.

9. Analytics

How are you supposed to know what happens after a user installs your extension? Analytics tools!

Sending analytics from a content script is a bad option. The host page's content security policy may block the scripts or outgoing requests, or adblockers might kill them. Analytics events will need to be dispatched from either a controlled extension page (popup, options, devtools) or the background script. One important advantage: Adblockers cannot block analytics requests sent from extension pages or background scripts! This means your extension analytics will have close to 100% accuracy.

Google Analytics and Amplitude are two good solutions, although they require some manual setup. Remember: in manifest v3, you cannot load remote scripts - they must be included with your extension!

• Google Analytics

• Amplitude

Note: refer to the Example Chrome Extension for a full demo of setting up Google Analytics.

10. A support email

No extension is perfect, and users will want a way to get in touch with you. Set up a free Gmail account for your extension, and include it both in the extension's listing as well as somewhere in the extension itself, such as the footer of the popup.

---