Custom elements for Chrome Apps APIs

gulp-bower.js

// take all bower dependencies
gulp.src(['bower_components/**/*'])

// run all html files through crisper for CSP
.pipe($.if('*.html', $.crisper()))

// put everything into ./{{dest}}/components/
.pipe(gulp.dest(path.join(destDir, 'components')));

gulp-chrome-app.js

gulp.src(['./chrome-app/**'])
  .pipe($.replace('_element_', element))
  .pipe($.replace('_type_', 'test'))
  .pipe(gulp.dest(destDir));

gulp-copy.js

// Get folder name (that should match the name of the element)
var element = __dirname.split(path.sep).pop();

// All files necessary for the element + test files
// This will have to be extended, e.g. if your element uses images
gulp.src([
  './*.html',
  './*.js',
  './*.css',
  './test/**',
  '!./gulpfile.js',
  '!./index.html',
],{base: './'})

// run all html files through crisper for CSP
.pipe($.if('*.html', $.crisper()))

// put everything into ./{{dest}}/components/{your-element}/
.pipe(gulp.dest(path.join(destDir, 'components', element)));

gulp-live-snippet.js

// Insert live-reload script into main demo/test files
.pipe(
  $.if(
    '**/index.html',
    $.insertLines({
      before: /<\/head>/,
      lineBefore: '<script src="../../chrome-app-livereload/livereload.js' +
                  '?host=localhost&amp;port=35729"></script>'
    })
  )
)

gulp-watch.js

var lr = tinylr();
lr.listen(35729);

// watch for changes and rebuild the chrome app if necessary
gulp.watch(['./*', './test/**'], ['copy-live:test']);
gulp.watch(['./chrome-app/**'], ['app:test']);
gulp.watch(['bower_components/**'], ['bower:test']);

// trigger live-reload when the app was changed in some way
gulp.watch([destDir + '/**'], $.batch({timeout: 500}, function (events, cb) {
  var paths = [];
  events.on('data', function (evt) {
    paths.push(evt.path);
  }).on('end', function () {
    lr.changed({
      body: {files: paths}
    });
    cb();
  });
}));

gulp-wct.js

var wctScripts = [
  '<script src="../../stacky/lib/parsing.js"></script>',
  '<script src="../../stacky/lib/formatting.js"></script>',
  '<script src="../../stacky/lib/normalization.js"></script>',
  '<script src="../../async/lib/async.js"></script>',
  '<script src="../../lodash/lodash.js"></script>',
  '<script src="../../mocha/mocha.js"></script>',
  '<script src="../../chai/chai.js"></script>',
  '<script src="../../sinonjs/sinon.js"></script>',
  '<script src="../../sinon-chai/lib/sinon-chai.js"></script>',
  '<script src="../../accessibility-developer-tools/dist/js/axs_testing.js"></script>',
  '<script src="prepare_wct.js"></script>'
].join('\n');

gulp.src(...)
...
// Insert WCT Scripts in test files before WCT is loaded
.pipe(
  $.if('*.html', $.insertLines({
    before: /<script\ src="..\/..\/web-component-tester\/browser.js/,
    lineBefore: wctScripts
  }))
)

main.js

/**
 * Listens for the app launching then creates the window
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('components/_element_/_type_/index.html');
});

manifest.json

{
  "manifest_version": 2,
  "name": "_element_ _type_",
  "version": "0.0.1",
  "minimum_chrome_version": "34",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "permissions": [
    "storage"
  ]
}

prepare_wct.js

WCT = {
  environmentScripts: []
};

wct-scripts.html

<script src="../../stacky/lib/parsing.js"></script>
<script src="../../stacky/lib/formatting.js"></script>
<script src="../../stacky/lib/normalization.js"></script>
<script src="../../async/lib/async.js"></script>
<script src="../../lodash/lodash.js"></script>
<script src="../../mocha/mocha.js"></script>
<script src="../../chai/chai.js"></script>
<script src="../../sinonjs/sinon.js"></script>
<script src="../../sinon-chai/lib/sinon-chai.js"></script>
<script src="../../accessibility-developer-tools/dist/js/axs_testing.js"></script>