javascript - 在 chrome 扩展中加载 Polymer 1.0 时出现问题

Question

我使用 Polymer 开发一个 chrome 扩展已经有一段时间了，我对以当前状态发布它有一些担忧。我想听听有关防止我一直面临的以下问题的一些策略:

1) 将 Polymer 加载到页面会泄漏到全局命名空间。 Polymer 没有捆绑到 JS 文件中，而是以 html 页面的形式出现，需要用户使用 HTML 导入将其加载到页面中。 AFAIK，内容脚本只允许 CSS 和 JS 而不是 HTML。为了解决这个问题，我通过动态生成链接元素并将其添加到页面中来包含它:

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")) )

一旦加载到主机页面，它就不会像内容脚本那样独立运行，如果页面已经加载了 Polymer，它可能导致命名空间冲突。

2) Polymer 不会在加载和准备好使用时告诉您。 Polymer 不会(当前)在加载时触发事件，因此，我的组件有时会在 Polymer 加载之前加载并打破。

为了缓解这种情况，我在 polymer-micro.html(这是 Polymer)定义的末尾触发了一个自定义事件:

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

3) Polybuild 工具没有为 chrome 扩展生成正确的代码。尽管它很有用，但它会在dom-module 的外部 生成一个单独的javascript 文件，导致命名空间泄漏 到全局窗口对象中。例如，如果在我的模块中导入 jQuery，Polybuild 会在 DOM 模块外部生成一个包含 jQuery 的 JS 文件，导致它附加到主机窗口对象——这是 chrome 扩展中的一个大禁忌。

感谢您的反馈。

在撰写本文时，我正在使用 Polymer 1.2.3

Answer 1

将 Polymer 加载到页面中会泄漏到全局命名空间中。

您可以使用 HTMLImports.whenReady事件并直接在主文档中注册您的元素。您可以直接包含 javascript，或引用包含它的脚本标签。这解决了您无法导入 html 文件的问题，但没有解决我认为可能是您关于泄漏到全局命名空间的实际问题，并且 javascript 仍将作为主文档的一部分运行。

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

Polymer 不会在加载并准备好使用时告诉您。

WebComponentsJs 提供了它自己的自定义事件，WebComponentsReady

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

这允许您推迟任何与 polymer 和 WebComponents 相关的 javascript，直到所有元素都已注册。

Polybuild 工具不会为 chrome 扩展程序生成正确的代码。

es6 modules可以减少泄漏到全局命名空间中的变量，您当前可以将其与 Babel 一起使用.