Chrome Extension For Developers

This blog is for developers who want to develop Chrome extensions. Have you ever thought about developing a Chrome extension that does a really cool thing? Well, we’ll walk you through the process!

The first step is to decide on an idea. You can build anything you want: a game, a helpful tool, whatever you think of!

The next step is to go to the Extension Developer’s Guide and choose your idea!

Do you want to boost your website’s traffic?

Take advantage of FLUX DIGITAL RESOURCE seo tools

16 Useful Chrome Extensions For Developers To Try In 2022 | Usersnap

Chrome Extension For Developers

A couple of months ago, we reviewed the new Firefox browser designed for developers. Since then most of our developers kept Google Chrome as their primary browser. Working with Chrome offers access to an immense repository of Chrome extensions and tools which make our daily tasks less of a chore. With the built-in developer tools, there seems to be no further need for more tools. However, I’d like to present you with 16 of the best Google Chrome extensions for developers.

16 of the best Google Chrome Extensions for developers

  1. Usersnap
    The Usersnap Chrome extension lets you capture and annotate any web page directly in your browser. It’s super-easy to provide visual feedback on prototypes or report bugs with this Google extension.

And all created screenshots and screen recordings are directly stored in your project dashboard, making bug tracking and feedback a lot of fun!

Click the image to see Usersnap’s Chrome extension in action (YouTube video) ⤵️

Example of customer feedback via screen recordings

Usersnap is an award-winning bug tracking and feedback tool, featured by Inc., Forbes, Techcrunch, and The Huffington Post. It is loved by companies such as Google, Facebook, Microsoft who use Usersnap on a daily basis to work together on web projects.

Try Usersnap for free for 15 days here.

Learning to write programs stretches your mind, and helps you think better, creates a way of thinking about things that I think is helpful in all domains.

Bill Gates – Founder, Microsoft

  1. Web Developer
    The web developer extension for Chrome adds a little toolbar with different tools available. The original concept of this Chrome extension for developers came from the PNH Developer Toolbar.

The Google extension web developers have a lot of handy tools a developer can use in their day-to-day work – for designers as well as programmers. It allows you to do a lot more than the standard Chrome Inspector, like being able to easily add outlines to elements just by clicking, displaying rulers, finding all broken images on a page, and lots more.

web developer chrome extensions for developers

Link: Web developer extension.

  1. Hiver
    This is a tool that helps teams manage group inboxes like engineering@ and bugs@, right from Gmail. With Hiver, critical emails – regarding support escalations and other technical bug problems – arriving in these inboxes can be auto-assigned to individual developers and kept track of in real-time, till the point of resolution.

Hiver chrome extension for developers

Link: Hiver

  1. f19N Obtrusive Live Test
    This Chrome extension for developers is a sandboxed, extendable Webpage Testing Framework. It allows devs to test all pages on predefined best practices such as SEO or web performance. It is very simple to create the tests yourself.

You get direct visual feedback and see what is happening in the browser during page loads and render lifecycles.

f19N

Link: F19N Obtrusive Live Test

  1. Window Resizer for Developer
    The Window Resizer extension lets you resize your browser window on the fly. Clicking on the icon in the menu bar produces a drop-down menu of window sizes that you can customize. What’s neat about the Window Resizer is that it offers an option to launch it as a pop-up, enabling you to switch through different screen resolutions and see if your media breakpoints are working as expected. On top of that, you can also rotate your screen and customize the presets.

Emulate various screen resolutions.
Resize the browser window to emulate various screen resolutions.
Link: Window Resizer

  1. ColorPick Eyedropper
    ColorPick Eyedropper is a simple color picker tool that allows you to select color values from any web page.

An eye-dropper & color-picker tool that allows you to select color values from webpages.
Color-picker tool that allows you to select color values.
Link: ColorPick Eyedropper

  1. CSSViewer
    CSSViewer is a simple CSS property viewer. It provides a floating panel that reports on the identity of the section that the mouse is over, along with its font, text, color, background, box, positioning, and effects attributes. CSSViewer provided the basic CSS information you need quickly. Make sure to install this Chrome extension.

css viewer chrome extensions for developers

Link: CSS Viewer

  1. Lorem Ipsum generator
    The lorem ipsum generator does what its name states. It provides an easy and quick way to create default text. Definitely, this is a quick win if you need some default text as a placeholder.

