DEV Community

Cover image for 25 Chrome/Firefox Extensions That Makes Your Life Easier [2020]

25 Chrome/Firefox Extensions That Makes Your Life Easier [2020]

amir profile image Jack @code πŸ‘¨β€πŸ’» ・Updated on ・7 min read

Being a web developer and work in the web industry is great. Our biggest tool besides text editor is our beloved browsers! We spend quite the amount of time reading docs, going trough Github, checking website functionalities, and so on… in this article, I’m going to tell you how these extensions made my life easier as a developer!

😎 First Let’s talk Github!

Let’s be honest Github's default features are not perfect! There is no dark theme, no file tree-like structure that we used to see in our editors, no file icons, and so on… well no more!

1. Octotree

Octotree is loaded with features that bring your productivity on GitHub to the next level!

Some of Octotree features:

  • Navigate Github code with ease
  • Dark themes and code fonts
  • Supercharged code review
  • Multiple tabs support
  • And many more

⚑ Get it for chrome and firefox.

Octatree screenshot

2. Refined GitHub

Simply simplifies the GitHub interface and adds useful features.

Some of Refined GitHub features:

  • Mark issues and pulls requests as unread
  • Tabs in code are shown as 4 spaces instead of 8 spaces
  • Fix merge conflicts in a click
  • Reaction avatars showing who reacted to a comment
  • Clickable references to issues and pull requests
  • View linked gists inline in comments
  • and much more...

⚑ Get it for chrome and firefox.

Refined github screenshot

3. File Icon for GitHub and GitLab

An Extension that gives different filetypes different icons to GitHub, GitLab, gitea and gogs.

⚑ Get it for chrome and firefox.

Fileicon screenshot

4. OctoLinker

Navigate through projects on efficiently with OctoLinker. OctoLinker turns language-specific statements like include requires or import into links.

⚑ Get it for chrome and firefox.

Octalinker screenshot

5. Sourcegraph

Adds code intelligence to GitHub: hovers, definitions, references. Supports 20+ languages and other popular code hosts, too.

⚑ Get it for chrome and firefox.

NOTE: The Firefox extension may need to be manually enabled from about:addons, you can find more information in Firefox add-on security.

Sourcegraph screenshot

6. GitHub Hovercard

GitHub Hovercard provides neat hovercards for GitHub.
It brings you instant access to user/repo/issue/commit information from anywhere on GitHub.

⚑ Get it for chrome and firefox.

github hovercard screenshot

7. GitHub Repository Size

Automatically adds repository size to GitHub's repository summary

⚑ Get it for chrome and firefox.

github repository size screenshot

πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» Developers Developers Developers!

This section is all about the best extensions that I've used for developing purposes.

8. Accessibility Insights for Web

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

⚑ Get it for chrome. unfortunately this extensions is not available for firefox :(

Accessibility Insights for Web screenshot

9. ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

⚑ Get it for chrome and firefox.

colorzilla screenshot

10. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools.

⚑ Get it for chrome and firefox.

web developer screenshot

11. Dimensions

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect.

⚑ Get it for chrome and firefox.

dimension screenshot

12. Wappalyzer

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.

⚑ Get it for chrome and firefox.

wappalazer screenshot

13. svg-grabber - get all the svg's from a site

svg-grabber lets you preview, download and copy the code all SVG icons and illustrations in a website.

⚑ Get it for chrome. unfortunately this extensions is not available for firefox :(

svg grabber screenshot

14. VisBug

Open source web design debug tools built with JavaScript: a FireBug for designers.

Some of VisBug's features:

  • Point, click & tinker
  • Edit or style any page, in any state, like it's an artboard
  • Inspect styles, spacing, distance, accessibility and alignment
  • Nitpick layouts & content, in the real end environment, at any device size
  • Leverage adobe/sketch skills
  • Edit text, replace images
  • and much more...

⚑ Get it for chrome. VisBug for firefox is coming soon! check here for more details.


15. EditThisCookie

EditThisCookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

⚑ Get it for chrome. unfortunately this extensions is not available for firefox :(

EditThisCookie screenshot

16. Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

⚑ Get it for chrome and firefox.

vuejs deevtools screenshot

17. React Developer Tools

React Developer Tools is an extension for the open-source React JavaScript library.

⚑ Get it for chrome and firefox.

reactdev tools screenshot

18. JSONView

Validate and view JSON documents.

⚑ Get it for chrome and firefox.

jsonview screenshot

πŸ€ͺ More General Ones!

This last section is about more general extensions that help me navigate through the web every day.

19. Dark Reader

Hello, darkness my old friend! dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.

⚑ Get it for chrome and firefox.

dark reader screenshot

20. The Great Suspender

Let's be honest chrome is a ram hungry browser. and the reason behind it is open tabs. The Great Suspender is a lightweight extension that reduces chrome's memory footprint. Perfect if you have a lot of tabs open at the same time. Tabs that have not been viewed after a configurable length of time will be automagically suspended in the background, freeing up the memory and CPU being consumed by that tab.

⚑ Get it for chrome unfortunately this extensions is not available for firefox :(

the great suspender screenshot

21. Momentum

Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration.

⚑ Get it for chrome and firefox.

Momentum screenshot

22. RSS Feed Reader

Get a simple overview of your RSS and Atom feeds in the toolbar

⚑ Get it for chrome and firefox.

feeder screenshot

23. Bookmark Sidebar

Adds a toggleable sidebar with all your bookmarks at the edge of your browser window.

⚑ Get it for chrome. unfortunately this extensions is not available for firefox :(

bookmark sidebar screenshot

24. Grammarly

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.

⚑ Get it for chrome and firefox.

Grammarly screenshot

25. AdBlock β€” best ad blocker

Block ads and pop-ups on YouTube, Facebook, Twitch, and your favorite websites.

⚑ Get it for chrome and firefox.

ad-blocker screenshot

Hey, you made it to the end πŸ₯³ Thanks for reading this article! you can follow me on Twitter. I'm posting whatever I learn and a bunch of cool stuff there. cheers πŸ‘‹πŸ˜…

Discussion (5)

Editor guide
nithinsgowda profile image
Nithin.S • Edited

Also have a look into URL shortner Chrome extension developed by myself. So much useful for developers to store and share important links

1) Shortest and fastest URL shortner at the comfort of your browser tab.
2) Generate QR codes for generated shortlinks.
3) Get analytics of your shortlinks generated through the Chrome extension
4) Also mails you the shortlinks instantly so that you can access those URLs on your phone too

It's totally free to use

amir profile image
Jack @code πŸ‘¨β€πŸ’» Author

Thanks! I'll definitely check that out! πŸ”₯πŸ‘

shadowscientist profile image
Shadow Scientist

Wow! awesome collection of all sort of extensions, a developer need! πŸ‘πŸ‘πŸ‘

amir profile image
kwaiiks profile image
Kwaku @codes

Some really great finds in here. Thanks for sharing !