Loading issues when using with a chrome extension

[yattias]

Hi Polymer team,

I have been developing a chrome extension using Polymer for some time now. Thanks to Polymer, I was was able to create a very intricate extension that is sheltered from the host's scripts and CSS. 👍

I do however have a few of concerns about releasing it in it's current state. I would like to find out about some strategies for preventing the following problems I have been facing:

1. Loading Polymer into the page leaks into the global namespace. Polymer does not come bundled into JS files but rather, it comes in the form of an html page and requires the user to use an HTML import to load it into the page. AFAIK, content scripts only allow for CSS and JS but not HTML. To resolve this issue, I am including it by dynamically generating a link element and adding it as such into the page:

function loadUrl(url) {
  return new Promise(
    function(resolve, reject) {
      var link = document.createElement('link');
      link.setAttribute('rel', 'import');
      link.setAttribute('href', url);
      link.onload = function() {
        resolve(url);
      };
      document.head.appendChild(link);
    });
}

loadUrl(chrome.extension.getURL("polymer/polymer.html")).
then( loadUrl(chrome.extension.getURL("my/component.html")) )

Once loaded into the host page, it does not run in isolation like content scripts and can cause namespace conflicts if the page already has Polymer loaded.

2. Polymer does not tell you when it is loaded and ready to use. Polymer does not (currently) fire an event when it has loaded and as result, my components sometimes load before Polymer does (see bullet point 1) and break.

To mitigate this, I am triggering a custom event at the end of polymer-micro.html (which is where Polymer) is defined as such:

var ev = new CustomEvent('polymer-loaded');
document.dispatchEvent(ev);

3. The Polybuild tool does not generate proper code for a chrome extension. As useful as it is, it generates a separate javascript file outside of the dom-module causing a namespace leak into the global window object. For example, if was importing jQuery in my module, Polybuild would generate a JS file containing jQuery outside of the DOM module causing it to be attached to the host window object - a big no-no in a chrome extension.

Thanks for the feedback.

I have posted this in StackOverflow but my Polymer questions typically don't get many views there so I decided to post it here as well.

[yattias]

I opened a bounty in StackOverflow

[yattias]

Cricket cricket cricket..

[dfreedm]

Can you expand more on (3), or file an issue on polybuild and link to this issue?

[TimvdLippe]

It seems that the StackOverflow question has been answered. As such, I am closing this issue.