Developing a Browser Extension – What are some good resources?
Hey!
I am currently working on the idea of creating a browser extension. The design is almost done. So right now I am searching for some good resources to learn more about the development of browser extensions. I already gathered some information like, most of the extensions are built using HTML/CSS. But currently, I am looking for more specific tutorials or guides for beginners. I know about the basics of HTML and CSS. But I want to strengthen my core knowledge about programming, so this would be a nice opportunity to get more into detail.
If you have any suggestions where to start as a beginner, what tutorials might come in handy, and where I find good resources and guides, which would be helpful for my journey, I would highly appreciate it if you could give me some direction.
Also, one question: I know that it is not that hard to transform an already existing Chrome extension to Firefox. Therefore my question would be, if it would be better to start with a Chrome extension and after that transforming it to Firefox or just build two "native" extensions for both browsers separated?
Thank you in advance for your help!
I would first start with going through the Getting Started Tutorial and building an example app so you can get an idea of the underlying elements of a browser extension. https://developer.chrome.com/extensions/getstarted
Once you get that finished, you can then use it as a template, replacing the elements of the example app with your idea, and then work to getting the functionality working.
That is a great start, thank you @10xRich
Do you if there is any place like codepen but for browser extensions, where I can look into different code examples?
Sorry, not sure.
But there are plenty of solved stackoverflow questions that answer common problems.
Good luck on building your idea
Hey I built two chrome extensions about a year ago. Definitely build for Chrome first as there are way more users on Chrome than Firefox. Additionally there are only a few minor adjustments you have to make to make an extension compatible with Firefox if it already works for Chrome. Here's a freecodecamp article that might be helpful to you: https://www.freecodecamp.org/news/how-to-create-and-publish-a-chrome-extension-in-20-minutes-6dc8395d7153/
Also what does your chrome extension do? You will probably need to know some basic javascript to get it working. Hope this is helpful :)
Hey @toshvelaga thank you for your suggestion and the article, sounds great, this might be a good headstart!
I am familiar with the basics of Javascript, but the main purpose of this project is to dive into learning to code more and more. :)
In conjunction with the Chrome docs, consider MDN as well: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
MDN is worth checking out for every single web dev question. I can't recommend it enough.
Browser extensions are pretty well standardized by now. There's a good chance that your extension will work on Chrome and Firefox. See MDN for more information on that.
MDN also contains links to Github repos if you want to check out the code. Or just take this one: https://github.com/mdn/webextensions-examples
Those examples are great to get started since they illustrate one single thing at the time.
Have fun!
Love that, thank you @b2m9 for this suggestion.
This has a great structure to follow along every single step. I will definitely look into this one more precisely.
Thank you!