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
Post a Comment