Question

目前我正在编写Chrome扩展程序并在popup.html我想使用一些Polymer元素，但我的问题是它们都没有在弹出窗口中呈现。我的popup.html看起来像这样：

<!doctype html>
<html>
    <head>      
        <title>Getting Started Extension's Popup</title>
        <script src="js/popup.js"></script>             
    </head>

    <body>
        <paper-tabs id="tabBar" class="bottom fit" selected="{{selected}}">
            <paper-tab>TAB 1</paper-tab>
            <paper-tab>TAB 2</paper-tab>
            <paper-tab>TAB 3</paper-tab>
        </paper-tabs>
    </body>
</html>

这是我的popup.js

window.onload = function() {
    chrome.tabs.query({active: true, currentWindow: true});
}

这是我的内容脚本：

function loadRes(res) {
    return new Promise( function(resolve, reject) {
        var link = document.createElement('link');

        link.setAttribute('rel', 'import');
        link.setAttribute('href', res);

        link.onload = function() {
            resolve(res);
        };

        document.head.appendChild(link);
    });
}

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {

    loadRes(chrome.extension.getURL("polymer/webcomponentsjs/webcomponents-lite.js"))
    .then(loadRes(chrome.extension.getURL("polymer/paper-tabs/paper-tabs.html")))

});

此代码来自this answer，它应该有效，所以你有什么想法我的代码有什么问题或者我误解了什么吗？我认为在加载弹出窗口时会执行来自popup.js的代码，并且引用的聚合物文件会被注入popup.html文件中。不是吗？我还将所有聚合物文件添加到web_accessible_resources，我的content_scripts运行在document_start。

Answer 1

您正在尝试将注入Polymer的解决方案应用到常规网页（通过内容脚本）到您自己的UI页面。

扩展＆＃39;自己的网页never run any content scripts，您不需要任何复杂的步骤来包含Polymer。您只需~~以常规方式执行~~ - 您可以将<link>元素添加到标记中，而无需调用getURL。

由于Chrome Extensions' CSP而导致

更新，需要additional step（vulcanize或polybuild）才能摆脱内联代码。

当您尝试对无法直接控制的第三方网页执行此操作时，会发生所有并发症。扩展程序自己的页面不是这种情况。

对于记录，您肯定会误用tabs.query - 它在任何情况下都不会发送任何消息，它会为您提供有关回拨中打开标签的信息（您没有）。

在Chrome扩展程序中使用Polymer元素

1 个答案: