loading...
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 GitHub.com 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.

visbug


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 πŸ‘‹πŸ˜…

Posted on by:

amir profile

Jack @code πŸ‘¨β€πŸ’»

@amir

a dreamer, front end developer, and creator... sort of!

Discussion

markdown guide
 

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

nith.ml/extension

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

 

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

 

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

 
 

Some really great finds in here. Thanks for sharing !