10 Awesome Chrome Extensions [Guaranteed To Make Your Day]

This content originally appeared on DEV Community and was authored by Clean Code Studio

"The right chrome extension will save you thousands of hours, improve your workflow speed, and fill up your heart with pure happiness and an abundance of pure joy."

Here are 10 of the Best Chrome Extensions guaranteed to make your day.

Note: Links to all chrome extensions listed in this article found at bottom of the post.

1. Octotree - GitHub Code Tree

If you're constantly on GitHub then Octotree is an absolute must have when it comes to chrome extensions.

A tab will show on the left side of your web page when you're looking at any git repo.

Clicking the tab slides open a file sidebar with the file tree for the entire git project. You can search, find, and analyze the files for the git project like you're using the sidebar in any popular text-editor or IDE.

2. Last Pass - Password Manager

LastPass, an award-winning password manager, saves your passwords and gives you secure access from every computer and mobile device.

LastPass puts you in control of your online life – making it easy to keep your critical information safe and secure so you can access it whenever you want, wherever you are. Save all your passwords, addresses, credit cards and more in your secure vault and LastPass will automatically fill in your information when you need it.

Stop wasting time  getting locked out of accounts or filling passwords and  forms online – LastPass  simplifies your daily online tasks  while keeping you  and your family  secure.  

3. Greenlight (This extension is just Whoa)

If I had to pick a single chrome extension that blows my mind away then I'm choosing this Greenlight chrome extension hands down.

It hasn't blown up yet, but that's because it's extremely new. In my opinion, this chrome extension is going to be a huge tool used by tons of software teams across the country within a year or two.

What's it do?

1. Once you have greenlight installed, go to any website

2. Click the greenlight extension icon
   

3. Click add comment
   

4. Click anywhere on the page to pin a comment
   

5. Add your comment and click post to pin it to the page
   

6. Open up the extension tab and click on the settings icon
   

7. Click members from the settings menu
   

8. Invite people to join your greenlight project via email
   

9. Checkout comments pinned to any given website or add more comments to the site

1. Check out when and where a given comment was pinned, reply to any pinned comments, look at whether the comment was made while viewing the site via desktop, tablet, or mobile.

1. Click resolve to close comments out like closing git issues (close them out)

As shown in the example images above, Greenlight is an extension that lets you create a project on any given site, select anywhere on that site, and pin comments wherever noting something.

You can invite team members and use this as a more efficient way to communicate between qa/testers/developers/and product owners or you can do what I do and simply use greenlight to make personal notes on any website - highlighting the specific thing you were looking at when making your personal notes.

Greenlight is a powerful, powerful chrome extension. Don't let the newness of the extension make you think it isn't one of the best - if not the best - extensions on this list. I love green light and 10/10 recommend.

4. JSONView

JSONView is a simple chrome extension that validates and beautifies JSON content loaded in the browser.

Example of JSONView doing its thing:

5. Color Eye Dropper Chrome Extension

Another simple chrome extension is this color code analyzer. Like the JSONView extension, there's plenty of extensions out there that do the same thing - through trial and error and personal experience the Color Eye Dropper Chrome Extension is my favorite for analyzing the color codes on any website.

1. You get the hex code and rgb code
2. It follows your mouse to analyze the color codes
3. When you click, it automatically copies the currently hovered color code to your clipboard - making it quick for development.

This is my favorite color code finder chrome extension - it's simple, but that's why I personally love it.

6. WhatFont Chrome Extension

Chrome extension to get the typography breakdown from the content on any website.

WhatFont Description of their extension:
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.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

7. Autofill Chrome Extension

As developers, we've all been in the position where we have to fill out the SAME FU*** FORM** 1000 TIMES OVER!!!.

It's frustrating, annoying, and over all just kinda sucks after the 100th time or so.

This chrome extension, Autofill, saves us from that night mirror of re-filling out the same form over-and-over again.

