davidmaxwaterman/polymer-in-event-page — pull request #1 by ussuri (2014-12-05 22:24:47+00:00)
Title: Fix "background" {"page"} & "default_popup" usage in manifest

@davidmaxwaterman

Max, this PR demonstrates the proper usage of `"background": { "page": ... }` in an extension's manifest. You can install the resulting extension from CDE the same way you run apps (i.e. via the Run button, Ctrl/Command-R etc). The newest dev channel of Chrome has a bug that makes the extension's icon disappear and reappear alternately as you update it from CDE.

Some notes:

* You don't have to import `"Polymer/polymer"` in `bower.json`: the individual `"core-"` or `"paper-"` components will pull in all they need (usually less than `"Polymer/polymer"`).
* Don't forget to run 'Refactor for CSP' on 'bower_components` after each Bower update.
* `"page": "background.html"` under `"background"` is legacy: the newer and recommended alternative is `"scripts": ["background.js"]"`. The main reason is that `"page"` is confusing and gives almost zero advantage compared to `"scripts"`.
* It doesn't make much sense to put any HTML inside the background page (your "background.html") besides `

`, it will be consumed without an error, but the `div` won't be rendered anywhere (it's a *background* page). I didn't try to investigate why Polymer in your original page didn't work, because such usage fundamentally doesn't make sense.
* Background pages are normally used to add various event listeners for Chrome Apps or Extensions APIs, such as `onInstalled`.
* Note that background pages are subject to the same CSP limitations as other HTMLs inside Chrome Apps, so scripts must be linked from external files.
* There seems to be some internal problem in `core-ajax`: the popup's console (accessible via right click in the popup and `Inspect element`) shows 2 messages in popup.html reading "Uncaught SyntaxError: Unexpected token ,". StackOverflow is full of similar problems, but generally they indicate syntax errors in sources linked from popup.html (Chrome is improperly attributing them to popup.html itself). I removed everything related to `core-ajax` from the sources and added some other Polymer UI to popup.html, and it rendered fine.