Professionally, privately, for charity or “just for fun”: nowadays, online publishing is par for the course. Browser extensions can serve as practical aids and render work processes more efficient. In this blog entry, our Web & Digital Media team showcases a selection of its favourites.

What is a browser extension?

An extension adds a new function to a browser so it can perform additional tasks. An extension therefore enables the browser to be tailored more specifically to your own needs.

Unlike browser apps, extensions only have a small – or even no – user interface component of their own. This means either integrating them with a service already used (e.g. OneNote Clipper), adding new features to the browser or changing individual elements directly on a website (e.g. like Currency Converter for prices on a website). Apart from a handful of exceptions, this is how extensions work on websites and web app.[¹]

Chrome, Firefox and Internet Explorer

• Chrome has consistently been the most popular browser worldwide since 2012 (see Statista)[²],due in no small part to the wide range of extensions and apps available for it. Consequently, this blog entry is geared towards Chrome.
• Firefox is also famous and popular for its variety and number of available extensions, which boast a range of functions that wouldn’t be possible with other browsers. A subsequent blog entry will focus on Firefox extensions.
• The range of add-ons is comparatively small for Internet Explorer.[³]

Ten Chrome extensions

Window Resizer

What does your homepage look like on different terminal devices? Window Resizer enables you to quickly determine how a responsive website behaves. It alters the size of the browser window in one click and simulates different screen sizes. Although the same function exists in Google Developer Tools, this extension saves you a few clicks.

Figure 1: Adjusting the size of the browser window with Window Resizer

Font Playground

This extensions enables live websites to be displayed in different fonts. In each case, locally saved and Google fonts can be used.

Figure 2: ETH Zurich’s homepage with the Monotype Corsiva font

What Font

You like a website and want to know which font was used? The extension What Font is just what the doctor ordered! It is activated by clicking once on the icon next to the Omnibox. If you move the mouse over the text elements, the font used is faded in via Tooltip.

Figure 3: Using What Font to determine the font on Innovation@ETH-Bibliothek

ColorPick Eyedropper

This tool enables website colour values to be extracted. The colour can be selected with pixel precision, which also makes the extension ideal for photographs. The range of functions is clear and simple.

Figure 4: Using ColorPick Eyedropper to determine the colours on the Thomas Mann Archive Online’s homepage

ColorZilla

The colour values of websites and images can also be determined with ColorZilla. Moreover, the colours of all the CSS elements on a website can be established using the Webpage Color Analyzer. An additional gradient generator also makes the extension a tool for advanced usage.

Figure 5: ColorZilla tested on E-Pics

Check my links

So many links on a website and no time to test whether each one works? Then “Check my links” is just the ticket! The extension shows the number of links on a page and breaks them down into those that work and those that don’t by highlighting them on the page in green or red.

Figure 6: Link check on a Knowledge Portal page

Project Naptha

This practical extension enables OCR text recognition for images. The text in question can be highlighted, copied and even edited or translated. Although the application possibilities are manifold, the tool is not particularly intuitive to operate at first so it might be helpful to have a look at one of the tutorials that users have uploaded onto YouTube (e.g. by N. Boyd).

Figure 7: Website screenshot Project Naptha

aXe

The extension aXe is a helpful tool for testing the accessibility of websites. Once installed, it is not displayed as an icon next to the Omnibox, but rather extends the selectable tabs of the Google DevTools integrated in Chrome. Right-click on the website displayed and open the panel via “Test”. Then select the tab “aXe” and start the analysis. Any elements that are problematic for accessibility are then listed. Additional, more detailed information on the brief descriptions contained in the list can be retrieved.

Figure 8: aXe before starting the analysis for e-manuscripta

Page Load Time

This extension enables a website’s loading times to be gauged and displayed directly in the toolbar – very practical to get an idea of where you stand in terms of web performance.

Figure 9: Load Time measurement based on the example of the Knowledge Portal

SEOStack Keyword Tool

This tool might be helpful for anyone involved in search engine optimisation (SEO). SEOStack shows which search requests are conducted based on “seed keywords“. This enables you to develop a better understanding of which search requests the users make most frequently in connection with your own service. Here, the tool relates to searches on Google and YouTube.

Figure 10: Screenshot of SEOStack, longtail keywords for seed “ETH-Bibliothek”

[1] https://developer.chrome.com/webstore/apps_vs_extensions
[2] http://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der-internetnutzung-weltweit-seit-2009/
[3] http://www.howtogeek.com/169080/beginner-geek-everything-you-need-to-know-about-browser-extensions/

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International Public License.

DOI Link: 10.16911/ethz-ib-2227-en