angular-chrome-messaging
AngularJS interface for chrome.runtime messaging. Allows for remote procedure calls and data binding.
NOTE: With Facebook's introduction of the Flux Architecture, the two-way data binding provided by this module has become poor practice, so I wouldn't recommend it for most situations.
Overview
Google Chrome Extensions usually consist of:
- A background script that continuously runs in the background
- A content script that's loaded on pages you visit
- A browser action or page action popup
- An options page
angular-chrome-messaging allows:
- Synchronizing data between separate scripts via two-way variable binding
- Remote procedure calls
Usage:
Two-way binding
In the background script, publish the variable to be bound:
// background.js/** * A service to hold global state and methods for the extension * * @param ChromeBindings * @constructor */ { thisuser = {}; // Publish the `user` object so it can be read & modified by other scripts ChromeBindings;}angular ;
In another script (options/popup/contentscript), bind to the variable:
// options.js { // Bind `ChromeMessagingExample.user` to `OptionsCtrl.user` thisuser = {}; ChromeBindings ;}angular ;
Remote procedure calls
Publish methods using angular.Module.run
:
// background.js angular ;
Call them in from other scripts:
// options.js { var vm = this; vminputEmail = ''; vminputName = ''; vm { ChromeMessaging; };}angular ;
Example
To run the example:
-
Clone this repository.
-
Build the example:
cd examplenpm installgulp build -
In Chrome, load
example/build/
as an unpacked extension.