Use Polymer elements in Chrome extension

Question

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

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

edited May 23 '17 at 12:23

Community

1
1

answered Feb 17 '16 at 18:21

Xan

74,770
16
179
206

Okay thank you for this. But if I create a normal Webpage with Polymer elements which runs great on my webserver and I load this page as popup.html in my extension nothing is rendered in the popup. Do you have any ideas why? – Cilenco Feb 17 '16 at 21:36
Learning to [debug the popup](https://developer.chrome.com/extensions/tut_debugging) would be a good idea. It's probably a CSP violation - and there are mentions on the web how to solve it. I updated the answer. – Xan Feb 17 '16 at 21:43
1

Thank you! With [`vulcanize`](https://github.com/Polymer/vulcanize) I have solved the problem. Small thing to point out from the link: `--csp` is removed from `vulcanize` and you have to use [`crisper`](https://github.com/PolymerLabs/crisper) instead. An example how to use them together is written on the crisper GitHub page – Cilenco Feb 17 '16 at 22:52
1

Note: `polybuild` is an all-in-one tool that includes `vulcanize` and `crisper` - and is the [recommended solution by Polymer devs](https://github.com/Polymer/polymer/issues/762#issuecomment-175838923). – Xan Feb 17 '16 at 23:03

Use Polymer elements in Chrome extension

1 Answers1