Problems loading Polymer 1.0 in a chrome extension

Question

I have been developing a chrome extension using Polymer for some time now and I have a couple of concerns about releasing it in it's current state. I would like to hear 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 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.

At the time of writing this, I am using Polymer 1.2.3

Dividivi

Answer 1

Loading Polymer into the page leaks into the global namespace.

You can use the HTMLImports.whenReady event and register your elements directly in the main document. You can include javascript directly, or reference script tags containing it. This resolve your issue of not being able to import html files, but doesn't resolve what I think may have been your actual question about leaks into the global namespace, and the javascript is still going to be run as part of the main document.

    HTMLImports.whenReady(function () {
      Polymer({
        is: 'main-document-element'
      });
    });

Polymer does not tell you when it is loaded and ready to use.

WebComponentsJs provides it's own custom event, WebComponentsReady

  window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
  });

This allows you to defer any javascript relating to polymer and WebComponents until all elements have been registered.

The Polybuild tool does not generate proper code for a chrome extension.

es6 modules can mitigate variables leaking into the global namespace, which you can use currently with Babel.

Grooved

I only really answered question (2) properly, so I don't expect my answer to be accepted, but I'll try and update it after experimenting more with Polymer based chrome extensions and es6 Modules and Imports, until then I hope it helps you out at least a bit. – Grooved