Enhance your FrogLearn using Google Chrome extensions

This post has been provided by our Product Specialist Phil Timmins.

Frog have always recommended using Google Chrome web browser for FrogLearn, and although any modern browser will perform well, we’ve found Chrome offers the fastest user experience.

So, assuming Chrome is your browser of choice, you now have access to a number of tools allowing you to enhance the user experience without requiring Frog to modify the core application.

Here’s an example problem…

I’m still a dinosaur when it comes to consuming news content, and I rely on trusty RSS feeds to update me daily. Unfortunately the RSS widget view in FrogLearn isn’t optimised for consuming large quantities of feeds, and when you’re popping multiple items on to a page it can be difficult to read them. I’m going to show you how you can use a Chrome extension to fix this.

Before:
blog1

Now try the extension

Go to the Chrome Store and search ‘frog tidy rss’, you should see the extension in the search results. Select the extension, then install. Once loaded you should see a Frog icon in the top right of your browser, clicking this will present a small amount of information about the extension.

Go to your FrogLearn and drag on an RSS widget and it should look very different, disable/enable the extension in the chrome://extensions panel to test the differences.

After
blog2

Getting started as a developer

Now I’ll walk you through the process of editing this very simple Chrome extension to demonstrate how easy it is to get started.

 

Building Chrome extensions

There are tons of great resources providing information on how to build a Chrome extension. I’m not going to recycle these, but will highlight the absolute basics to get this example working.

 

Getting started with the RSS extension

Enable developer mode by entering chrome://extensions in your browser, ensure that the developer mode checkbox in the top right-hand corner is checked.

Download the extension from https://github.com/coffeerings/frogrss, you can either clone the repo or download the extension as a zip file from https://github.com/coffeerings/frogrss/archive/master.zip then unzip.

Load the extension in the chrome://extensions tab then click the ‘Load unpacked extension’ and select the unzipped folder you’ve downloaded from Github.

When the extension is loaded you should see a Frog icon in the top right, clicking this will present a small amount of information about the extension.

Now visit FrogLearn, drag the RSS widget onto the page and point it at the feed (http://feeds.feedburner.com/Siteinspire for example).

blog3

 

Editing the extension

Changing the RSS description background colour.

Open the Extension folder in your favorite development environment. You should see 4 files

  • icon.png – the icon!
  • application.html – contains the content for the extension popup (when clicking the Frog icon in the top right)
  • application.css – contains the styles injected into the page to enhance the widget view
  • manifest.json – contains the meta data required to run a chrome extension

Open the application.css and look for the style .widget-content.widget_rss small: change the background property to #000.

.widget-content.widget_rss small{

padding:8px 8px 8px 16px;

display:block;

border-bottom:1px solid #eee;

background:#F2EFDC; -> background:#000;

text-overflow: ellipsis;

height:20px;

white-space: nowrap;

overflow: hidden

}

In the chrome://extensions tab, click the ‘Reload’ link at the bottom of the extension description. Visit the tab and your description background should now be black.

And that’s how you get started! As you can see this is a very simplistic extension quietly injecting CSS into a page to enhance the view. There’s no discretion which sites the style is applied to so refinement is definitely recommended.

Where next

Chrome extensions are a powerful tool, using JS, CSS and the Chrome API. They allow developers to extend the FrogLearn experience much further than you would typically expect. First thoughts around possible extensions are accessibility, notification handling and integrating third party services such as Discover.

Further reading

Deploying chrome extensions to your domain or publishing via the store:

About Frog

www.frogeducation.com
This entry was posted in Frog news, Hints and tips, News and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s