loading...
Cover image for 15+ Chrome extensions you should have in your pocket.

15+ Chrome extensions you should have in your pocket.

tracycss profile image Jane Tracy πŸ‘©πŸ½β€πŸ’» ・Updated on ・8 min read

This week I was looking at the chrome extensions that I have used so far and have been helpful in my journey. I love how some apps that I use also have chrome extensions with the same functionality. It reduces the hustle of downloading the app itself on my laptop. There are more common extensions like momentum, Json viewer, Octree, etc that most developer uses. But I will list others that are not that extremely popular but I love how efficient they are in my daily dev routine. I will also like to mix up both design and dev extensions that might be helpful to you.
All the extensions I will list down are free and very useful. At times I can't believe how efficient they are yet you get them free. That's why I love open source contribution, it's a way to give back to these amazing developers.

happy gif

Top 12 extension that you should add to your list

1) Wave for accessibility

This amazing extension evaluates your website and tells you the accessibility issues that you have. Through this tool, you can know whether your site is accessible or not. Plus it directs you to the code with the issue and gives you a detailed explanation of the issue. On top of this, it gives you links to articles for accessibility standards and guidelines for that specific error.
This tool helps me when I am involved in any open source projects and I can write many issues such as contrast errors, missing labels, same alt text in images, etc. Also helps me analyze someone's website upon request for a portfolio review. It would be awesome when you go to a job interview and tell the company about how the team should use it to improve accessibility in their site(They will see you as a great junior developer, I promise).

Wave in action on smashing magazine

2) Mercury Reader

Mercury Reader removes ads or any other distractions and leaves the text and images for a more focused reading on any website. Plus you can send the post straight to your Kindle if you want to. Just click send to Kindle link at the top of the blog post.
This extension is one of my favorites extensions because I love reading through design or tech blogs in the morning. For many devs reading blogs like the smashing magazine or hacker news is a great way to know what's new. With this tool, you can now read through blogs without been interrupted by ads. Now my reading process is smoother and more enjoyable.

A blog post I was reading in smash magazine
Smashing Magazine blog post

When I used Mercury Reader
Mercury reader on a blog post

You can click the setting icon at the top right and customize it. Change the font size, Typography, or theme.

Customize Mercury Reader

3) Dark Reader and Midnight Lizard

From the name itself, the Dark Reader Chrome extension turns any website to a dark mode theme. This is a great way to take care of your eyes especially during the night. But for me I use it 24/7, haha I don't like the brightness of websites whether day or night. (No, I ain't a vampire, haha 😁)
Midnight Lizard is also similar to Dark Reader but it more customizable with multiple different color themes.

Smashing Magazine with Dark Reader
Dark reader on smashing magazine blog post

Midnight Lizard custom settings
Midnight Lizard on smashing Magazine

4) Go full page screen capture

This extension takes high-quality screenshots of the whole website. I use this tool when I want to collect design inspiration from different websites. I put them in my Figma canvas to see what I can pick for my personal projects. Also, It's a great way to take images of your projects to add them to your portfolio or social media account.
Go full page screen capture

5) Take Webpage Screenshots Entirely - FireShot

This extension captures, edits, and saves them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote, clipboard, or email. This has more functionality on how to capture specific areas of the website. I have used this tool a lot this month during Hackoberfest. It's useful When creating front-end issues on projects or when creating a pull request and showing my changes. People seeing something visually is always preferred than just plain text.

Take Webpage Screenshots Entirely - FireShot example

6) Focus To-Do: Pomodoro Timer & To Do List

This is a Task management chrome extension that helps you to be more focused and motivated in your daily workload. If you want to use it on your computer without downloading the actual app itself, this extension will be done. It has the same functionality as the desktop or mobile app. You can create projects that you are doing and set time to take breaks. Whether it's after every 25 minutes or 40 minutes. The extension is free for basic usage but you can pay the premium package if you want.

Focus To-Do chrome extension

7) Loom for Chrome

This extension is great for making video messages to your team or for project collaboration with a friend. It's also used for making coding reviews or showing your clients how to solve small issues on their website. The good thing about it, you can customize it to your needs. Whether it's recording the full desktop, the current tab only, or choose to use the video camera or audio-only.

Loom for chrome extension

8) Image downloader

