![Cover image for 25 Chrome/Firefox Extensions That Makes Your Life Easier [2020]](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fh8ttd9wi39w9ni93yzz6.png)
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.
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.
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.
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.
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.
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.
7. GitHub Repository Size
Automatically adds repository size to GitHub's repository summary
⚡ Get it for chrome and firefox.
👩💻👨💻 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 :(
9. ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
⚡ Get it for chrome and firefox.
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.
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.
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.
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 :(
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 :(
16. Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
⚡ Get it for chrome and firefox.
17. React Developer Tools
React Developer Tools is an extension for the open-source React JavaScript library.
⚡ Get it for chrome and firefox.
18. JSONView
Validate and view JSON documents.
⚡ Get it for chrome and firefox.
🤪 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.
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 :(
21. Momentum
Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration.
⚡ Get it for chrome and firefox.
22. RSS Feed Reader
Get a simple overview of your RSS and Atom feeds in the toolbar
⚡ Get it for chrome and firefox.
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 :(
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.
25. AdBlock — best ad blocker
Block ads and pop-ups on YouTube, Facebook, Twitch, and your favorite websites.
⚡ Get it for chrome and firefox.
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 👋😅
Top comments (5)
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
4) Also mails you the shortlinks instantly so that you can access those URLs on your phone too
It's totally free to use
Thanks! I'll definitely check that out! 🔥👏
The Great Suspender has malware and is unsafe. Consider using an alternative like:
chrome.google.com/webstore/detail/...
or:
github.com/aciidic/thegreatsuspend...
Thanks! 🔥🙏
Some really great finds in here. Thanks for sharing !