polymer - Registering a custom element from a chrome extension

Question

I have tried registering custom elements through native javascript and polymer from within a chrome extension with no luck. The issue is documented here.

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'polymer-element'. Elements cannot be registered from extensions.

I am looking for suggestions for using web components in an extension - has anyone done so? My instinct is to register these elements using standard html tags (div, etc...) on the shadow DOM for the time being until it is supported. Any suggestions?

Answer 1

For me it was sufficient to use @webcomponents/custom-elements package in my content.js. Also webcomponents-sd-ce.js weights about 80kb and custom-elements.min.js only 16kb.

Just install it as a dependancy and import it in the content.js and let your package manager do the rest.

npm i @webcomponents/custom-elements

import '@webcomponents/custom-elements'

This is how I use it in my project popup-tab-switcher.

---

I believe that all these workarounds are not necessary and custom elements must work for extensions without polyfills. Please vote for the issue in Chrome bugs to draw attention to this flaw.