Search code examples
javascriptpolymerpolymer-2.x

Is it possible to use Polymer 2 for building browser extention?


By browser extension I mean WebExtension https://developer.mozilla.org/ru/Add-ons/WebExtensions.

I tried to use it for just local files and got:

Access to Imported resource at 'file:///' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

WebExtension (especially for popup of settings) don't have specific server. Their links will be like chrome-extension://pkngljipephggpkgjfkjhggmcjfmhgkn/page.html


Solution

  • Updated answer after year of production

    I used Polymer 1 and Polymer 3. For both you need to create whole building ecosystem. In case of Polymer 3 it is very very difficult due to WRONG! documentation for polymer-build (don't read documentation, read source code directly)


    Just tested and here is answer. Shortly: yes, but with complications.

    After inserting only one Polymer element I got many errors: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-AYzkEOy570v3pgwSjL36msfNQGIBNCoa6ppxJtI8Fag='), or a nonce ('nonce-...') is required to enable inline execution.

    In requirements to extension Chrome 31+ - so I cannot change content security policy. I cannot use inline <script> tags for any templates.

    So I modified code of Polymer by moving all inline scripts to separate scripts and it's worked.

    Cons: I cannot make automatic update of code if Polymer will be updated. Each time I need to rewrite it's code.