在 chrome 扩展中加载 Polymer 1.0 时出现问题
Problems loading Polymer 1.0 in a chrome extension
我使用 Polymer 开发 chrome 扩展已有一段时间了，我对以当前状态发布它有一些顾虑。我想听听一些策略来防止我一直面临的以下问题：
1) 将 Polymer 加载到页面中会泄漏到全局命名空间中。 Polymer 不会捆绑到 JS 文件中，而是以 html 页面的形式出现，并要求用户使用 HTML 导入将其加载到页面中。据我所知，内容脚本只允许 CSS 和 JS，但不允许 HTML。为了解决这个问题，我通过动态生成一个 link 元素并将其添加到页面中来包含它：
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 文件，导致将名称空间 leak 放入全局 window目的。例如，如果在我的模块中导入 jQuery，Polybuild 会在 DOM 模块之外生成一个包含 jQuery 的 JS 文件，导致它附加到主机 window 对象- chrome 扩展中的一个大禁忌。
感谢反馈。
在撰写本文时，我正在使用 Polymer 1.2.3
将 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
});
这允许您推迟与聚合物和 WebComponents 相关的任何 javascript，直到所有元素都已注册。
Polybuild 工具没有为 chrome 扩展生成正确的代码。
es6 modules can mitigate variables leaking into the global namespace, which you can use currently with Babel.
我使用 Polymer 开发 chrome 扩展已有一段时间了，我对以当前状态发布它有一些顾虑。我想听听一些策略来防止我一直面临的以下问题：
1) 将 Polymer 加载到页面中会泄漏到全局命名空间中。 Polymer 不会捆绑到 JS 文件中，而是以 html 页面的形式出现，并要求用户使用 HTML 导入将其加载到页面中。据我所知，内容脚本只允许 CSS 和 JS，但不允许 HTML。为了解决这个问题，我通过动态生成一个 link 元素并将其添加到页面中来包含它：
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 文件，导致将名称空间 leak 放入全局 window目的。例如，如果在我的模块中导入 jQuery，Polybuild 会在 DOM 模块之外生成一个包含 jQuery 的 JS 文件，导致它附加到主机 window 对象- chrome 扩展中的一个大禁忌。
感谢反馈。
在撰写本文时，我正在使用 Polymer 1.2.3
将 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
});
这允许您推迟与聚合物和 WebComponents 相关的任何 javascript，直到所有元素都已注册。
Polybuild 工具没有为 chrome 扩展生成正确的代码。
es6 modules can mitigate variables leaking into the global namespace, which you can use currently with Babel.