From the name itself, the extension helps you download images from any website you want, plus it's free and open source. When you want to get images individually or in bulk this will be a great tool. I have used it when I want to code websites I love using, just to improve my front-end skill. Have the images that exactly look like the website you are cloning with great.

image downloader in action

9) Read Aloud

This extension read out the text on any website with just one click. When you want to read your blog but you also want to work on code, this tool will be useful. It will read the blog for you in the background as you continue writing your code. Even as I write this blog, I am using it to read out some articles on smashing magazine and Dev to. You can customize the voice, speed, pitch, volume, etc.

I am now listening to A complete beginner guide to React by Hemant Joshi
Read Aloud on DEV.to

10) Get Pocket

This extension helps you to save your favorite videos or articles you come across on the web. Plus you can organize them using tags to make it easier to find them in one place.

Inside Get pocket extension

11) CSS Peeper

This extension is a CSS viewer that lets you inspect the styles used in the site. You can also view the colors used on the website or the assets such as images or icons.

Inspect the styles
Css peeper inspect

Colors used in the website
Css Peeper to get colors

Assets used
Css Peeper to get the assets

In conclusion

There are so many extensions I have not listed but are very effective. The list will be 20 + extensions, haha. But I will do part two of efficient productivity tools that I use. Other extensions I use that are very common are:

  • whatfont - Inspect the font family or font-size used
  • Color pick eyedropper- zoomed color picker for websites.
  • Momentum - Replace a new tab page with a personal dashboard featuring to-do, weather, and inspiration.
  • JSON Viewer -
  • Grammarly- Grammarly helps you eliminate writing errors and find the perfect words to express yourself.
  • Daily Dev- This is the fastest way to get news on what's new in the tech sector. Plus I love the User experience of the extension for sure.
  • Lorem Ipus Generator - Generates lorem ipus text easily.
  • Lighthouse - Improves the performance of your website by giving you guidelines that you can improve on.
  • Web developer checklist - Analyses any web page for violations of best practices.
  • Octotree - Used for Github exploration and code reviews.
  • Wappalyzer- It shows you what the website is built on.

Hope you go new tools to help you out and be more efficient and productive. Share your favourite extensions that are not on the list. I will love to take a look at them. πŸ’–βœ¨

UPDATE: I have removed The great suspender from the list. Take a look at this link for more details. Thank you Entio for telling me about this.

relaxing girl gif

If you find this post useful share it with your peers or beginners who learning code and might find these extensions useful to their journey. You can also buy me coffee. πŸ™‚

Buy Me A Coffee

Discussion

pic
Editor guide
Collapse
nimrodkra profile image
Nimrod Kramer

Have you tried daily.dev? We'd love to hear what you think about it and perhaps add it to your list :)

Collapse
galelmalah profile image
Gal Elmalah

it's great! I'm using it for about 3 years I think (maybe 2).

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I have been using it for a month or so. It has been great as well.
Learning a lot.

Collapse
muuvmuuv profile image
Marvin Heilemann

Looks good, I will give it a go, but why am I auto opt-in into analytics? There was a banner which I closed through the X but it still opt-in, please add a reject button and read more about GDPR. Or consider using something like simpleanalytics.com/.

Collapse
nimrodkra profile image
Nimrod Kramer

Did you install on Chrome or Firefox?

Thread Thread
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Chrome browser. I use it more often than firefox.

Thread Thread
muuvmuuv profile image
Marvin Heilemann

Sorry, I meant the website not the extension

Collapse
muuvmuuv profile image
Thread Thread
nimrodkra profile image
Nimrod Kramer

Thanks for the feedback. We will take a deeper look into it :)

Collapse
dhruvgarg79 profile image
Dhruv garg

Loved daily.dev, just installed it. Can we remove it from the new tab and only see it when clicked on the extension button. I would really like the option to remove it from the new tab.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yeah, I do.
Let me update it on the list. πŸ™Œ
Daily.dev and smashing magazines are amazing resources.

Collapse
nimrodkra profile image
Nimrod Kramer

Thanks πŸ€—

Collapse
ibrokemycomputer profile image
Josh Martens

I try not to load too many extensions in my browser, but like some of the suggestions! I need to make Wave one of the ones I always install.

For #4&5 I open dev tools, hit Ctrl+Shift+P (Windows/Linux), search for "Screenshot" and can take a full-page screenshot or even a screenshot of a specific node.

