Chrome Extension: Development Inspector

Chrome Extension: Development Inspector

Analyzes your website and guides you to improve page-load and SEO.

Scroll to learn more

Goals & Objective

Troubleshoot your website quickly and get recommendations on how to improve its performance and help out with your search engine optimisation.

Analyse meta content in one click, get feedback on how to optimise meta data for the majority of search engines. 

Find out if the page is loading slow, and what content that may slow it down.

Add extension to chrome

Creation Phase

Developing a Chrome Extension

Chrome Development

The first constrain while developing the extension appeared when creating the toggle function. The idea was when it was toggled, it would be active at all time, and reload on every page request. I quickly noticed it didn't work well with Angular.JS applications so I satisfied with toggling the extension every time it was necessary.

When the extension is triggered, instead of the scripts loading on the page, the scripts were loaded in the background. A value that would result with undefined would now return error and kill the script. This required fail-safe development to prevent the script for being killed.

Chrome Extension : User Interface

User Interface

The extension was initially created to be placed in the top of the page. However, as navigation is commonly in the top I found it blocking the usage of sites and therefore decided to move the extension to the bottom of the view-port.

As an addition, I found minimising the extension was required. This to prevent users from closing the extension when they browse the page. The extension is there to help, not to frustrate the users while optimising their website.