lorem ipsum chrome extensions for developers

Link: Lorem Ipsum Generator

  1. actiTIME
    actiTIME Timer helps developers to keep track of work hours directly from the web browser and web apps such as Jira. It is used by companies and freelancers for analyzing performance and controlling the project’s progress and profitability.

ActiTIME chrome extension | Usersnap Blog

Link: actiTIME

  1. Ghostery
    Ghostery is a great Google extension that detects trackers, pixels, and any other embedded snippets on a website. You immediately see which plugins and trackers are installed on the web page you’ve visited. Further on, Ghostery lets you protect your privacy. There’s no registration or sign-up required to use this Chrome extension.

See who’s tracking your web browsing with Ghostery.
See who’s tracking your web browsing with Ghostery.
Link: Ghostery

  1. Wappalyzer
    Similar to Ghostery, the Wappalyzer Chrome extension lets you identify software that is installed on any particular website. It uncovers technologies and. content management system, eCommerce platforms, web servers, JavaScript frameworks, and installed analytics tools.

Identify web technologies – Wappalyzer
Identify web technologies with Wappalyzer
Link: Wappalyzer

  1. IE Tab
    In need to do some manual IE testing and don’t want to install all kinds of different Internet Explorer versions? Check out the IE Tab extension for Chrome which emulates IE by using the IE rendering engine directly in Chrome. You can test your website for IE6, IE7, IE8, or IE9 directly in your chrome browser.

Unfortunately, the IE Tab Chrome extension is only available for Windows at the moment.

ie tab chrome extensions for developers

Link: IE Tab

usersnap track

  1. Site Spider
    If you need to find broken links on your site and want to restrict spidering to a specific directory you need Site Spider.

site spider chrome extension

Link: Site Spider

  1. Session Manager
    When you’re working on the web, browser tabs management is a great skill. Session Manager is your Chrome extension to go. It saves your browsing state and lets you re-open the session later. It is particularly useful if you find yourself opening the same web pages over and over.

session manager chrome extensions for developers

Link: Session Manager

  1. Clear Cache
    This extremely useful Chrome extension allows you to clear your cache from the toolbar. It works “behind-the-scenes” meaning there are no popups or confirmation dialogs to distract you. It’s customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords, and much more.

clear cache chrome extensions for developers

Link: Clear Cache

  1. JSONView
    As a developer working with RESTful APIs, reading raw JSON data on a browser can be quite awkward. It’s much easier to read JSON in tree-view, rather than in its raw state. The Chrome extension JSONView helps you view JSON documents in the browser.

json viewer chrome extensions for developers

Link: JSON Viewer

Coding Chrome Extensions For Developers – How to Do It!
Chrome extensions or add-ons for Chrome are small software applications that introduce new features and make your browsing experience more convenient. They allow users to tailor browser functionality and aesthetics according to their personal preferences. Coding extensions is usually done using a multitude of programming languages including JS, HTML, and CSS.

Coding Extensions – Step by Step Guide
When coding chrome extensions for developers, first of all you need to create a folder and add the following files.

Step 1 – manifest.json
This is the file that will provide Chrome with basic information related to your extension such as required permission and its name. The majority of the variables in the manifest file are quite self-explanatory and you can change any of them. The matches variable is responsible for running the select content.js when a particular webpage is launched.

“”: will match any URL that begins with an approved scheme such as http:, https:, file:, ftp:, or chrome-extension:.
“http:///”: will match any URL that uses the http: scheme.
“https:///”: will match any URL that uses the https: scheme.
:///*”: will match any URL that uses the https: or http: scheme.
Step 2 – content.js
This is a JavaScript file that’s executed in the context of web pages. It means that this file enables content script to interact with websites and web pages that the user opens in their Chrome browser.

Step 3 – Image Icon
Add your icon file in png format to the folder. You can either download or create an icon for your extension.

Step 4 – background.js
While you have installed the extension, there are no instructions present. Create a file named background.js and add a background script. Place this file in the extension folder. Ensure that you’ve registered your background script in the manifest which tells your extension what files to reference and how certain files will act.

Step 5 – Creating and Naming Extension
Once you are done, add all the files to a folder and name it after your extension.

