DEV Community

Cover image for My first browser extension is now available! The process of creating a new tab replacement for Chrome and Firefox
Luis Augusto
Luis Augusto

Posted on

1

My first browser extension is now available! The process of creating a new tab replacement for Chrome and Firefox

During the month of May, I participated in a Code with Friends event hosted by Mayuko. The goal of the event was to bring developers together and build projects that improved quarantine life.

I love being in the outdoors, and having to comply with shelter in place can make it difficult to experience nature while also being cooped up all day and working from home. Outdoor Inspiration was built as a reminder of what is waiting for us when life returns to normal, and to encourage people to make plans to explore the outdoors. I wanted to inspire people with views of natural wonders while they are unable to experience them in person.

Building a Browser Extension

Alt Text

I used this project as a learning experience for building extensions on Chrome and Firefox. While the initial build is a very simple extension that basically replaces the new tab with a Vue application, I plan to add to this over time and build more features to better integrate it with each browser.

I primarily used the Chrome Extension Guide to build this out initially. For Firefox, I used their Extension Workshop Site to learn about their process, but since I have a very basic extension, I just had to make sure my manifest.json file was compatible with Firefox. Mozilla has a very useful tool called Extension Test which I used to test my Chrome extension, and fortunately it was easily portable over to Firefox.


Building a browser extension can definitely be a daunting task, especially if you want deeper integration with the browser as well as cross-compatibility. If you just want to replace the new tab without all the bells and whistles however, it's as easy as making a manifest.json and packaging it up. I do want to add a few other integrations over time, such as browser syncing and settings which will add another layer of complexity to the app, but will be a great next step for me to learn more about building browser extensions.

Feel free to check out the project on Github and let me know your thoughts!

GitHub logo luisaugusto / outdoor-inspiration

A new tab extension for Chrome and Firefox that displays pictures and descriptions of US National Parks.

Netlify Status

GitHub package.json version GitHub repo size GitHub

Please consider supporting my work and other projects:

Plant a Tree Buy Me a Boba Tea

Outdoor Inspiration

A new tab extension that displays photos and descriptions of US National Parks.

Chrome Firefox
Download Download

The app can also be previewed as a static site here as well as run locally.

Photos from the application are fetched from my galleries in Flickr, and information about the park is pulled from the NPS website.

About the Project

Inspiration

I build this project as part of the Code with Friends event in May 2020, which had a theme of building something to improve quarantine life.

I love being in the outdoors, and having to comply with shelter in place can make it difficult to experience nature while also being cooped up all day and working from home. Outdoor Inspiration was built as a reminder of what is waiting for us when life returns to normal, and to…

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️