CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionpolymer
Cilenco
Cilenco

Reputation: 7117

Use Polymer elements in Chrome extension

At the moment I'm writing a Chrome extension and in the popup.html I want to use some Polymer elements, but my problem is that none of them are rendered in the popup. My popup.html looks like this:

<!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>

This is my popup.js

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

And here is my content script:

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 code comes from this answer and it should work, so do you have any ideas what is wrong with my code or have I misunderstood something? I thought that the code from popup.js is executed when the popup is loading and and referenced polymer files are injected into the popup.html file. Isn't that right? I also added all polymer files to web_accessible_resources and my content_scripts runs at document_start.

Upvotes: 3

Views: 1755

Answers (1)

Xan
Xan

Reputation: 77523

You are trying to apply a solution that injects Polymer into a regular webpage (through content scripts) to your own UI page.

Extensions' own pages never run any content scripts, and you don't need any complicated steps to include Polymer. You can just do it the regular way - you can add <link> elements to your markup and there is no need to call getURL.

Update: due to Chrome Extensions' CSP, an additional step is needed (vulcanize or polybuild) to get rid of inline code.

All the complication happens when you're trying to do that to a third-party page you have no direct control over. This is not the case with extension's own pages.

For the record, you're most certainly misusing tabs.query - it does not send any messages in any case, it gives you information about open tabs in a callback (that you don't have).

Upvotes: 2

Related Questions