flrent / chrome-extension-angular-base

A base project to get started creating Chrome Extensions with AngularJS, including Bootstrap, jQuery, Mocha, Chai, SinonJS, with a popup app, content scripts, and a background page.

A Chrome Extension base project with AngularJS

This is a scaffolding project to help you get started. This includes :

• AngularJS Popup App scripts/app/
• Bootstrap JS and CSS
• jQuery / Underscore.js
• Mochai/Chai/SinonJS for testing contentscripts
• Grunt and Bower

See some slides about creating chrome extensions here

Get Started

• Clone this repo
• Run npm install and bower install
• Go to chrome://extensions/
• Activate developer mode
• Click on load an unpacked extension and locate your cloned repo, and select the app folder

Build and deploy

The build manifest.json file is manifest-build.json. It differs from the regular manifest.json to use only built files (single files for the all popup app, content scripts or background pages).

To build the app and get a single scripts for each popup app, content script, or background page, simpy run :

grunt build

Versions

• 0.1 May 2014 First version released

License

Florent Lamoureux @flrent
Licensed under the MIT license.
Copyright (c) 2014 - BugBuster SA

chrome-extension-angular-base's Issues

Angular data binding not working correctly from fresh install.

I downloaded a zip of the repo, and did a build using grunt. When I load the unpacked extension and open the popup, this is what I see:

Question about the app module declaration

I'm curious about this code:

angular.module('popup', [
  'popup.services',
  'popup.controllers'
]);

Where does the dotted notation for the module dependencies come from, and what does it reference? There are no modules named 'services' or 'controllers', only folders inside /app that bear those names. Is this some type of folder level dependency injection I'm not aware of, or is this a bug? It doesn't actually seem to need any dependency injections, since the Controller is defined inside popup.html:

 <div ng-controller="MainController">

In popup there's "Hey! {{welcomeMsg}}"

What gives? :)