27 Chrome Browser Extensions For Front-end, React, Vue, Programming, General

This content originally appeared on DEV Community and was authored by Eleftheria Batsou

Let's check some chrome extensions for Front-end, React, Vue, Programming and for general use! If you use different extensions let me know I'll do a part-2.

Note: this post has been created with the help of my Twitter friends.

What browser extensions do you use?#100DaysOfCode

— Eleftheria Batsou (@BatsouElef) April 29, 2021

Front-end

1. JSON Formatter

FEATURES

• JSON & JSONP support
• Syntax highlighting
• Collapsible trees, with indent guides
• Clickable URLs
• Toggle between raw and parsed JSON
• Works on any valid JSON page – URL doesn't matter
• Works on local files too
• You can inspect the JSON by typing "json" in the console

2. Allow CORS

Allow CORS: Access-Control-Allow-Origin lets you easily perform cross-domain Ajax requests in web applications.

Simply activate the add-on and perform the request. CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.

3. ModHeader

FEATURES

• Add / modify / remove request headers and response headers (you can use this to set X-Forwarded-For, Authorization, Access-Control-Allow-Origin: *)
• Conditionally enable header modification based on URL and/or resource type
• Add comments to header
• Support having multiple profiles with quick switching between profiles
• Sorting headers and name, value, or comments
• Append value to existing request or response header
• Export and import header
• Clone profile
• Cloud backup

4. Web Sniffer

View all HTTP Requests and Responses sent between the Web browser and the Web server.
For every HTTP request, the following information is displayed (can hide):

• Tab ID, Title [filtered]
• Request ID
• Type Request [filtered]
• Time [filtered]
• Status [filtered]
• Method (GET/POST, POST Body) [filtered]
• Hostname [filtered]
• URL (GET Params)
• Headers (Request/Response)

5. Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

6. WhatFont

The easiest way to identify fonts on web pages. What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

7. CSS Peeper

Extract CSS and build beautiful styleguides. No more digging in a code. Inspect styles in a simple, well-organized & beautiful way. Get it now! CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code.

Ever wondered what’s the line-height, font or a button size on a website? We provide you the ultimate tool to satisfy your curiosity. We enable you to inspect code in the easiest possible way. Check the hidden CSS style of objects, colors and assets on the web.

8.HTML to Figma

Use this extension to capture your current page and import it as editable Figma layers! What it's useful for:

• Easily import real live site styles for a starting point for designs and prototypes
• Quickly turn real site components into design components
• Easy import components from storybook, etc
• Import a great live web design as a starting point for inspiration for your mockups

9. ColorZilla

FEATURES

