25 Chrome/Firefox Extensions That Makes Your Life Easier [2020]
Tags: chrome, firefox, javascript, github
Published: 2020-07-10 18:26:46

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!
<br>

## 😎 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](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/octotree/).
<br>
![Octatree screenshot](https://dev-to-uploads.s3.amazonaws.com/i/fqj568okzd8oeo3z92qr.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/refined-github-/).
<br>

![Refined github screenshot](https://dev-to-uploads.s3.amazonaws.com/i/120g2soyxg38r1nffiu2.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/file-icon-for-github-and/ficfmibkjjnpogdcfhfokmihanoldbfe) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/github-file-icon/).
<br>

![Fileicon screenshot](https://dev-to-uploads.s3.amazonaws.com/i/yinq2vu1044eldtpi23w.jpg)

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/octolinker/).
<br>

![Octalinker screenshot](https://dev-to-uploads.s3.amazonaws.com/i/tz9ktt2xsjsfrd5z0qqz.jpg)

<hr>

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack?hl=en-US) and [firefox](https://storage.googleapis.com/sourcegraph-for-firefox/latest.xpi).

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

![Sourcegraph screenshot](https://dev-to-uploads.s3.amazonaws.com/i/m5tkwdvrdikcvdqgux8y.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/github-hovercard/mmoahbbnojgkclgceahhakhnccimnplk?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/github-hovercard/).
<br>

![github hovercard screenshot](https://dev-to-uploads.s3.amazonaws.com/i/967at9lh8bhe5caqar8l.jpg)

<hr>

## 7. GitHub Repository Size
Automatically adds repository size to GitHub's repository summary

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/github-repository-size/apnjnioapinblneaedefcnopcjepgkci?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/github-repo-size/).
<br>

![github repository size screenshot](https://dev-to-uploads.s3.amazonaws.com/i/29wz2whnoxxg2p9g0f5d.jpg)

<hr>

## 👩‍💻👨‍💻 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](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni?hl=en-US). unfortunately this extensions is not available for firefox :(
<br>

![Accessibility Insights for Web screenshot](https://dev-to-uploads.s3.amazonaws.com/i/grdoriexrm8m042w9is5.jpg)

<hr>

## 9. ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/colorzilla/).
<br>

![colorzilla screenshot](https://dev-to-uploads.s3.amazonaws.com/i/o3ur1qa6hf2y47mmw4ju.png)

<hr>

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/web-developer/).
<br>

![web developer screenshot](https://dev-to-uploads.s3.amazonaws.com/i/3zgzgnpq7jy5btp6txfb.png)

<hr>

## 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](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/dimensions_extension/).
<br>

![dimension screenshot](https://dev-to-uploads.s3.amazonaws.com/i/wpezth3icmmlqx9vo5a7.png)

<hr>

## 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](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/).
<br>

![wappalazer screenshot](https://dev-to-uploads.s3.amazonaws.com/i/kopeiqw6jg569yswu1en.png)

<hr>

## 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](https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg?hl=en-US). unfortunately this extensions is not available for firefox :(
<br>

![svg grabber screenshot](https://dev-to-uploads.s3.amazonaws.com/i/f4oqwq7qybierudr67s3.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en-US). VisBug for firefox is coming soon! [check here](https://github.com/GoogleChromeLabs/ProjectVisBug) for more details.
<br>

![visbug](https://dev-to-uploads.s3.amazonaws.com/i/hzft2bexhwv4f6a9tc6l.png)

<hr>

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en-US). unfortunately this extensions is not available for firefox :(
<br>

![EditThisCookie screenshot](https://dev-to-uploads.s3.amazonaws.com/i/mqfu749lwyf3i8kxcicy.jpg)

<hr>

## 16. Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/).
<br>

![vuejs deevtools screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5xkn5r8arb9eolt8gniu.jpg)

<hr>

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
<br>

![reactdev tools screenshot](https://dev-to-uploads.s3.amazonaws.com/i/bv59aw2b838yjj50bcam.jpg)

<hr>

## 18. JSONView
Validate and view JSON documents. 

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/jsonview/).
<br>

![jsonview screenshot](https://dev-to-uploads.s3.amazonaws.com/i/a0zv7cykp9tweqv3fnba.jpg)
<br>


## 🤪 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](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/darkreader/?src=search).
<br>

![dark reader screenshot](https://dev-to-uploads.s3.amazonaws.com/i/qrwljyuyie9ig2qbiai9.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg?hl=en-US) unfortunately this extensions is not available for firefox :(
<br>

![the great suspender screenshot](https://dev-to-uploads.s3.amazonaws.com/i/to7fqjyfo84ly5oy2li9.jpg)

<hr>

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

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/momentumdash/).
<br>

![Momentum screenshot](https://dev-to-uploads.s3.amazonaws.com/i/h7vl70gb4lkuipctizvv.jpg)

<hr>

## 22. RSS Feed Reader
Get a simple overview of your RSS and Atom feeds in the toolbar

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/rss-feed-reader/pnjaodmkngahhkoihejjehlcdlnohgmp?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/feeder/).
<br>

![feeder screenshot](https://dev-to-uploads.s3.amazonaws.com/i/t7enfccxdv0q8a35x6g9.jpg)

<hr>

## 23. Bookmark Sidebar
Adds a toggleable sidebar with all your bookmarks at the edge of your browser window.

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh?hl=en-US). unfortunately this extensions is not available for firefox :(
<br>

![bookmark sidebar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/zormer78gqfa5srwozqd.jpg)

<hr>

## 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](https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?hl=en-US) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/).
<br>

![Grammarly screenshot](https://dev-to-uploads.s3.amazonaws.com/i/bpcwmyza47z92z63hd7j.png)

<hr>

## 25. AdBlock — best ad blocker
Block ads and pop-ups on YouTube, Facebook, Twitch, and your favorite websites.

⚡ Get it for [chrome](https://chrome.google.com/webstore/detail/adblock-%E2%80%94-best-ad-blocker/gighmmpiobklfepjocnamgkkbiglidom) and [firefox](https://addons.mozilla.org/en-US/firefox/addon/adblock-for-firefox/).
<br>

![ad-blocker screenshot](https://dev-to-uploads.s3.amazonaws.com/i/bac3sfg5hgaqrifg1209.jpg)

<hr>

Hey, you made it to the end 🥳 Thanks for reading this article! you can follow me on [Twitter](https://twitter.com/amirmeimari). I'm posting whatever I learn and a bunch of cool stuff there. cheers 👋😅