Where to start when learning to create chrome extensions?

@alexjvale, Many people have already redirected you to good resources to learn. I just wanted to share a story:

One of the Alums from my University, Abhinav Asthana, started a hobby project to deal with APIs dev during his university years. The project was an opensource google chrome extension. Just after his graduation, he started a company around it called POSTMAN. You might have heard it if you deal with REST APIs or backend. It is a fast-growing startup. I just wanted to tell you that you are on the right track and if you focus on solving real problems for people out there, you can create something awesome like this. I hope you create something great and I would love to be your first user!!

Any extension that you have installed is located on your computer, ready for your code inspection.

Stack Overflow will tell you where they are.

From there, consult the docs, and just dive deep into the code to see how they do things.

When I developed my first extension, I installed a few that had similar functionality to what I wanted to build and went on a source code safari :D

Try to find an open source chrome extension that is similar to your idea and build off that.

I built a chrome extension some years ago. best place to start (an you kinda have to) is chrome docs here: https://developer.chrome.com/extensions/getstarted

the rest you will learn by doing. so just start and each whenever you get stuck, google it there are ton of tutorials and articles

Keep in mind that google's extension policies change according to what google think its fair. You might end up building something that will not survive long.

I've built my first Chrome extension for a client few months ago, that's supposed to record screen and generate a gif. I only needed official chrome extension documentation for set up and general functionality and then stack overflow for specific issues.

Hello @alexjvale,

I was asking myself the same question a month before, now I have my extension on chrome, firefox, and edge!

Finally, it's quite easy is just another web project with a specific architecture. The main advice I can recommend you, if you want to spread to another browser is to check the possibilities off each platform to don't waste time and refacto the code later. It loses time in this case because chrome was allowing something that is not possible in firefox.

What I can recommend is to use from the beginning

• webpack-chrome-extension-reloader, at the beginning you can think it's not worth it, but it is! You don't imagine the time I lost to build and refresh my extension...

• browser-polyfill, to spread to other browsers

• clean your css element from your root tag and after generate css class name to don't, unfortunately, extend the website style. (You will understand later 😂😂😂)

Personally I use React because I am used to it from years now,

You can check my work at https://www.kelyst.com and give me some feedback, also feel free to contact me if you have any question, I can probably help you in this case.

PS: You need a strong understanding of the permission system, if you use a stronger one than you should the store verification can take weeks, and reject the submission.

I have went through quite a journey when building https://datamask.tech Chrome extension. You can send me a DM on Twitter once you are past the basic project setup. Some quick tips:

• As suggested by others, read Chrome extension API docs. Knowing what you can do is the first step
• You can go a long way with just JavaScript, HTML and CSS. Skip Webpack, React and TypeScript until you need it. Once your codebase becomes large switch to TypeScript
• Get familiar with background page, content scripts and how to send messages between them
• If you plan to make your extension paid, build your own licensing. Licensing flow provided by Google is just plain stupid and will force you to require permissions which you would not need otherwise (Storage, Identity). I have started with default licensing flow and now built a custom system for business volume licensing
• If you can, avoid building overlay UI on the website, use extension popout window instead. This will save days of work
• If you need to build UI on top of websites, use very specific CSS selectors and rules. Also test on multiple websites and harden your CSS based on findings. Your CSS is competing with website CSS rules for specificity
• Put your extension settings in an options.html page. See options_page manifest property
• Only use the must have permissions and be overly specific what your extension does and how the permissions are used. This will save a lot of time when going through Web Store review process
• Provide some functionality out of the box without requiring login or purchase. This will make Web Store review process easier and reduce user "bounce"

I just spent a bunch of time building one ( https://ticktabs.com ). The trickiest thing to get your head around is the passing of messages from a page the user is on, your background script, and the UI of your extension. The background script is the glue that kind of holds the whole thing together.

Get yourself familiar with https://developer.chrome.com/extensions/messaging

Secondly, the manifest.json file is where all your configuration happens including permissions you want access to. You need to make sure you don't ask for every permission if your extension doesn't need it. The Chrome Extension team will reject your extension if you do that.

More than happy to help if you want to send me a message. If you install mine, you can look at the source code and see how I pulled mine off.