• Eyedropper - get the color of any pixel on the page
• Advanced Color Picker (similar to Photoshop's)
• Ultimate CSS Gradient Generator
• Webpage Color Analyzer - get a color palette for any site
• Palette Viewer with 7 pre-installed palettes
• Color History of recently picked colors

React

10. React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

11. Redux DevTools

Redux DevTools is for debugging application state changes.
The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

VueJS

12. Vue.js devtools

Chrome dev tools extension for debugging Vue.js applications.

13. Vue Telescope

Discover Vue.js Websites. Vue Telescope is a utility that uncovers the Vue.js plugins and technology stack used on websites. It detects the Vue version, plugins, frameworks, Nuxt modules and even the UI used.

Programming-general

14. Google Tag Assistant

Tag Assistant helps to troubleshoot the installation of various Google tags including Google Analytics, Google Tag Manager and more.

Tag Assistant helps you verify that you have installed various Google tags correctly on your page. Just navigate to any page and Tag Assistant will tell you which tags are present, report any errors we find and suggest improvements that can be made to your implementation. Most Google tags are checked including Google Analytics, Adwords Conversion Tracking, Google Tag Manager and more.

15. dailyDev

Why give it a try?

• Stay up-to-date with zero effort
• Free forever
• No sign up needed
• 100% open-source
• Private. You own and control all your data.
• Active dev community

16. Markdown Viewer

FEATURES

• Renders local and remote URLs
• Granular access to remote origins
• Multiple markdown parsers
• Full control over the compiler options
• Themes (including GitHub theme)
• GitHub Flavored Markdown (GFM)
• Auto reload on file change
• Syntax highlighted code blocks
• Table of Contents (TOC)
• MathJax and Emoji support
• Mermaid diagrams support
• Remembers scroll position
• Markdown Content-Type detection
• URL detection using RegExp
• Toggle Content Security Policy (CSP)

? Life-general

17. Grammarly

Grammarly helps you eliminate writing errors and find the perfect words to express yourself. You’ll get real-time feedback from Grammarly on Gmail, Google Docs, Twitter, LinkedIn, and nearly everywhere else you find yourself writing. Grammarly is a writing assistant that offers you specific suggestions to help you improve your writing — and it goes way beyond grammar. You can be confident that your writing is not only correct, but clear and concise, too.

18. Adblock Plus

Adblock Plus for Google Chrome blocks video ads, banners, pop-ups and other forms of intrusive and annoying advertising, as well as blocking tracking and malware.

An easy-to-use, customizable ad-blocking browser extension, Adblock Plus gives you control over your Google Chrome browsing experience. Block annoying and intrusive ads for a cleaner, better web experience. Blocking ads also reduces the risk of infection from malvertising campaigns. Users also have the option to add personal filters and whitelist websites.

19. Dark Reader

Dark mode for every website. Take care of your eyes, use a dark theme for night and daily browsing. This eye-care extension enables night mode creating dark themes for websites on the fly. Dark Reader inverts bright colors making them high contrast and easy to read at night. You can adjust brightness, contrast, sepia filter, dark mode, font settings and ignore-list.

20. Malwarebytes Browser Guard

FEATURES

• Advertising/tracker protection: Blocks third-party ads and trackers that monitor your online activity. The number of blocked ads & blocked trackers for a website will show beside the Malwarebytes logo in your browser.
• Scam protection: Blocks online scams, including technical support scams, browser lockers, and phishing.
• Potentially unwanted program (PUP) protection: Blocks the downloading of potentially unwanted programs, including toolbars and pop-ups.
• Browser-level malware protection: Blocks malicious programs or code that can damage your system.

21. Bitwarden - Free Password Manager

Bitwarden is the easiest and safest way to store all of your logins and passwords while conveniently keeping them synced between all of your devices.

Password theft is a serious problem. The websites and apps that you use are under attack every day. Security breaches occur and your passwords are stolen. When you reuse the same passwords across apps and websites hackers can easily access your email, bank, and other important accounts.

22. Authenticator

FEATURES:

• Add accounts by scanning QR codes
• Search your accounts by pressing "/"
• Translated into more than ten languages
• Encrypt your secrets with a password
• Backup your secrets to a file, Google Drive, Microsoft OneDrive, or Dropbox
• Sync your secrets with your Google Account

23. Loom

With Loom, you can record your screen, voice, and face to create an instantly shareable video in less time than it would take to type an email. Reduce back-and-forth typing and get your message across the first time.

24. ZenMate

The ZenMate free VPN browser extension uses strong encryption to secure all your traffic and hides your real IP address so you can access any blocked website, protect your data and surf the internet anonymously without a data limit.

25. Honey

Automatically find and apply coupon codes when you shop online. Automatically apply coupons on 30,000+ sites. Join 17 million members who shop with confidence. Honey automatically searches for and apply coupons when you shop online. One-click and it tests different codes and applies the best one to your cart.

26. Screentime

The extension allows you to control how much time you spend on popular social media sites and entertainment sites. You can specify how many minutes in a day you want to use on each site and once you've gotten to the limit, you won't be able to access the site. Time frames can be specified for when you want the sites to be inaccessible for each day of the week. You can also add or remove sites.

27. Hare – Beautiful tab manager

A beautifully designed search engine for your tabs. When we have many tabs open and are confused about which window's tab is already open, we go ahead and create a new tab with the exact same content. This makes your browsing experience too cluttered and less productive.

Hare makes it faster for you to jump on any tab, you have open, by doing a fuzzy search on factors like URL, title etc. When you are all done with your tabs, you can have a nice interface for them to close it at once based on your fuzzy search.

Conclusion

These are just a few of the great extensions you can find for chrome, most of these extensions are available for the other well-known browsers as well. Thank you to everyone on Twitter who wrote an answer. I learn quite a few new ones! Unfortunately, I didn't mention all the extensions from your answers as there were too many. But if you are interested let me know and I can do part 2. I haven't even included all the ones I'm using :)

?Hello, I'm Eleftheria, a developer, public speaker, and chocolate lover.

?If you liked this post please share.

?Would you care about buying me a coffee? You can do it here but If you can't that's ok too!

?It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.

?Youtube | Codepen | LinkedIn | Twitter | Site | Instagram

This content originally appeared on DEV Community and was authored by Eleftheria Batsou