Getting Started With Chrome Extension Development - Part 1

I think that learning to make chrome extensions can be be useful, So in this series of posts I’ll document everything I learn about chrome extensions.

if you are a web developer then learning to make chrome extensions can be relatively easy…because then extension is just a bunch of html, css and javascript files.

So, lets dive into the details.

These are the main components of an extension.

manifest.json

This is a file that is required by the browser to know about all other components of the extension.

To put it simply, this file contains an entry of every other file in the extension.

Service Workers

These are javascript files that are used for handling various events that the extension is interested in.

These files have access to Chrome API but they cannot modify the contents of the page(tab) in which the extension is running.

Content Scripts

These are also javascript files that can read and modify the content of a page, for example if I want to create a bar chart of the number of words in a tab, I would try to use a content script

HTML Files

these files are used to show the popup panel, settings page and any other pages for an extension.

as far as I understand content scripts have limited or no direct access to Chrome API but it can communicate with a service worker to access the Chrome API

End Notes

I hope this was useful, I made this post based on what I thought would be the most important things to get started.

There will be more articles in this series, with practical examples and fully developed extensions.