This post has been provided by our Product Specialist Phil Timmins.
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.
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.
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).
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.
padding:8px 8px 8px 16px;
border-bottom:1px solid #eee;
background:#F2EFDC; -> background:#000;
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.
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.
Deploying chrome extensions to your domain or publishing via the store: