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
Answers:
Vulcanize and Crisper tools can be used to workaround the CORS/CSP issues.
Lot's of how-to details here: https://www.polymer-project.org/1.0/docs/tools/optimize-for-production
Both tools have Gulp plugins, so you can script the build step like this:
gulp.task('vulcanize', function() {
return gulp.src('index.html')
.pipe(vulcanize({
inlineScripts: true,
inlineCss: true
}))
.pipe(crisper())
.pipe(gulp.dest('popup'));
});
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.