Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Provides a queue-based abstraction layer for communicating between tabs in a Chrome extension.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 build
Octocat-spinner-32 example
Octocat-spinner-32 images
Octocat-spinner-32 lib
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 LICENSE.txt
Octocat-spinner-32 README.md
Octocat-spinner-32 manifest.json
Octocat-spinner-32 package.json
README.md

Queuebert

Queuebert

The Chrome extension paradigm is sandboxed. iframes and browser-tabs cannot directly communicate with each other. They must use a background script to mediate communication between them.

In a prior post, I advocate using a queue-based approach to deal with this annoyance:

https://github.com/bcoe/DoloresLabsTechTalk

Queuebert is a library designed to simplify building Chrome extensions using a queue-based approach.

Server

  • You create one instance of a server in the background.html.
  • The server handles queuing up messages for the content scripts.
var server = new Queuebert.Server();

Client

You create a client within your content scripts. The client is used to communicate between the sandboxed JavaScript environments.

  • The client is used to dispatch messages to other tabs, iframes, and to the background script.
  • The client has a delegate registered with it. The delegate receives messages from other clients in the system.
var client = new Queuebert.Client({
    identifier: 'client',
    delegate: delegate
});
  • identifier a tab with multiple iframes within it can potentially run multiple clients. The identifier is used to differentiate these clients.
  • delegate the client automatically checks for inbound messages on a set interval. Messages are automatically dispatched to the delegate.

Example Delegate

var delegate = {
    receivedMessage: function(clientId, clientTabId, body) {
        console.log(body.message);
    }
};

The receivedMessage message method will be executed if the following message was dispatched by another client:

client.sendMessage({
    action: 'receivedMessage',
    tabId: clientTabId,
    to: 'client',
    body: {message: 'a message'}
});

The clientId and clientTabId variables can be used to dispatch a message back to the originating client. The body is the body of the message dispatched by the originating client.

BackgroundClient

To keep the queue-based paradigm consistent, you can create an instance of a BackgroundClient in your background.html.

The behaviour of a background client is identical to clients in content scripts except, seeing as the background script has no tab.id, background clients have the special tab.id background.

Creating a BackgroundClient

var client = new Queuebert.BackgroundClient({
    delegate: delegate,
    server: server
});
  • delegate the delegate provided to a background client is identical to a delegate provided to other clients.
  • server a BackgroundClient requires that the Server instance be provided as a dependency.

Sending a Message to a BackgroundClient

client.sendMessage({
    action: 'echo',
    tabId: 'background',
    to: 'background',
    body: {message: 'Hello World!'}
});

The Example

In the /example folder, there are examples of each of the concepts discussed.

The Queuebert project is a fully functional Chrome Extension. Install it, to see things in action.

Testing

Queuebert uses node.js for unit testing. run node test/index.js to execute the test suite.

Copyright

Copyright (c) 2011 Attachments.me. See LICENSE.txt for further details.

Something went wrong with that request. Please try again.