No description, website, or topics provided.
JavaScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
code
deploy
tests
.gitignore
README.md
package.json
version.txt

README.md

chrome-extension-skeleton-ng

Google chrome extension skeleton, based on

Main features:

  • js-modules via require.js
  • angular.js (popup page, options page)
  • deploy script (automatically create crx file)
  • logging (one central extension log from all content/background pages)
  • localStorage-base configuration
  • unit-tests (mocha, karma)
  • end to end test (TBD, if possible)

Directory structure

/code
    /css
    /html
        /templates
    /images
    /js
        /lib
            /angular
        /modules
            /background
                /controllers
            /content
                /controllers
            /util
/tests
    /pure-unit
        /modules
        /specs

In code directory you will find:

  • css - any css files used by the extension
  • html - any html files used by the extension
  • html/templates - html Angular templates used for rendering html code
  • images - any graphics used by the extnesion
  • js - code javascript files (entry point for background script, content script(s), and popup script
  • js/lib - third party libraries, see README.md file there for details
  • js/modules - all extension-specific code in AMD modules (can be organised in sub-directories)
  • js/modules/background - Angular.js application for background pages
  • js/modules/content - Angular.js application for content pages
  • js/util - common functionality (messaging and templates) for the extensions, written as AMD modules

In tests\pure-unit directory you will find: test related JavaScript code for mocha-node

  • modules - unit test-specific utility and RequireJS configuration
  • specs - unit test modules

Run deploy

  cd deploy
  ./makecrx.sh
  cp deploy/pkg/chrome-angular-extension-0.0.1.crx to_some_test

The script deploy/makecrx.sh will create (once) deploy\dummy-chromium.pem private key for google chrome extension. Please don't commit it to public if you don't want.

Run unit-test

NOTE: We have to plan that end-2-end and unit tests with karma will work ok, but it is not worked now.

Unit-test with mocha/require.js (but without angular) works ok:

  1. Install mocha-node first:

npm install -g mocha

  1. In tests\pure-unit\ directory run run-tests.sh (it installs required dependencies first)

How to debug without deploy

  1. Open chrome
  2. Go to chrome://extensions/
  3. Switch ON for checkbox Developer mode
  4. Press Load unpacked extension... and specify /code folder

How to get console logs

All pages send log to background page, so it is enough to open bg page console logs.

  1. Open chrome
  2. Go to chrome://extensions/
  3. Find Chrome Angular extension with require.js
  4. Go to extension's html/background.html
  5. Switch to Console

Useful links: