Google Chrome extensions add extra features and functionality to your favorite browser. In this article, I provide a brief explanation about what extensions are, what makes
them run, and how to add and manage them. I also highlight extensions that assist me in my web
development on a regular basis and that I like to use in my Chrome installation.

What are extensions?

Chrome extensions are tiny applications that modify the way Chrome
runs on your desktop, and are typically written with web technologies such as
HTML, HTML5, JavaScript, and CSS3. Extensions allow you to customize your Chrome browser with features you like and omit those that you have little or no interest in using.

You can download extensions from the Chrome Web Store through the Extensions gallery. Extensions range in topics from categories such as Accessibility, News and Weather, Productivity, Search Tools, and
Sports. 

Managing your extensions

There are several ways to manage your installed extensions,
including organizing them in the browser toolbar, adjusting your extensions options, and disabling extensions depending on your browsing activity or
projects.

To open the Extensions page from Chrome, click the Chrome menu bar on the top right of the browser
toolbar, select Tools, and then select Extensions (Figure
A).

Figure A

The Extensions page is now displayed. Figure B shows an example from my
implementation.

Figure B

See an enlarged view of Figure B.

You can also sync
your extensions across multiple computers; however, this requires you to log
in to your Google account. This practice is not recommended for public or untrusted
computers since a copy of your Google data is stored locally and can be
accessed by other people using the same computer. One workaround for this security concern is to delete your
user from the computer once you’re finished; the instructions for this
task are part of the how-to for managing multiple users on Chrome.

Four Chrome extensions I use for web development

Responsive
Inspector allows you to inspect any media
queries that are included in the web page in the current browsing tab. For more details, read my TechRepublic article, Chrome
add-on Responsive Inspector lets you preview media queries (Figure C).

Figure C

Web Developer adds a toolbar button and is the official Web
Developer extension for Firefox. The extension allows you to analyze
web pages, layouts, disable functions, change cookie settings, disable and
modify CSS settings, and more (Figure D).

Figure D

PerfectPixel allows you to put semi-transparent layered image
overlays over the top of the developed HTML and perform per pixel comparisons
between the layers and the live web page. The sample screen capture below
displays an image set as a layer and being dragged into place for a pixel
comparison (Figure E).

Figure E

Adobe
Edge Inspect CC allows you to view web pages from your desktop and
share it while synced across multiple mobile devices. It is especially
useful for testing web pages on various devices from one browser tab in
Chrome (Figure F). (Read: Test your website on mobile devices with Adobe Edge Inspect CC and Use the Adobe Edge Inspect CC testing tool)

Figure F

Tell us in the discussion which Chrome extensions are your favorites.