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.
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).
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
When I used Mercury Reader
You can click the setting icon at the top right and customize it. Change the font size, Typography, or theme.
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
Midnight Lizard custom settings
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.
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.
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.
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.
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.
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
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.
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
Colors used in the website
Assets used
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.
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. π
Top comments (40)
Have you tried daily.dev? We'd love to hear what you think about it and perhaps add it to your list :)
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.
it's great! I'm using it for about 3 years I think (maybe 2).
I have been using it for a month or so. It has been great as well.
Learning a lot.
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/.
Did you install on Chrome or Firefox?
Chrome browser. I use it more often than firefox.
Sorry, I meant the website not the extension
Here again: app.daily.dev/posts/BZvnz88tW
Thanks for the feedback. We will take a deeper look into it :)
Yeah, I do.
Let me update it on the list. π
Daily.dev and smashing magazines are amazing resources.
Thanks π€
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-freezingGreat suggestions, Josh.
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.
Great suggestion, I will take a look at the browser.
I love using chrome and Tor browser :)
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! π₯°
That's awesome Simon, I will check it out.
Thanks for developing it :)
Thank you! I really appreciate it π
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!
I totally get you. I use suspender because I open too many tabs sometimes.
Glad you enjoyed it and found it useful, Arulu :)
I am an avid user (and creator) of Bookmarks.dev so I use every day the two extension to :
Thanks for sharing Adrian. I will check it out :)
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...
I will take a look. Thanks for sharing.
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.
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.
I haven't tried tabby.us. I will look into it.
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 :)
Hey Kai, I will check it out. Thanks for sharing.
You too, take care of yourself :)
Wow! I've never seen CSS Peeker before. Thanks for the resource!
Yeah, try it Brayden. You will love it. β¨