best chrome extensions for web developers

If you’re a developer, you will likely already have a collection of favourite Chrome extensions you use on a daily basis. Extensions that make life easier, make you more productive or perform an essential task better than a dedicated tool. This list may build on that collection.

As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 64.4% of internet users. While it isn’t big on privacy, it certainly aces productivity!

We polled our own team and asked every dev we know for their list of Chrome developer extensions they use regularly or would suggest. What follows is a curated list of the best Chrome extensions for developers around right now.

These may not be the most popular extensions but they have been tried, tested and not found wanting by the Astra team!

The Best Chrome Extensions for Web Developers
As development has several specialities, we have divided our list into two. One part containing tools useful for web developers and the second tools for generalist developers.

There’s sure to be something here you could use!

  1. Githunt
    githunt extension for chrome
    Githunt is useful if you spend a lot of time on GitHub looking for new projects to work on. Rather than depending on GitHub’s trending projects feed, this Chrome developer extension brings it to the fore by highlighting all trending projects in a new tab area in your browser.

You can search projects in different languages, read a brief project description and the number of current open issues. You can then simply select the project within the tab to go to the project and inspect further. It’s a very useful little extension if you like contributing to new projects.

4,000+ users

Rating: 3/5 for answer a need in a narrow niche

Get Started with Githunt
Sujay Pawar
Hello! My name is Sujay and I’m CEO of Astra.

We’re on a mission to help small businesses grow online with affordable software products and the education you need to succeed.

Leave a comment below if you want to join the conversation, or click here if you would like personal help or to engage with our team privately.

  1. WhatFont
    What font chrome extension
    WhatFont is a very useful Chrome extension for developers who need to identify fonts used on web pages. It’s fast, effective and identifies individual fonts within a page in seconds. It also identifies the family, size, weight and colour. All within a small popup window in the browser.

WhatFont is ideal for web developers who like to collect examples of great pages they might want to emulate in the future. It’s small, doesn’t use many resources and well worth using. It hasn’t been updated in a while but still works perfectly.

1,000,000+ users

Rating: 3.5/5 for usability

Get Started with WhatFont

  1. Fonts Ninja
    font ninja chrome extension demo
    Fonts Ninja works in a similar way to WhatFont to identify fonts within a web page. It’s a useful alternative if WhatFont isn’t working out for you for any reason. It works in much the same but has a smaller interface. Otherwise, the two extensions look and feel very similar.

Install the extension and you should see a small green ninja icon in your toolbar. Open a web page in Chrome, select the icon and hover over a font you want to identify. You should see a page overview popup and an individual popup over the highlighted font. Simple but very effective.

300,000+ users

Rating: 3.5/5 for usability

Get Started with Fonts Ninja

  1. ColorPick Eyedropper
    Colorpick eyedroper chrome extension
    ColorPick Eyedropper is a very neat zoomed selector for web pages. It’s a useful Chrome developer extension because it can quickly identify any colour on any web page and zooms in so you can even select a border 1px wide. While you may not use it every day, it’s an excellent tool to keep on hand.

Once you install ColorPick Eyedropper, you simply select the colour wheel icon to activate it. Your cursor will change to a crosshair, highlight the section you want to identify and you should see the RGB values and the hex appear on the right of the screen.

1,000,000+ users

Rating: 3.5/5 for usability, zero for UX design

Get Started with ColorPick Eyedropper

  1. Window Resizer
    Windows resizer chrome extension
    Window Resizer is an incredibly useful Chrome extension for web developers. It’s simple but very effective, especially when working with responsive designs or apps. It installs into Chrome and will resize any screen you’re working on to a range of popular screen sizes.

Most common sizes are covered, mobile, tablet, desktop and the emulation seems very accurate. The guys here use Window Resizer a lot and rate it highly. That’s good enough for us!

600,000+ users

Rating: 4.5/5 for usability and simplicity

Get Started with Window Resizer

  1. BrowserStack
    BrowserStack chrome extension
    BrowserStack is another exceptionally useful Chrome extension for web developers. Like Window Resizer, this extension allows you to test your work for responsiveness. Rather than different screen sizes, this extension lets you test with different browsers.

