javascript - Use Polymer elements in Chrome extension -


at moment i'm writing chrome extension , in popup.html want use polymer elements, problem none of them rendered in popup. popup.html looks 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 popup.js

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

and here 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 this answer , should work, have ideas wrong code or have misunderstood something? thought code popup.js executed when popup loading , and referenced polymer files injected popup.html file. isn't right? added polymer files web_accessible_resources , content_scripts runs @ document_start.

you trying apply solution injects polymer regular webpage (through content scripts) own ui page.

extensions' own pages never run content scripts, , don't need complicated steps include polymer. can do regular way - can add <link> elements markup , there no need call geturl.

update: due chrome extensions' csp, additional step needed (vulcanize or polybuild) rid of inline code.

all complication happens when you're trying third-party page have no direct control over. not case extension's own pages.


for record, you're misusing tabs.query - not send messages in case, gives information open tabs in callback (that don't have).


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -