DEV Community

Cover image for 5 Ideas to set your portfolio apart
Paula Santamaría
Paula Santamaría

Posted on

5 Ideas to set your portfolio apart

Tired of building TO-DO lists and e-commerce sites? One of these Chrome extension ideas could help you set your portfolio apart! 👩‍💻

All you need to know to build your first Chrome Extension is the basics of HTML, JavaScript, and CSS! These are a few fun ideas I came up with that can be created using only those technologies.

If you're having doubts, check out my video Creating a simple Chrome Extension in 2 minutes.

1. Dark mode for your favorite website

Dark mode icon - The moon, some clouds and a few stars in the sky

Do you regularly use a website that you love but doesn't have dark mode?

With Chrome extensions, you can create your own CSS stylesheet that overrides some styles in a particular website. This allows you to apply dark mode styles over the website when your extension is enabled.

To achieve that, you should use Content Scripts.

Tip: Set "run_at": "document_end" in the content_scripts object in the manifest.json so your styles override the site's.

For this project, you'll need to learn about:

2. Weather App

Weather icon - A cloud, rain and the sun behind it

You could create an extension that shows the current weather for a particular location on your browser.

You'll need to call an API to retrieve the weather info: OpenWeatherMap API is a good option. They have a free plan.

Get the latest weather updates every few minutes in the background using an alarm from the chrome.alarms API handled by a Service Worker.

Store the results using the chrome.storage API and display them in your extension's Action Popup.

To call the API, you can use fetch, and you'll need to add something like the following to your manifest.json:

"host_permissions": ["https://some-weather-api.com/*"]
Enter fullscreen mode Exit fullscreen mode

For this project you'll need to learn about:

3. Show today's calendar.

Calendar icon - A calendar with a clock

You could get easy access to your Calendar events for the day, showing them in your Browser through an Extension.

As with the previous idea, you'll need to get the data from an external API (Google Calendar's or your favorite calendar API) every few minutes in the background using an alarm from the chrome.alarms API and a Service Worker.

You'll also need to store the results of the API request using chrome.storage. Remember that Service Workers can be unloaded when the extension goes idle, so you can't just store the calendar events in a variable declared in your Service Worker.

Display the events with their title, time, guests, etc., in your extension's Action Popup.

You can also use chrome.notifications API to show a message to the user a few minutes before the event.

For this project you'll need to learn about:

4. Daily coffee

Coffee cup icon - A coffee cup with coffee

Show the user a random coffee recipe to try every day.

In this case, you don't need to call an external API (at least at first). You could just store a list of your favorite recipes in a JSON array in your extension and use a Math.random() to get a random item from the array every day.

Display the coffee recipe with a nice picture in the Action Popup.

To make it more robust, you could use chrome.storage to store the last coffee recipe shown and the date to make sure of two things:

  • A single coffee recipe is shown every day.
  • We don't get the same recipe two days in a row.

For this project you'll need to learn about:

5. E-Commerce wishlist

Wishlist icon - A page with a list of items and a heart

Allow users to add products from Amazon, eBay, etc., to their wishlist: When a user finds a product they're interested in, they add it to their wishlist using a keyboard shortcut or from the Action popup.

The Action popup also shows the previously added items and allows the user to remove them.

The user should also be able to navigate to each product page in case they want to buy it. For this, you should use chrome.tabs.create.

You'll need to store links, name, and price for each product using chrome.storage API.

For this project you'll need to learn about:


I hope this post was helpful and inspires you to work on your next project! If you're interested in learning about Chrome extensions, check out my series about it where I create a simple chrome extension and gradually improve it. At the same time, I explore most of the chrome APIs and concepts required to build the ideas mentioned in this post.

You can also check out my video Creating a simple Chrome Extension in 2 minutes to get a grasp of the process.

Icons by Smashicons & Freepik on Flaticon.com

Top comments (6)

Collapse
 
chan_austria777 profile image
chan 🤖

Awesome cool ideas. Thanks for sharing. I wonder is there a community specifically for browser extension developers?

Btw, Is there a way to write a browser extension that is cross-browser from the start?

Collapse
 
paulasantamaria profile image
Paula Santamaría

Hey chan, that's a great question! I haven't tried it yet but I have this link that should be useful: Build a cross browser extension - MDN

Collapse
 
devoskar profile image
Oskar Pietrucha

I really like these ideas and I'm going to implement them for myself. Looks like a small, not really time-consuming tasks which can be fun activity after work!

Collapse
 
paulasantamaria profile image
Paula Santamaría

I'm glad you liked them, Oskar! One of my goals for each of these ideas was to make them as simple and atomic as possible, so they can provide value without too much or too complex code. Thanks for noticing :)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

These are all cool projects that offer much to learn, but honestly, I doubt any of them sets a portfolio apart. I wouldn't really pay much attention to any of them when scrolling through the portfolio.

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks for sharing your opinion!

I thought about this post as a way to encourage beginners to build something different that requires the same tools they usually use. I've reviewed portfolios from beginner candidates for companies. You see a lot of the typical websites (e-commerce, planners, etc). But you don't usually see Chrome extensions, for example. That's why I thought this kind of project would make a difference. I'd certainly find it interesting, at least.