Install the extension, open your page in Chrome, select BrowserStack and select a device option from the tab. The page will then be rendered using an emulation of a browser on that device. Simply but very effective. You do need a BrowserStack account for it to work properly though.

100,000+ users

Rating: 3/5 usability is high, the requirement for an account is a definite mark against it.

Get Started with BrowserStack

  1. CSS Viewer
    CSSViewer chrome extension demo
    CSS Viewer is another simple but very effective Chrome extension for web developers. As its name implies, this addon shows you the CSS properties of a given page wherever you hover your mouse. A small popup window appears showing you the CSS data that makes up the element you’re pointing at.

This is a very smart extension that makes short work of identifying key CSS properties anywhere you point your mouse.

100,000+ users

Rating: 4/5 for simplicity and ease of use

Get Started with CSS Viewer

  1. Lorem Ipsum Generator
    Lorem Ipsum Generator
    Lorem Ipsum Generator is one of the best Chrome extensions full stop. It does what its name suggests it does. It generates filler text for demo websites and does it well.

Simply install the extension, select it within a page, tell it how much Lorem Ipsum copy you want to generate and copy it from the window. Paste it into your page and you’re done.

20,000+ users

Rating 4/5 for ease of use

Get Started with Lorem Ipsum Generator

  1. Corporate Ipsum
    Corporate Ipsum chrome extension
    Corporate Ipsum is a popular alternative to the Lorem Ipsum Generator. If your client is more picky about placeholder text or you want to add to the feel of a business website, this is where you come. This Chrome developer extension generates lorem ipsum but with a corporate twist.

It works much like the Lorem Ipsum Generator too. Install the extension, open your page, select the icon and tell it how much copy to generate. Copy and page it into place and move onto the next. It’s a fast, simple way to generate more business-oriented placeholder text.

10,000+ users

Rating 4/5 for ease of use and for filling a specific need

Get Started with Corporate Ipsum

  1. Ghostery
    Ghostery extension for chrome
    Chrome is a great browser for many things but privacy is not among them. Ghostery aims to help with that. It’s a privacy extension designed to block intrusive ads, stop tracking, prevent data collection and block all those page elements that slow you down.

While Ghostery doesn’t provide any useful tools for web development, it keeps your browsing experience clean and makes everything faster. Every Chrome user should install Ghostery!

2,000,000+ users

Rating 5/5 for effectiveness

Get Started with Ghostery

  1. Wappalyzer
    Wappalyzer chrome extension
    Wappalyzer is a very effective tool for identifying the underlying technologies behind web pages. It quickly identifies web services, CMS type, analytics tools, plugins, JavaScript libraries and a whole host of other apps. If you want to know the secrets behind a page, this is one way to find out.

Just install the extension, select it while on a page and a popup window will appear highlighting all identifiable apps running on that page.

1,000,000+ users

Rating 4/5 for usefulness and clear UI

Get Started with Wappalyzer

  1. Clear Cache
    clear cache chrome extension
    How many times have you modified a setting and wondered why the change wasn’t reflected on screen? You’re not alone, which is why Clear Cache is such a useful Chrome developer extension.

Install the extension and select the small recycle icon in your browser to clear the browser cache. There are no confirmations and no extra dialogs to contend with. This tool just does what it’s supposed to do and we can all move on. We love it for that.

800,000+ users

Rating: 4.5/5 for simplicity

Get Started with Clear Cache

  1. HTML Validator
    html validator chrome extension
    HTML Validator is a quick tool for checking your HTML within a browser. There are hundreds of HTML tools out there and you’ll likely have a bunch of them already. But HTML Validator is genuinely useful for quickly validating markup within the browser.

Install the extension, open a developer window on the page and navigate to the HTML Validator tab. All your HTML goodness is displayed within with errors at the top.

30,000+ users

Rating: 4/5 for usability but there is lot of competition out there

Get Started with HTML Validator

  1. Keyframes
    Keyframes chrome extension
    Keyframes is one of the best Chrome extensions for web developers who want to create CSS animations within the browser. While there are lots of tools out there for animation, this extension makes short work of creating basic animations within a simple popup window.

Just install Keyframes, open a page, select the red and blue icon and highlight a CSS element you want to animate. Edit that element in the side box to add your own piece of animation to the page. Simple and effortless!

