Crossrider's Blog

Often extensions employ a remote database for storing/collating data. Setting up and managing such databases can be time consuming, costly, and an undesireable overhead. Google Spreadsheet provides a convenient and flexible JavaScript Service API that can utilize a spreadsheet as a remote database.

This blog walks you through the steps required to create, configure, and code a simple Crossrider extension that counts page visits using a spreadsheet as a database.

Let's start by creating a Google Spreadsheet:

Create a new Spreadsheet in your Google Docs account (Sheets > Create new spreadsheet) and optionally give it a name (e.g. Blog Database).

Add the required column headings (e.g. URL, Count) and format the column cells as plain text (Select the columns > Format > Number > Plain text).

Make a note of the sheet's Alphanumeric ID. You can get the id from the sheet's URL:

In the next step, we add and deploy the sheet's server-side script:

Create the server-side script (Tools > Script editor).

In the editor, add the following code for handling HTTP GET requests (for more information, see Web Apps and Google Sites Gadgets and Spreadsheet Service:

// Global vars var actions = { getUrlCount: getUrlCount, incUrlCount: incUrlCount }, sheetId = '', // Specify the SHEET_ID here data = {}; /** * Handles API requests received via the HTTP GET method/verb * @param {object} request * @return {JSON} res */ function doGet(request) { // return if action is not specified var action = request.parameter.action; if (!action) return ContentService.createTextOutput(JSON.stringify({ action: action, error: 'Missing parameter: action not specified' })) .setMimeType(ContentService.MimeType.JSON); // get URL of visited site and initialize response var url = request.parameter.url, res = { action: action, count: 0 }; // process if action function exists if (typeof actions[action] == "function") { // set sheet information data.sheet = SpreadsheetApp.openById(sheetId).getSheets()[0]; data.cells = data.sheet.getDataRange().getValues(); // set response count res.count = actions[action]("" + url); } return ContentService.createTextOutput(JSON.stringify(res)) .setMimeType(ContentService.MimeType.JSON); } // Helper functions /** * Searches sheet for the row containing the specified * @param {String} url * @return {Number} row */ function findRow(url) { // Iterate through the rows and find matching url for (var i=1; i<data.cells.length; i++) { if (data.cells[i][0] == url) { return i; } } return null; } /** * Gets the URL visits count from sheet * @param {String} url * @return {Number} count */ function getUrlCount(url) { var row=findRow(url); return (row) ? data.cells[row][1] : 0; } /** * Increments visit count for specified url * @param {String} url * @return {Number} count */ function incUrlCount(url) { // Find row containing url var row = findRow(url); // url does not exist, append new row and initialize count to 1 if (!row) { data.sheet.appendRow([url, 1]); return 1; } // url exists // Get current visit count and its sheet cell var count = data.cells[row][1], cell = data.sheet.getRange("B" + (parseInt(row, 10) + 1)); // Increment visit count cell.setValue(++count); return count; }

Deploy the script as a web app (Publish > Deploy as web app) with the following settings:

Execute script as: me

Who has access to the app: Anyone, even anonymous

NOTE: To test each change you make to the script, save the script (File > Save), increment the version (File > Manage versions), and deploy it.

Make a note of the script's Alphanumeric ID. You can get the id from the script's URL:

NOTE: Google Services implements limits on the number of API calls. For more information, see Quotas for Google Services.

Finally, we create a Crossrider extension that uses the deployed web app. The code for this example, is comprised of the following: (a) code for incrementing the page visit count, and (b) code for displaying the current page visit count. The extension simply runs on each page, sends a request to increment the visit count, and then displays a banner showing the global number of page visits for 3 seconds.

Start by creating a new extension (My Extensions > Create New Extension),

and then edit the code (Edit Code > extension.js).

In the editor, add the following code:

appAPI.ready(function($) { // Execuet script API URL without parameters var execUrl = "https://script.google.com/macros/s/SCRIPT_ID/exec"; // Specify the SCRIPT_ID here /** * Defines functions that use the Web App script: * @param {String} action * @return {Number} function(url, onSuccess, onFailure) * - url: url visited. Defaults to current page URL * - onSuccess: callback function if request succeeds * - onFailure: callback function if request fails */ function defineFn (action) { // return if action is not specified if (!action) return; return function (options) { // Set options url = options.url || window.location.href; onSuccess = options.onSuccess || function (){}; onFailure = options.onFailure || function (){}; /** * onSuccessWrapper: wrapper to parse response data * requestUrl: API URL with parameters applied */ var onSuccessWrapper = function (data) { try { onSuccess(appAPI.JSON.parse(data)); } catch (e) { onSuccess(null); } }, requestUrl = execUrl + "?action=" + action + "&url=" + url; // Make GET request appAPI.request.get({ url: requestUrl, onSuccess: onSuccessWrapper, onFailure: onFailure }); }; } // Define increment visit count function var incUrlCount = defineFn("incUrlCount"); // Optional: Define get visit count function //var getUrlCount = defineFn("getUrlCount"); // Inject notification HTML into page $('') .css({ 'background-color':'#000', 'color':'#fff', 'font-size':'12px', 'height':'20px', 'line-height':'20px', 'position':'fixed', 'text-align':'center', 'top':'-20px', // Hide notification 'width':'100%', 'z-index':'99999' }) .appendTo('body'); // Increment the page visit count and then display notification incUrlCount({ url: location.origin + location.pathname, // current page URL onSuccess: function(response) { if (response.count) { // Display notification if increment succeeded $('body').animate({'margin-top': ['20px', 'swing']}); $('#gsdb-demo') .html('This page has been visited '+response.count+' time'+((response.count!==1)?'s':'')) .animate({'top': [0, 'swing']}); appAPI.setTimeout(function() { $('body').animate({'margin-top': [0, 'swing']}); $('#gsdb-demo').animate({'top': ['-20px', 'swing']}); }, 3000); } } }); });

It’s that simple and a significant step forward in developing extensions using remote databases. Give it a try, feel free to improve the code, and see for yourself just how easy it is to use our platform.

Finally, you are invited to try our Google Spreadsheet demo extension and rise to the challenge of making your own cool extensions. Get started quickly by cloning the demo extension (Edit Code > Clone This Extn).

Messages come in many forms, contexts, and architectures and when writing extensions, it's often necessary to pass information between scopes. This can be for many reason such as information that's only available in one scope (e.g. only the extension scope has access to the page HTML, or the background scope having access to browser bookmarks), and you want to pass it to another scope.

The information can be shared either passively via the extension's local storage (appAPI.db.async) or actively via the messaging (appAPI.message) mechanism. Furthermore, the exchange of information can be unidirectional (one-way) or bidirectional (two-way), but regardless of the scopes and the directions involved, the mechanism is same.

Note: When choosing an appropriate mechanism, it's worth considering the relative pros and cons of each method. For example, sharing a large amount of data via messaging may present performance issues and limitation (e.g. Internet Explorer is limited to 8KB per message) whilst sharing via the local database lacks immediacy.

The process for sharing via messaging is simple, one scope initiates the sending of a message and, as long as the receiving scope has a listener to receive the message, the massage passes from the sender to the receiver.

Unidirectional

For example, let's take the following unidirectional scenario where the extension scope wants to pass the page title to the background scope, so that the background scope can use it to add the page as a browser bookmark (appAPI.bookmarks):

extension.js:

appAPI.ready(function($) { // Send message to background scope appAPI.message.toBackground({ request: 'save-bookmark', url: window.location.href, title: $('title').text() }); });

background.js:

// Make sure bookmark plugin is added to extension appAPI.ready(function($) { // Message listener to receive messages from any scope appAPI.message.addListener(function(msg) { if (msg.request === 'save-bookmark') appAPI.bookmarks.getDefaultFolder(function(node) { appAPI.bookmarks.create({ title: msg.title, url: msg.url, parentFolder: node }); }); }); });

Bidirectional

Often, a bidirectional communication is required and is implemented in the same manner as the unidirectional example, except that senders and listeners are added to both scopes as required. Take the following example, where the popup scope requires the page URL. The popup scope itself cannot directly access this information, but the extension scope can. In this scenario, the popup scope initiates the bidirectional communication by sending a message to the extension scope requesting the page URL, and then the extension scope responds with the information.

extension.js:

appAPI.ready(function($) { // Message listener to receive messages from any scope appAPI.message.addListener(function(msg) { if (msg.request === 'get-page-url') // Send information to popup appAPI.message.toPopup({ request: 'get-page-url', url: window.location.href }); }); });

background.js:

// Make sure bookmark plugin is added to extension appAPI.ready(function($) { // Message listener to receive messages from any scope appAPI.message.addListener(function(msg) { if (msg.request === 'get-page-url') console.log('Received page URL:'+msg.url); }); // Initiate request for page URL appAPI.message.toActiveTab({ request: 'get-page-url' }); });

Between Iframe and Parent Window

You can even use messaging to communicate between an iframe and the page that contains it. For example, if an extension needs to know the URL of iframes that are ready, the instance of the extension scope running in an iframe can send a message to the instance of the extension scope running in its parent page.

Let's take a moment to understand how this works. An instance of the extension.js code runs in the scope of the parent page and another completely independent instance runs in the iframe. However, they are both using the same extension.js file. So how does each scope know what code it needs to run? We distinguish between the code for each scope using appAPI.dom.isIframe, like in the following example:

extension.js:

// Make sure to enable: Settings > Run in iframes appAPI.ready(function ($) { if (appAPI.dom.isIframe()) { // Code run in iframe appAPI.message.toCurrentTabWindow({ request: 'report-url', url: window.location.href }); return; } // Code run in iframe parent window appAPI.message.addListener(function(msg) { if (msg.request === 'report-url') console.log('Iframe ready:: URL: '+msg.url); }); });

Unified Listener

Of course, it isn't necessary or recommended to add a separate listener to receive messages for each scope, a single listener for all scope is sufficient and more efficient. Taking the examples above, in the extension.js code we can have a single listener to handles all the different requests. For example, we can combine the previous 2 examples (the popup and iframe listeners) as follows:

extension.js:

// Make sure Settings > Run in Iframes is enabled appAPI.ready(function ($) { if (appAPI.dom.isIframe()) { // Code run in iframe appAPI.message.toCurrentTabWindow({ request: 'report-url', url: window.location.href }); return; } // Code run in iframe parent window appAPI.message.addListener(function(msg) { // iframe listener if (msg.request === 'report-url') console.log('Iframe ready:: URL: '+msg.url); // popup listener else if (msg.request === 'get-page-url') // Send information to popup appAPI.message.toPopup({ request: 'get-page-url', url: window.location.href }); }); });

Sharing Large Data

Finally, you can share large data using a combination of messaging and the local database, as follows:

extension.js:

appAPI.ready(function($) { // Message listener to receive messages from any scope appAPI.message.addListener(function(msg) { if (msg.request === 'get-large-data') // Get data from local database and use appAPI.db.async.get('large-data', function(value) { console.log('Got large data: ', value); }); }); // Request the background scope to retrieve data from a remote site appAPI.message.toBackground({ request: 'get-large-data', url: 'http://example.com/largedata.php' }); });

background.js:

appAPI.ready(function($) { // Message listener to receive messages from any scope appAPI.message.addListener(function(msg) { if (msg.request === 'get-large-data') { // Initiate request for large data appAPI.db.async.setFromRemote( msg.url, "large-data", appAPI.time.minutesFromNow(10), function(response) { // Send trigger to extension scope to handle data appAPI.message.toActiveTab({ request: 'get-large-data' }); } ); } }); });

It’s that simple and a step forward in sharing data between scopes. Give it a try, feel free to improve the code, and see for yourself just how easy it is to use our platform.

If you are not already a Crossrider developer, click the following link to join our cross-browser extension development framework.

Celebrating their 10th anniversary, Mozilla launches Firefox Developer Edition thus replacing its Aurora channel.

Focusing on the developer workflow, the Developer Edition brings together new and existing tools to complement your building, designing, testing efforts and much more. Simply put, all your favorite dev tools under one roof.

The tools highlighted in this nascent release include:

 Inspector for examining a web page's HTML and CSS and modify using the enhanced IDE

 Web Console for viewing page related information logged to the console. Use JavaScript and jQuery directly from the console

 Debugger to step through code and set breakpoint such as clicking on a button in the page

 Style Editor for easily testing and creating CSS and saving the modifications

 Network for monitoring and measuring requests the browser makes in the process of loading a page

 Responsive Design View shows you how a page will look without having to change the browser window size

Web Audio Editor for inspecting and interacting with connected page audio in real time

Valence for developing and debugging apps across multiple devices

WebIDE for developing Firefox OS apps

Learn more and start using Firefox Developer today.

We hope you will find this new addition to the Mozilla family useful, especially the dev tools in rapidly debugging your extensions.Give it a try and share your experiences by commenting on this post.

One of the greatest frustrations with developing extensions is the lack of professional debugging tools like those integrated into Visual Studio. A friendly interface for step-by-step debugging of extension code is simply missing. Instead, we are left at the mercy of the tools provided by each browsers and third party add-ons such as Firebug.

So what's the best way to go about debugging your extensions. What tips can we give you to help you along the way? This blog provides some basic debugging techniques used by our support team. They are easy to implement and we encourage you to use them in your development cycle. If you have any ideas, share them by commenting on this post.

Picture the following scene (we've all been there and will probably end up there again at some point). You created an extension and it's simply not working. For days you've been pulling out what little hair you have left and banging your head on the computer desk.

In many such cases, the first thing you do is call for help by opening a support ticket. This is great and to be encouraged, but there is no reason why you can't debug yourself. In fact, it helps you to understand how to improve your code. The biggest problem is usually identifying the source of the problem, and this can sometimes be tricky due to knock on effects from earlier code. All too often our support receives a ticket that starts "XYZ API is not working" when in reality it's something else that's not working.

How do you identify the source of a issue? We recommend using some or all of the following techniques to identify and resolve the problem:

Test, Test, and Test Some More

Right from the outset, write code in small incremental steps and test each step as you create them. This may seem obvious, but it really helps you identify the source of an issue quickly as it's likely to be the last bit of code you wrote. Our Debug Mode is perfect for this as you can test the code in real-time. What you don't want to do is write the whole extension and then start testing!!

Use Well-placed, Meaningful Console Messages

This tip alone has helped solve hundreds of support cases as it provides a trace similar to a Call Stack. It helps you to understand the flow of your extension execution and identify the section of code where a problem exists; hence, placing these in your code as you write it makes finding the problem really easy.

Make sure messages are:

Well-placed: You can never have too many log messages (well, maybe you can) but at the very least we recommend placing them at the start of key functions and control flow statements.

Meaningful: Strings are nice, but variables often affect the flow of your code. Therefore, add relevant variables and parameters to you messages to give you a better insight into what is causing an issue. If the variable is an object, use appAPI.JSON.stringify to convert it to a string since not all browsers can display the contents of an object.

Personally, we like to add context to the messages including the scope and calling function in the format "<Scope>::<Function>:<Message>". For example:

console.log('BG::appAPI.ready:DB value - '+appAPI.JSON.stringify(oValue));

For information about viewing console log messages in the different browsers, see How to view console messages.

Use debugger

For browsers that support the JavaScript debugger statement (Chrome is great for this), add them to your code and use the browser's Dev Tools Debugger to step through your code and identify an issue. What's more, you can conveniently set them using our IDE's Edit Code page. Simply click on the line number by the code you want to debug and debugger will be added to the code.

Test Suspected Problems in a Simplified Extension

If you suspect a problem with a specific method, test the method in a simplified extension. For example, the support team has occasionally received bug reports identifying the appAPI.request or appAPI.message API as not working in the popup scope. Creating a simplified extension which only opens a popup and uses the suspected API revealed that the API was functioning correctly. This enabled the developer to then check the rest of the code using the next technique and eventually identify the real problem.

Divide and Conquer Commenting

If you have identified a specific function or section of code where the problem appears to exist but don't know which specific line is causing the problem, try commenting out segments of the code until you identify the specific code that's causing the problem. A simple way to do this, is to comment out approx half the code. Test again and If the problem still exists, repeat the process with the remaining code. If the problem is gone, then uncomment half the previously commented code and try again. Continue like this until you identify the problem.

Try-Catch Blocks

As an alternative to the previous technique, but not always as reliable, try wrapping the suspected code in a try-catch statement.

Of course, if you still can't identify the problem you can always contact our support team with as much of the following details as possible and we will be happy to assist:

The extension id

The file/line number where the code snippet can be found

Which browser and operating system you are testing on including version numbers

The exact steps for reproducing the problem

Any additional useful data, such as URLs, screenshots, videos, ...

Providing the requested information is important as it help us to understand and solve your issues faster.

So now that you’re empowered, give it a try and see for yourself just how easy it is to debug an extension.

Many times we are asked to add a new feature or parameter to a core Crossrider API. As much as we'd love to do make all of these additions, it is not always possible and may also take some time to implement.

Often we are busy building key roadmap features or keeping ahead of the fast-paced browser release schedule to make sure your extension just keep on working.

So we'd like to empower you with how to implement some of your requests yourselves. When we built our API, we had you in mind and so we developed our API in JavaScript making it easily to be extended, meaning you can supplement it with your own code to customize it to your own needs.

Let's take the example of a recent request we received from one of the developers in our community. They asked if we could modify the appAPI.request.get onFailure callback function to also take the original Requesting URL as a parameter. (now's a good time to review the method).

Now, it's not particularly difficult to implement, but it is a lengthy process as we must ensure it's worthy of release:

The product team has to review and approve the feature.

A spec is created and the dev team implements the code changes for all supported browsers in the dev environment, making sure it doesn't break any existing code and maintains backward compatibility.

The new method is then scheduled for QA testing, again on all supported browsers, and if necessary the extension is sent back for further changes and the second iteration begins.

Only once QA has given its blessing, which is no mean task given how rigorously we test our API, the method is scheduled for inclusion in the next release cycle.

So the bottom line is that it's not going to happen quickly! This is exactly the case for a developer to extend the core Crossrider API and to share their innovation with the rest of the community.

So what is actually involved in extending the Crossrider API to add the requesting URL to the onFailure callback?

It's a lot simpler than you think! In the following example, we use a high order function and IIFE to create a private scope for extending the appAPI.request.get method.

// Defensive semicolon ; appAPI.request.get = (function() { /* Save a reference to the original function inside * a "private" scope using the IIFE closure */ var origRequestGet = appAPI.request.get; // Return the extended request method return function(requestDetails) { /* Save a reference to the extended onFailure callback function. * Save it inside a "private" scope using the closure */ var origOnFailure = requestDetails.onFailure; // Redefine the referenced onFailure callback function // using the original request method parameters requestDetails.onFailure = function(httpCode) { /* When callback is invoked, call the extended * onFailure callback function adding the url * details passed to the request */ origOnFailure(httpCode, requestDetails.url); } /* Call original request method with the details passed * to the request */ origRequestGet.call(appAPI.request, requestDetails); } }());

Another, slightly more complex example is a request we received asking for a deferred promise to be added to the appAPI.db.async and appAPI.request methods. To implement this as an extension to the existing API methods, we made use of the jQuery promise feature as you can see in the following github code.

So now that you're empowered, give it a try and see for yourself just how easy it is to extend the Crossrider API. Of course, please feel free to share your innovations with the Crossrider developers community (click Share an idea) for the benefit of others.

If you are not already a Crossrider developer, click the following link to join our cross-browser extension development framework.

At Crossrider, we support the initiatives for a greener and better world.

Though you might not really save the world from global warming using this extension, it does give some ideas on how the right code can actually makes electricity consumption more efficient.

Even if it is a small change, on a large scale, it does matter!

As you already know, the brighter a screen is, the more electricity it uses, so this is why we’ve created a simple yet effective browser extension that acts as a screensaver that you can easily incorporate into your extensions code as well. 

The screensaver monitors activity in the browser and fades the tab content when none is detected for a period of time, 10 seconds for the purpose of this demonstration.

Once activity is resumed, the screen saver is removed and the browser returns to you.

So let’s get started by creating a new extension (My Extensions > Create New Extension),

and then heading over to edit the code (Edit Code > extension.js).

For this extension, we will create a resource file to store our CSS and code in the Extension Page Scope (extension.js). First, let’s add the CSS resource file (style.css) and add the following CSS for styling the element used for fading the tab content.

#x-green-saver { background-color:#000000; border:none; border-radius:0; height:100%; left:0; margin:0; opacity:0; padding:0; position:fixed; top:0; width:100%; z-index:-9999; } #x-green-saver.enabled { z-index:99999; } #x-green-saver p { color:#444; font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 18px; position:fixed; right:20px; text-shadow: 0 1px 0 #666; top:20px; }

Next, we’ll add the code that manages the screensaver functionality using the following top-level algorithm:

Inject the CSS rules in style.css to the page being viewed (uses appAPI.resource.includeCSS)

Inject the div used for dimming the tab content

Use jQuery to add an event handler for detecting activity in the browser and resetting screen saver

Add the interval check to determine whether to fade the tab content (uses appAPI.setInterval, Crossrider’s cross browser setInterval method)

Add a helper function that generates the text for showing the elapsed time on the screen saver

The finished code looks like this:

appAPI.ready(function($) { var Timeout = 10, // default timeout before screensaver is activated _counter = 0, // counts elapsed inactivity in seconds _enabled = false; // screensaver status // Inject the CCS rules in style.css to the page being viewed appAPI.resources.includeCSS("style.css"); // Inject the div used for dimming the tab content $('<div id="x-green-saver"><p>Last activity: <span></span> ago</p></div>') .appendTo('body'); // Use jQuery to add an event handler for detecting activity in the browser and resetting screen saver $(document) .on('click mousemove keypress', function() { // checks activity of mouse and keyboard _counter = 0; // resets the counter if (_enabled) { // resets the content fade if active $('#x-green-saver') .animate({opacity: 0}, 500) .removeClass('enabled'); _enabled = false; } }); // Add the interval check to determine whether to fade the tab content appAPI.setInterval(function() { if (++_counter >= Timeout) { // If no activity is detected for Timeout seconds if (!_enabled) { // Activate the screensaver if it’s not currently active $('#x-green-saver') .addClass('enabled') .animate({opacity: 0.95}, 1000); _enabled = true; } $('#x-green-saver span').text(counterText(_counter)); } }, 1000); // Add a helper function that generates the text for showing the elapsed time on the screen saver function counterText(sTime) { var sec_num = parseInt(sTime, 10), hours = Math.floor(sec_num / 3600), minutes = Math.floor((sec_num - (hours * 3600)) / 60), seconds = sec_num - (hours * 3600) - (minutes * 60); return ((hours) ? hours + ((hours === 1) ? ' hour ' : ' hours ') : '') + ((minutes) ? minutes + ((minutes === 1) ? ' minute ' : ' minutes ') : '') + seconds + ((seconds === 1) ? ' second' : ' seconds'); } });

It’s that simple and a step forward in developing greener extensions. Give it a try, feel free to improve the code, and see for yourself just how easy it is to use our platform.

Finally, you are invited to try our Green Saver demo extension and rise to the challenge of making your own cool page action extensions. Get started quickly by cloning the demo extension. Edit Code > 

Mozilla's newest release of Firefox, version 31, promises some interesting new features that can help developers design and build extensions.

Here are some of the key features that can help speed up UI design and make debugging easier:

UI Design Improvements

CSS3 variables: You're used to variables for coding, but now with support for CSS3 variables you can use them to enforce consistency and facilitate maintenance of your style sheets.

Eyedropper Tool: If you, like many other developers, have resorted to installing an eyedropper add-on, you'll be pleased to know that it's now provided natively. Start using this neat feature today (Developer > Eyedropper).

Box Model Enhancements: Firefox 30 introduced the new box model representation. With Firefox 31, you can edit the properties directly in the model and see the effects immediately.

Coding Improvements

Error Messages with Stack Trace: Firefox 31 introduces console error logs that display a full stack trace, making console.error() a more useful debugging tool.

Styling Messages: Firefox 31 is catching up with some of Chrome's long standing features and this is one were particularly fond of. Using the "%c" format specifier, you can add style to you console messages.

New JS Array Fill Method: Starting with Firefox 31, you can use the nifty fill() method to auto-fill array elements with a static value.

Microsoft's announcement of the launch of the Internet Explorer Developer Channel is important for the entire web development community.

You can access it from here: http://devchannel.modern.ie

This is great news for IE developers and developers in general who can now look forward to getting an early peek at new features.

But it is much more than that. It is a change in Microsoft's mindset which until now has neglected their browser and was lagging behind the other leading browsers such as Chrome (Canary) and Firefox (Aurora).

This indicates that Microsoft now understands that their browser must keep up with the pace set by others in order to survive.

We hope that this is a new direction for Microsoft, paying more attention to developers in general and to their browser specifically, will eventually also lead to a faster release cycles.

Ever noticed the cool icons that appear by the URL and thought hey, I want one of those? Look no further than Page Actions, the handy icon that appears inside the address bar on selected web pages.

In this post, we will demonstrate how you can add page actions to your extensions and configure their tooltips, icon, and popup/click event handlers. There are various page action methods for doing this, but for the purpose of this blog, we will demonstrate two ways of setting up and configuring page actions.

The idea is for the extension to add a tweet page action to all pages other than twitter.com. On twitter.com, the extension adds a page action to display a random quote.

Note: Currently, page actions are only available on Chrome and Firefox.

So let’s get started by creating a new extension (My Extensions > Create New Extension),

turning on the Page Actions feature for the extension (Settings > Page Actions) 

and then heading over to edit the code (Edit Code > extension.js).

The code, written in the Extension Page Scope (extension.js), determines which page is being viewed using appAPI.isMatchPages and adds the relevant page action using appAPI.pageAction methods.

We'll start by adding the page action logic and code to the extension.js file:

appAPI.ready(function($) { // Determine if page being viewed is on twitter.com if (appAPI.isMatchPages("*twitter.com*")) { // Set the page action’s icon and hover text appAPI.pageAction.setResourceIcon({resourcePath: 'images/quote.png'}); appAPI.pageAction.setTitle({title: 'Show quote'}); // Clicking page action opens a popup with displays quote // using resource file popup.html appAPI.pageAction.setPopup({ resourcePath:'popup.html', height: 300, width: 500 }); } else { // We are not on twitter.com // Use consolidated page action method that sets all the parameters appAPI.pageAction.setPages({ // pages property: Only show on pages other than twitter.com // For demonstration purposes only. This is not needed since the // code block is only called when not on twitter.com pages: [/^((?!twitter\.com).)*$/], iconResourcePath:'images/twitter.png', title: 'Tweet this page', callback: function() { // onClick action // Open twitter dialog in a new window appAPI.openURL({ url: 'http://twitter.com/intent/tweet?url='+encodeURIComponent(location.href), where: 'window', left: 100, top: 100, height: 200, width: 500 }); } }); } });

Next, we'll add the add the random quote code to the popup.html file using appAPI.request.get to retrieve the quote and jQuery to display the quote in the popup body:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function crossriderMain($) { // Get the quote from a remote site appAPI.request.get({ url: 'http://iheartquotes.com/api/v1/random?format=html', onSuccess: function(response) { // inject the HTML response into the popup body $(response).appendTo('#quote-wrapper'); } }); } </script> </head> <body> <div id='quote-wrapper'></div> </body> </html>

It’s a simple as that!

Now, watch the following video to see page actions at work:

Give it a try and see for yourself why our platform is so popular!

Finally, you are invited to try our Twitter Page Action demo extension and rise to the challenge of making your own cool page action extensions. Get started quickly by cloning the demo extension.

Edit Code > 

Crossrider extensions are renowned for their ease of development and cross browser compatibility. Google Analytics is synonymous with gathering essential monitoring data for determining the success of a project. By combining them you can gain a real insight into how your extension is being used and measuring user activity.

Google's Universal Analytics API (UA) allows us to measure unique user activity that was not previously possible using Google's Classic Analytics API as it was based on cookies that are not natively available in the extension scope.

In this post, we will demonstrate how you can add UA to your extensions and track unique user activity. For the purpose of this demonstration, we will show you how to add Page View and Event Tracking data to pages on which your extension runs.

So let’s get started by creating a new extension (My Extensions > Create New Extension) ...

and heading over to edit the code page (Edit Code > extension.js).

Before we start coding, let’s identify the key requirements for working with the UA API :

1. The API uses either the HTTP (http://www.google-analytics.com/collect ) or HTTPS (https://ssl.google-analytics.com/collect) protocol.

2. The API uses the POST method to send user interaction data (payload).

3. The data collected for UA is sent as a payload object that requires the following parameters in every post:

Protocol Version (v) : The protocol version

Tracking ID (tid): The tracking ID that distinguishes to which Google Analytics property to send data

Client ID (cid): An ID unique to a particular visitor / user. For this demonstration we use the browser specific id of the user who installed the extension (appAPI.appInfo.userId).

Hit Type (t): The type of interaction collected for a particular user

For information about payload parameters, see Measurement Protocol Parameter Reference.

Since we will be posting to UA multiple times, for this demo we decided to implement a simple Analytics object that contains the required parameters and a post method. The post method takes an object that describes just the hit data part of the payload (intelligently filling in the required parameters) and uses our appAPI.request.post method to send the data. Additionally, we decided to automatically detect the current page protocol to determine which UA URL to use for posting.

The following code shows how the Analytics object is implemented:

var Analytics = (function () { var _internal = { // Automatically set the URL according to the page protocol url: window.location.protocol + ((window.location.protocol.indexOf('https:') === -1) ? 'www' : 'ssl') + '.google-analytics.com/collect' }, _config = { // Required UA payload parameters trackingId: 'XX-NNNNNNNN-N', // <-- Change to your tracking Id clientId: appAPI.appInfo.userId, version: 1 }; // Methods return { // Method to post hit to UA post: function(payload) { // Intelligently fill on required parameters payload.tid = payload.tid || _config.trackingId; payload.cid = payload.cid || _config.clientId; payload.v = payload.v || _config.version; // Post payload to UA using our request API appAPI.request.post({ url: _internal.url, postData: payload }); } }; }());

The rest is simply a matter of using the post method of the Analytics object we created (Analytics.post) at the appropriate times and with the appropriate data. For example, to implement the page view data, just add the following code:

// Post Page View data to UA Analytics.post({ t: 'pageview', // <-- Hit Type dh: window.location.hostname, // <-- Document Host Name dp: window.location.pathname, // <-- Document Path dt: $('title').text() // <-- Document Title });

Similarly, to track when the user clicks the button injected by the extension we use Analytics.post in the button's click event handler, as follows:

// Make some space for the button $('body').css({'margin-top': '26px'}); // Inject a button to the page $('<button id="bua-button">Tracking Event</button>') .css({position:'fixed', top:0, left:0}) .click(function() { // Post Event Tracking data to UA Analytics.post({ t: 'event', // <-- Hit Type ec: 'click', // <-- Event Category ea: $(this).attr('id'), // <-- Event Action -- Button Id el: window.location.href, // <-- Event Label ev: 1 // <-- Event Value }); }) .appendTo('body');

Putting it all together, the extension.js file looks like this:

appAPI.ready(function($) { var Analytics = (function () { var _internal = { url: window.location.protocol + ((window.location.protocol.indexOf('https:') === -1) ? 'www' : 'ssl') + '.google-analytics.com/collect' }, _config = { trackingId: 'XX-NNNNNNNN-N', // <-- Change to your tracking Id clientId: appAPI.appInfo.userId, version: 1 }; return { post: function(payload) { payload.tid = payload.tid || _config.trackingId; payload.cid = payload.cid || _config.clientId; payload.v = payload.v || _config.version; appAPI.request.post({ url: _internal.url, postData: payload }); } }; }()); // Post Page View data to UA Analytics.post({ t: 'pageview', // <-- Hit Type dh: window.location.hostname, // <-- Document Host Name dp: window.location.pathname, // <-- Document Path dt: $('title').text() // <-- Document Title }); // Make some space for the button $('body').css({'margin-top': '26px'}); // Inject a button to the page $('<button id="bua-button">Tracking Event</button>') .css({position:'fixed', top:0, left:0}) .click(function() { // Post Event Tracking data to UA Analytics.post({ t: 'event', // <-- Hit Type ec: 'click', // <-- Event Category ea: $(this).attr('id'), // <-- Event Action -- Button Id el: window.location.href, // <-- Event Label ev: 1 // <-- Event Value }); }) .appendTo('body'); });

That's pretty much all there is to it which, of course, is why using UA with Crossrider is such a winning combination ☺

All that's left to do is view the data in Google Universal Analytics. For testing purposes, we recommend installing the extension and viewing the generated anaytics in real time. After installing the extension, log in to your Anaytics account and navigate to the real time events monitoring page (Reporting > Real Time > Events). You should see a page with the extension's injected button on the top left, and as you click the button you can see the results immediately appear in the graph, something like the following:

Looking at the event breakdown we can see data organised by the payload posted. Hence it is important to spend time choosing meaningful values to send as this can give you a greater insight into how your customers are using the extension and enable you to make informed business/product development decisions.

Finally, you are invited to try our Basic Universal Analytics demo extension and rise to the challenge of making the most of your extensions. Get started quickly by cloning the demo extension.

Edit Code > 

We are excited to announce the Crossrider Developer Marketplace (powered by oDesk) and the Crossrider Group on oDesk!

Our new service provides a dedicated marketplace where businesses and individuals requiring Crossrider extensions can post jobs for pre-screened Crossrider Developers to apply for.

So why are we partnering with oDesk? It’s simple really, it worked for us when we started growing rapidly and we had to concentrate on scaling our business; we therefore occasionally sent people to oDesk to find skilled developers to work on their extensions built on our development framework. oDesk helped in this respect, by matching people who wanted to build extensions with skilled web developers with JavaScript experience. It worked so well that we now want to make this service available to everyone, and hence the Crossrider-oDesk partnership is born!

If you are a Crossrider developer, head over to oDesk and join our group to market your Crossrider skills and access exclusive job opportunities. Don't forget to display the Crossrider group in your oDesk profile, so go ahead and add the Crossrider tag to your skills on oDesk.

If you are a business in need of a cross browser extension, go to oDesk today and post a job for free using the Crossrider skill tag as a criteria.

Crossrider Marketplace

You can also head over to the Crossrider Developer Marketplace for a convenient oDesk interface to find your perfect match integrated directly into our site. To get to Crossrider Marketplace, click the Development Center menu and select Marketplace.

Here you can comfortably search for oDesk jobs/developers using the provided filtering criteria such as feedback scores, hourly rate, location, etc.

So start now and realize the benefits of using the Marketplace today!

Finally, if you don't already have a Crossrider developer account, sign-up now and open up a world of possibilities in cross browser extension development. 

As you already might know today (October 17, 2013) Microsoft is releasing their first big update for Win8, simply titled as Win8.1. This update will also include an automatic update for Internet Explorer, bringing the latest version of IE to 11.

Besides presenting improvements such as: WebGL support, faster page rendering, better development and debug console etc. IE11 had some internal extension related changes that required modifications to our platform.

As Crossrider strives to always be several steps ahead of these browser version changes, we had already released the required fixes and updates for all the known issues deriving from that change.

Helping our developers sleep better at night and not worry about browser version updates is one of our main goals here at Crossrider.

The only change you need to be aware of is regarding specifically the WebRequest API that will not be supported on IE11/Win8.1. (We are working on a solution for this and we will update soon with more news)

Besides this, all your extensions will keep working as usual and there is no further action required on your end.

If for some reason you do encounter any issue with this latest update or if you have any further questions about this change then please don’t hesitate to contact [email protected].

Today, we are going to introduce to our developers a new and very cool Crossrider API snippets created to make coding extensions using Sublime Text 2 a breeze.

Have you ever wanted to develop Crossrider extensions using your preferred IDE? Missing the Crossrider IDE’s intellisense technology that simplifies coding using our API methods and remembering method parameters? If Sublime is your preferred IDE, there’s no reason to miss out any more.

Our amazing team has put together Sublime snippets, smart templates that insert text for you saving yourself tedious typing and remembering all those parameters. And they couldn't be simpler to use, simply install the snippets and follow the instructions for using them.

Give it a try and see for yourself how easy and useful they are. If you like them, why not create some for your preferred IDE, send them to us, and we’ll share them with the Crossrider community.

Using the Snippets

Using our snippets is natural and convenient. They automatically appear (like intellisense) as you type our API methods in JavaScript (.js) files.

Let’s see it in action. Open a file (e.g. test.js) and start typing our snippet keyword for appAPI.ready (ready). Notice the keyword-sensitive dropdown that appears as you type the keyword, and press Enter or Tab to insert the snippet.

Now let’s take a look at how we can speed up keyword searches using a neat Sublime feature that enables you to search snippets by typing ahead. For example, to speed up searching for particularly long keywords such as dbSetFromRemote that can be laborious to type, you can speed up the search by typing significant letters from the keyword such as dbsr.

Note: Keyword searches must always start with the first letter of the keyword.

Finally, once the snippet is inserted, you can use Tab to jump between predefined placeholders in the snippet code making it easy for you to customize the code.

Installing Snippets

For your convenience we uploaded the snippets to GitHub, so feel free to use it, tailor it, fork it and contribute back to the project.

On with the installation instructions. First, clone (git clone) or download the project, then locate your Sublime user packages folder, copy the downloaded CrossriderSnippets folder to the user packages folder, and restart Sublime for the changes to take effect.

Tip: The easiest way to find the location of the user packages folder is to create a new snippet (Tools -> New Snippet), attempt to save it making note of the save folder (by default, the user packages folder), and then cancelling the save.

Today, we are going to show you how fast and easy it is to create a cross-browser extension using the Crossrider platform and API. In this screencast, we will build a Facebook Notifier in matter of minutes.

The extensions basic functionality is to monitor a user’s Facebook notifications and to display new notifications whenever they are received regardless of which page the user is viewing.

The extension works by obtaining the notifications URL feed and periodically monitoring it by checking for new items. When new items are detected, the extension’s button is updated to indicate the number of new messages and display a notification with the latest message.

Watch the following video to see how easy it is to take the concept and build a fully functioning extension quickly and easily: (You can find the screencast's full code after the video)

Give it a try and see for yourself why our platform is so popular amongst extension developers!

Finally, you are invited to check our Facebook Notifier Demo Extension and extend it to do more cool things. (Get started quickly by cloning the demo extension from the IDE).

Extension Code

extension.js:

appAPI.ready(function($) { // Check that we are on the correct page to extract the feed URL if (appAPI.isMatchPages('facebook.com/notifications')) { // Check that we haven't already saved the URL if (appAPI.db.get('notificationsRss') === null) { // Extract the URL and save it to the local database appAPI.db.set('notificationsRss', 'http://www.facebook.com' + $('a:contains("RSS")').attr('href') ); } // Send message to background to reset button appAPI.message.toBackground({ action: 'resetButton' }); } // Message listener to receive request to display a notification appAPI.message.addListener(function(msg) { // If the message is to display the notification if (msg.action === 'notify') { // Display notification appAPI.notifier.show({ 'name':'Facebook-Notifications', 'title':'Facebook Notifications', 'body':msg.item, 'link':msg.link, 'theme':'facebook', 'position':'bottom-left', 'close':false, 'sticky':false, 'fadeAfter':5, 'width':'200px', 'closeWhenClicked':true }); } }); });

background.js:

Bookmarklets are short unobtrusive JavaScript commands stored as a bookmark that extend a browser's functionality. They are great for performing one-click tasks such as posting information to Tumblr, Facebook, Twitter, or querying a search engine, changing the appearance of a page, and much more (see Our favorite bookmarklets).

Have you ever wanted to take the one-click concept a step further and access the same bookmarklets in other ways? In this post, I will demonstrate how you can create cross-browser extensions that install a bookmarklet (Share on Tumblr) that can be activated in any or all of the following ways:

Using a browser button

Using a bookmark (default)

Using the context menu

Using a keyboard shortcut

In general, bookmarklet scripts are either short self-contained scripts or they inject a script tag to download code from a remote location. Tumblr uses the first variety, so let's navigate to their bookmarklet installation page, inspect the Share on Tumblr link element, and grab the code.

Notes:

When extracting the bookmarklet code, make sure to copy only the actual bookmarklet code since only bookmarks require the javascript: prefix and void(0) suffix.

When the bookmark is of the second variety (downloads script from remote location), you simply need to take note of the remote URL.

Now that we have the bookmarklet code, let's head over to crossrider.com and prepare the building blocks for our extension. We'll start by (1) creating a new extension, (2) adding the browser buttons feature, (3) uploading the button icon to the resources of the extension, (4) adding the bookmarklet.js resource, (5) pasting the bookmarklet code, and (6) adding the bookmarks plugin.

(1) My Extensions > Create New Extension

(2) Settings > Browser Buttons [Turn on Chrome, Firefox, and IE]

(3) Edit Code > Resources > Create > Upload [Upload button icon]

(4) Edit Code > Resources > Create > Javascript [Create bookmarklet.js file]

(5) Edit Code > bookmarklet.js [Add bookmarklet code]

(6) Edit Code > Plugins > Add Plugins > Bookmarks [Add bookmarks plugin]

Now that the building blocks are in place, let's concentrate on the code. In our extension we have two types of actions we perform, extending the browser (adding buttons, context menus, and bookmarks) and interacting with the page. The code for these actions must run in their respective scopes, the background scope for extending the browser and the extension page scope for interacting with the page.

Let's start with the background scope code by adding the title variable that will be used for button tooltips, context menu and bookmarks.

var title = 'Share on Tumblr';

We'll use the appAPI.browserAction API is used to configure the button:

appAPI.browserAction.setResourceIcon('icon.png'); // Set the button icon appAPI.browserAction.setTitle(title); // Add the button tooltip appAPI.browserAction.onClick(runBookmarklet); // Add the onclick event handler

the appAPI.contextMenu API to add a command to the context menu:

appAPI.contextMenu.add('inject-bookmaklet', title, runBookmarklet);

and the appAPI.bookmarks API to add a bookmark if one doesn't already exist:

appAPI.bookmarks.searchByTitle(title, function(nodes) { // Search for existing bookmark if (nodes && nodes.length === 0) { // If existing bookmark not found appAPI.bookmarks.getToolbarFolder(function(node) { // Get the bookmarks toolbar appAPI.bookmarks.create({ // Create a new bookmark title: title, // The bookmark label url: urlBookmarklet(), // Returns the bookmarklet as a URL parentFolder: node }); }); } });

Now, Since the bookmarklet code must run in the page scope and the browser buttons / context menus must be defined in the background scope, we define their callback functions using the appAPI.message API to pass a message to the extension scope requesting that it runs the bookmarklet code.

function runBookmarklet() { appAPI.message.toActiveTab({action: 'runBookmarklet'}); // Send message to active tab }

Lastly for the background scope, the urlBookmarklet function loads the bookmarklet code from the resources file and returns the code wrapped in the javascript: prefix and void(0) suffix required to run as a URL.

function urlBookmarklet() { return 'javascript:BOOKMARKLET;void(0);' // Wrap the bookmarklet code .replace('BOOKMARKLET', appAPI.resources.get('bookmarklet.js')); }

Putting it all together, our background code looks like this:

appAPI.ready(function() { var title = 'Share on Tumblr'; appAPI.browserAction.setResourceIcon('icon.png'); appAPI.browserAction.setTitle(title); appAPI.browserAction.onClick(runBookmarklet); appAPI.contextMenu.add('inject-bookmaklet', title, runBookmarklet); appAPI.bookmarks.searchByTitle(title, function(nodes) { if (nodes && nodes.length === 0) { appAPI.bookmarks.getToolbarFolder(function(node) { appAPI.bookmarks.create({ title: title, url: urlBookmarklet(), parentFolder: node }); }); } }); function runBookmarklet() { appAPI.message.toActiveTab({action: 'runBookmarklet'}); } function urlBookmarklet() { return 'javascript:BOOKMARKLET;void(0);' .replace('BOOKMARKLET', appAPI.resources.get('bookmarklet.js')); } });

Moving on to the extension code, we'll start by adding a listener to handle requests to run the bookmarklet. When a request is received, the handler calls the runBookmarklet function.

appAPI.message.addListener(function(msg) { // msg is the received data if (msg.action === 'runBookmarklet') { // Request to run the bookmarklet runBookmarklet(); // Call function to run the bookmarklet } });

Next, we'll use the appAPI.shortcut API to add the code to run the bookmarklet using a keyboard shortcut (Ctrl+Alt+B):

appAPI.shortcut.add("Ctrl+Alt+B", runBookmarklet, { 'type':'keydown', 'propagate':true, 'disable_in_input':true, 'target': document });

And lastly for the extension page scope, the runBookmarklet function loads the bookmarklet code from the resources file and runs it in the extension scope.

Note: The behavior of Bookmarklets that open popups depends on browser implementation.

function runBookmarklet() { appAPI.resources.includeJS('bookmarklet.js'); // Load and run bookmarklet }

Putting it all together, our extension page code looks like this:

appAPI.ready(function($) { appAPI.message.addListener(function(msg) { if (msg.action === 'runBookmarklet') { runBookmarklet(); } }); appAPI.shortcut.add("Ctrl+Alt+B", runBookmarklet, { 'type':'keydown', 'propagate':true, 'disable_in_input':true, 'target': document }); function runBookmarklet() { appAPI.resources.includeJS('bookmarklet.js'); } });

All that's left to do is to save and install the extension. Now you a free to use the bookmarklet in the following ways:

Using a browser button

Using a bookmark (default)

Using the context menu

Give it a try and see for yourself why our platform is so popular!

Finally, you are invited to try our Tumblr bookmarklets demo extension and rise to the challenge of making extensions of our favorite bookmarklets. Get started quickly by cloning the demo extension.

Edit Code > 

If you are not already a member: click the following link to join our cross-browser extension development framework.

Our favorite bookmarklets

Pinterest

Evernote

Tweet this

Facebook share

Posterous

Xray

Firebug Lite

Gmail this

Readability

Printliminator