The Autofill extension serves one purpose: fill form fields automatically on page load without any user interaction. This is its primary function, but it can do so much more. Chrome has a built-in autofill feature, but it doesn't work on all fields and requires you to select from a drop-down menu. Even if you're happy with Chrome's autofill, give this extension a try for more automation and power at your fingertips.

Some of my favorite features of the autofill chrome extension include:

1. Multiple profiles to fill out the same forms in differing default ways.
2. Multiple profiles meaning that we can create one profile that will fill out these three application forms with this default data while our other autofill profile will fill out these same three application forms using different data.

• We can generate random form data base on the form field types to populate dummy data.

• The form dummy data is populated automatically based on the given autofill profile we're currently using ON PAGE LOAD.

  • We don't even need to re-click the populate form button. Once we have our dummy form data generation configuration set up for a given autofill profile, the form will be populated automatically whenever the page with that form is re-loaded.

If you want to get advanced with your form autofill rules and settings, you can - autofill is easy set up by default but provides you with the ability to dive deep into the settings and configure tons of more advanced options/settings for auto-populating your forms with data.

8. Download All Images Chrome Extension

This is one of my newer chrome extensions that I'm starting to love. It lets you download all images on a page, set the dimensions for the downloads, determine the type of picture you want to save the photos as, and apply regex - file size - keyword - and other types of filters to define the constraints for the kinds of images you want downloaded out of all of the images on a page.

Another awesome feature of this chrome extension is that it shows you the statistical breakdown of the images and what you will be downloading before you download the photos. You get to format the title your saving each image under, define your zip file name, and create a directory to store them into. You can also choose to copy or save to a directory - so the options are pretty plentiful for downloading all of the images on any given page. Just be careful with image rights - mass downloading images may leave you open to getting into trouble if you aren't careful about the image licensing rights.

9. Grammarly for Chrome

Being as popular as it is, you may already know of Grammarly. If you don't know of it, I highly recommend it.

From grammar and spelling to style and tone, 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. Be sure to register your account to receive a personalized writing report each week to help you track your progress and identify improvement areas.

10. Light shot screenshot chrome extension

Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
Lightshot is the fastest way to take a customizable screenshot. Simple interface, nothing useless and light weight.

Lightshot screenshot Features:

• take screenshot and share it in few clicks
• select any part of the page
• edit screenshot in place
• save on a disk or upload to the cloud
• search for similar screenshots
• copy screenshot in clipboard

A cool note here is that I've been using light shot screenshot for years but until literally 5 minutes ago had no idea it was a chrome extension.

I didn't think litshot screenshot was usable on windows and although I've been using it for years on mac and ubuntu, always use snippet on while on windows. Since I'm on windows while writing this blog I used the snippet desktop app that comes default with windows. If I wouldn've known about this light shot screen shot chrome extension two hours ago, we could've made this blog even better using it.

But hey, now I know it's there and I'm sharing it with you. Light shot screen shot - if you're on mac or linux, is also a great desktop screenshot tool. While one windows I'm highly recommending this extension via the chrome browser instead. That being said, both the desktop and chrome extension versions of lightshot screen shot are so far seemingly identical - having the desktop tool lets you use the light shot screen shot services whenever where as the chrome extension will only let you use the screen shot tool while chrome is open. So, if you are on Mac or Linux, I recommend the desktop version of light shot screen shot where as if you're on windows than this chrome extension is also awesome!

Links to Top 10 Chrome Extensions from this Post

• Octotree - GitHub Code Tree
• Last Pass
• Greenlight
• JSONView Chrome Extension
• Color Eye Dropper Chrome Extension
• WhatFont Chrome Extension
• Form Autofill Chrome Extension
• Download all images chrome extension
• Grammarly Chrome Extension
• Lightshot (screenshot tool)

Other (Honorable Mentions) Chrome Extensions

• Awesome Drive for Google Drive
• Moz Bar (SEO and on page website analyzation in the eyes of Google)
• Markdown Downloader
• Save to Google Drive
• Quick Search for Google Drive

Clean Code
Clean Code Studio

This content originally appeared on DEV Community and was authored by Clean Code Studio