20,000+ users

Rating: 3.5/5 for being genuinely useful if limited CSS animation tool

Get Started with Keyframes
The Best Chrome Extensions for Developers
The needs of some developers differ from those of web developers. That’s why we split our list of the best Chrome extensions for developers into two. While still useful across the board, what follows are more dev oriented Chrome extensions rather than web tools.

  1. React Developer Tools
    React Developer Tools chrome extension
    React Developer Tools are specifically for the open source React JavaScript library. If you work with React, this extension helps you inspect the library as required.

Install the extension and you should see two icons appear in the Chrome toolbar. One is for Components and the other for Profiler. Components shows you what React is using on the page and Profiler shows you performance data. If you work with React, this is an essential tool to have!

2,000,000+ users

Rating: 4/5 for ease of use for a niche library

Get Started with React Developer

  1. JSON Viewer
    json viewer extension
    JSON Viewer is an alternative to JSONView and helps manage JSON data into a quickly recognizable hierarchy view in a browser window. Working with raw JSON data is fine when you have the time, but using this addon makes the code easier to quickly absorb and use.

It’s a small Chrome developer extension but it’s well worth checking out. With over 800,000 users and glowing reviews, this is definitely an extension to try.

800,000+ users

Rating 4/5 for reliability and ease of use.

Get Started with JSON Viewer

  1. ColorZilla
    ColorZilla chrome extension
    ColorZilla is a superb Chrome developer extension for colour selection. It includes an eyedrop colour selector, a colour history tool, a CSS gradient analyzer and a page analyzer that assesses colours on a web page.

If you come across a website whose palette resonates, this tool helps you identify the combinations or individual colours in seconds. It’s an essential extension for anyone who deals with colour on the web.

2,000,000+ users

Rating: 4/5 for usability and productivity

Get Started with ColorZilla

  1. Dimensions
    Dimensions chrome extension
    Dimensions is a dynamic measure that uses your mouse. It’s a very useful Chrome developer extension if you want to measure spacing, dimensions, gaps between page elements and anything else you see on the page.

Once installed, you’ll see a small crosshair icon on your toolbar. Open a page in Chrome, select the icon and you should see a crosshair appear on screen. Move it around where you want to measure and you’ll see exact dimensions appear by the cross. Simple but very effective.

100,000+ users

Rating: 4/5 for usability and productivity

Get Started with Dimensions

  1. Page Ruler
    page ruler chrome extension
    Page Ruler is similar to Dimensions in that it’s a dynamic measurement extension. While Dimensions can measure the height and width of elements, it is more useful for measuring between them. Page Rule measures those elements very accurately.

When you need to measure something, select the ruler icon so it turns orange. The page fades, allowing you to draw the element you want to measure. The extension will then present the exact measurements of the element in a small popup box beside it.

10,000+ users

Rating: 3/5 simple but takes a minute to figure out how to use it

Get Started with Page Ruler

  1. UX Check
    ux check chrome extension
    UX Check is a usability analyzer that assesses a page using Nielsen’s 10 heuristics. It can quickly highlight potential usability issues and enables you to add notes, take a screenshot and export the findings ready to share within the team.

UX Check is a very effective way to perform lightweight user testing without going into too much detail. Ideal as a first pass test before handing a project off for full testing.

30,000+ users

Rating: 4/5 for productivity and ease of use

Get Started with UX Check

  1. Check My Links
    check my links chrome extension
    Check My Links does exactly what it says on the tin. It’s a super-simple way to check for broken links. It can also check for valid links and redirected links as well as broken ones. While technically a dev tool, this Chrome developer extension could be useful for SEO and other specialities too.

Once installed into Chrome, you should see a small checkmark icon in your toolbar. Load your page, select the icon and a popup window will appear with all links assessed. Depending on the size of the page, this might take a few seconds but it works flawlessly.

200,000+ users

Rating: 4.5/5 for usability across web disciplines

Get Started with Check My Links

  1. Web Developer Checklist
    web developer checklist chrome extension
    Who doesn’t love a checklist? Web Developer Checklist is a Chrome developer extension that gives you a checklist of all the things that need to be completed on a page before publication. It’s a very useful add-on for busy developers.

