Blog #1: Extension 101

Date: Oct 29, 2023

Tag: Chrome Extention

Chrome Extension:

If you're looking for a comprehensive introduction to the topic, Google has provided a detailed guide that you can find here. However, for quick reference, here's a concise overview:

What are extensions? - Chrome extensions enhance the browsing experience by adding features and functionality to the Chrome browser.

What should I keep in mind when desinging one? - When you start designing your extension and choosing which features to support, make sure it fulfills a single purpose that is narrowly defined and easy to understand.

How to publish it ? - You can set up a developer account with the Chrome Web Store to host and distribute your extension. Bear in mind that extensions must adhere to the developer program policies.

Web technologies used

• HTML is used as a content markup language.
• CSS is used for styling.
• JavaScript is used for scripting and logic.
• Web platform APIs that let you use virtually any feature available to a standard web page and Chrome extension APIs which is chrome provided extension, with many special-purpose APIs.

Extension files to keep in mind

Architecture overview for the same can be found here.

But the following are some of the most frequently used files:

• manifest: The extension's manifest is the only required file that must have a specific file name: manifest.json. It also has to be located in the extension's root directory. The manifest records important metadata, defines resources, declares permissions, and identifies which files to run in the background and on the page.
• service worker:The extension service worker handles and listens for browser events. There are many types of events, such as navigating to a new page, removing a bookmark, or closing a tab. It can use all the Chrome APIs, but it cannot interact directly with the content of web pages.
• content scripts:Content scripts execute Javascript in the context of a web page. They can also read and modify the DOM of the pages they're injected into. Content Scripts can only use a subset of the Chrome APIs but can indirectly access the rest by exchanging messages with the extension service worker.
• popup and other pages:An extension can include various HTML files, such as a popup, an options page, and other HTML pages. All these pages have access to Chrome APIs.

Developing the "how to" intuition for extension

Helpful tutorial to get your hands dirty :

• hello world in the world of extension.
• Reading time: To insert an element on every page automatically.
• Focus Mode:To run code on the current page after clicking on the extension action.
• Tabs Manager: To create a popup that manages browser tabs.

Debugging a extension

Extensions can access the same Chrome DevTools as web pages. To become an expert in debugging extensions, you will need to know how to locate logs and errors of the different extension components. This tutorial provides fundamental techniques for debugging your extension.

Using TypeScript ?

We can use the npm package chrome-types to take advantage of auto-completion for the Chrome API. This npm package is updated automatically when the Chromium source code changes.