For #9 I open dev tools, go to the Network tab, then filter by Img and download the one(s) I need.

There is also an experimental "CSS Overview" tab you can enable in dev tools settings that give you similar features to #12.

I didn't have luck when testing this when it first came out, but they're also working on a native version of #6! chrome://flags/#tab-groups-collapse-freezing

Collapse
tracycss profile image
Collapse
bimlas profile image
bimlas

Some of these features are already included in the Vivaldi browser, plus there are options that you can't even access with a plugin in another browser (for example, any command can be assigned to mouse gestures, whether it's printing a page or hiding the user interface).

vivaldi.com/

EDIT

Because it's a Chromium-based browser, you can also install the plugins in the post.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Great suggestion, I will take a look at the browser.
I love using chrome and Tor browser :)

Collapse
zwacky profile image
Simon Wicki

Hey Tracy, great list! apart from Wappalyzer I have to checkout your other other items in your post.

I made notyfy.co some time ago, your web notifications in one place, and I would love to hear your feedback! πŸ₯°

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

That's awesome Simon, I will check it out.
Thanks for developing it :)

Collapse
zwacky profile image
Simon Wicki

Thank you! I really appreciate it 😊

Collapse
ama profile image
Adrian Matei

I am an avid user (and creator) of Bookmarks.dev so I use every day the two extension to :

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thanks for sharing Adrian. I will check it out :)

Collapse
crease29 profile image
Kai Neuwerth

I'd also like to introduce PageLiner (link), which lets you place guide lines on a website, like you know it from Photoshop. I've written an article about this extension and why it got so bad ratings here on dev.to a while ago: My experiences with building a Google Chrome extension

Have a great day and stay healthy :)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Hey Kai, I will check it out. Thanks for sharing.

You too, take care of yourself :)

Collapse
entioentio profile image
entio

Please remove the great suspender from Your list as soon as possible. It has been sold to 3rd party that has made it into a malware; more info:
github.com/greatsuspender/thegreat...

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I will take a look. Thanks for sharing.

Collapse
entioentio profile image
entio

Yeah, I'd appreciate if you just take it off and maybe then take a look? Recommending a tool that's basically stealing data is not that fair tbh.

Collapse
arulugearhaus profile image
Arulu-Gearhaus

I recently found out about Chrome's (new?) tap group feature; while this isn't an extension it's useful with other tab-aholic extensions
A brief for anyone else who hasn't heard yet - right click a tab and then select 'Add to Group' (you can also select multiple tabs beforehand)
You can add a name, a color, and if you click the group label/dot, it collapses the group!

I'll be trying out The Great Suspender with this, since I also often keep a lot of temporary tabs open that I promise I'll get through (eventually)((someday)). Thanks for the article!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I totally get you. I use suspender because I open too many tabs sometimes.
Glad you enjoyed it and found it useful, Arulu :)

Collapse
astronault1 profile image
astronault1

What about tabby.us? I have a serious problem with tab accumulation, tried several tab managers and I think it's more robust than the great suspender. What do you think? It's basically a built-in AI that removes the tabs I don't use anymore automatically and it's working in the background.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I haven't tried tabby.us. I will look into it.

Collapse
sahillangoo profile image
Sahil Ahmed

myList =>{
Pushbullet,
whatsruns,
visbug,
PIP,
Daily Dev
}

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I haven't used whatsruns or visbug. I will take a look at them. Thanks for sharing Sahil. ✨

Collapse
braydentw profile image
Brayden W

Wow! I've never seen CSS Peeker before. Thanks for the resource!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yeah, try it Brayden. You will love it. ✨

Collapse
d3sox profile image
Nico

Check out tabliss.io/ for a free alternative to Momentum

Collapse
tracycss profile image
Collapse
psantwani profile image
Piyush Santwani

I published zoomiesoncall.xyz a couple of months ago for the pandemic times. I would be happy to have it reviewed by you :)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Sure, I will take a look and let you know. βœ”

Collapse
davidchagrin profile image
davidchagrin

Thanks for sharing this list. I plan to check some of them out first thing in the morning.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad you found the resources helpful, David.
Hope you share it with your fellow devs, they might find it useful as well. βœ¨πŸ™Œ

Collapse
typical_seme profile image
Owa

You can chat with your writer directly and clarify all the points in the process of writing domyhomeworkfor.me/history-homewor...