Install the extension and you’ll see a code icon appear in the toolbar. Select it while on a page and a popup will appear with best practices you need to complete before publication. They include SEO, mobile, usability, accessibility, social, performance and other selectable measures.

A true lifesaver.

40,000+ users

Rating: 4/5 for ease of use and usefulness

Get Started with Web Developer Checklist

  1. Checkbot
    checkbot chrome extension
    Checkbot is similar to the Web Developer Checklist in that it checks a page for links, errors, security, performance, SEO and a range of other considerations. It’s a very useful tool that adds to your repertoire and can be useful for a last pass before publication.

Checkbot installs in the same way all extensions do. Once done, select the blue icon to bring up the sidebar. Use the menus there to select the type of test you want to perform and the results will be displayed on the page.

30,000+ users

Rating: 4/5 for covering basic tools and adding basic security checks

Get Started with Checkbot

  1. Web Developer
    Web developer extension for chrome
    Web Developer is a suite of tools contained within a single Chrome extension. While titled ‘Web Developer’ we think this tool is suitable for general devs too as it contains a range of useful tools that any dev can use.

Once installed, Web Developer is accessible using the small cog icon in the toolbar. Once selected, you should see a small dropdown box appear with a range of options organized into tabs. Select a tab to access the tools within. There is a lot going on here but each tool is genuinely useful.

1,000,000+ users

Rating: 4/5 for having so many tools for so many tasks

Get Started with Web Developer

  1. EditThisCookie
    Editthiscookie chrome extension
    EditThisCookie is an exceptionally useful Chrome extension for developers. It enables you to edit, delete, create and protect cookies on a per-page basis. It also lets you export them for analysis, block them, import them into JSON and generally do as much as you could possibly need to do to a cookie.

The most useful tool is the ability to search and read cookies. Devs will find most of the tools useful at one point or another.

2,000,000+ users

Rating: 3.5/5 for sheer number of things you can do with a cookie

Get Started with EditThisCookie

  1. Lightshot
    lightshot chrome extension
    Lightshot is another of those Chrome developer extensions that could be useful for all kinds of people. While devs will likely use it a lot, UX testers. user testers, instructors, graphic designers and all kinds of users will make great screenshots with this tool.

Once installed, open the page you want to screenshot and select the feather icon. Drag and drop the cursor across the area you want to capture. Select from the popup menu that appears and save the shot.

1,000,000+ users

Rating: 4/5 for being simple but very effective

Get Started with Lightshot

  1. Session Buddy
    session buddy chrome extension
    Session Buddy is another generalist tool useful for developers and any type of web user. It’s a ‘save it for later’ tool that can save all open tabs in a single session for later access. It is useful when you come across something you want to read later or for protecting productivity if you use multiple tabs.

Once Session buddy has been installed, select the small icon from the toolbar to see all your open tabs. You can select the icon after a browser crash to recover all tabs and save the session to load later. A very useful tool for any web user!

1,000,000+ users

Rating: 4/5 for protecting the world against browser crashes

Get Started with Session Buddy

  1. Daily.dev
    daily dev news extension
    daily.dev isn’t a productivity tool per se, but it does make our lives much easier. It’s a news aggregator that specializes in development news. It showcases a page full of news stories, blog posts and useful pages on our chosen subject.

Daily acts like a start page and news aggregator. Select an item on the page to visit that page. Each opens in a new tab and will be a mixture of news, reviews, advice, how-tos and all the good stuff that keeps us growing as developers. This is an excellent extension to use if you like to stay current.

40,000+ users

Rating: 4.5/5 for bringing all our news into one place

Get Started with Daily.dev
Summary of the Best Chrome Extensions for Developers
This list of the best Chrome extensions for developers is diverse to say the least. While we divided it into two sections, they are very loose sections as you can see. There are tools in each that are useful for every type of developer as well as some specialized ones fit for narrower niches.

What we hope you take away from this article is a couple of new developer tools to make your life easier. Whether that’s by increasing productivity, solving problems or streamlining a process, there are tools here that do all those things and more.

Do you have any Chrome developer extensions to recommend? Use any of the above and want to share your opinion? Tell us about it below if you do!

Conclusion

Let us know your thoughts in the comment section below.

Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines

Leave a Reply

Flux Resource Help Chat
Send via WhatsApp