Блог

Я пытался зарегистрировать пользовательские элементы через собственный javascript и polymer из расширения chrome, но безуспешно. Проблема задокументирована здесь .

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

Я ищу предложения по использованию веб-компонентов в расширении — кто-нибудь делал это? Мой инстинкт заключается в том, чтобы зарегистрировать эти элементы, используя стандартные html-теги (div и т.д.) в shadow DOM на время, пока это не будет поддерживаться. Есть предложения?

Для меня было достаточно использовать @webcomponents/custom-elements package в моем content.js . Также webcomponents-sd-ce.js весит около 80 КБ и custom-elements.min.js только 16 КБ.

Просто установите его как зависимость и импортируйте в content.js , а остальное пусть ваш менеджер пакетов сделает сам.

 npm i @webcomponents/custom-elements
  

 import '@webcomponents/custom-elements'
  

Вот как я использую его в своем проекте с переключателем всплывающих вкладок.

Я считаю, что все эти обходные пути не являются необходимыми, и пользовательские элементы должны работать для расширений без полизаполнений. Пожалуйста, проголосуйте за проблему в Chrome bugs, чтобы привлечь внимание к этому недостатку.

Это действительно возможно. Но, немного халтурно.

Оригинальный ответ

Вот шаги:

• ПРИМЕЧАНИЕ
  Собственные веб-компоненты (без Polymer): для этого требуется использование полизаполнителя webcomponentsjs
  Chrome предотвратит выполнение собственного registerElement элемента в расширении Chrome. Чтобы преодолеть это, вам нужно запретить использование собственного registerElement в пользу имитируемого (полизаполнение).

В webcomponents-lite.js Закомментируйте следующий код (и сделайте его более элегантным, если хотите:

 scope.hasNative = false; //Boolean(document.registerElement);
  

И вуаля! собственный элемент registerElement теперь заменен на polyfill, который chrome не запрещает использовать в расширении.

• Веб-компоненты Polymer
  Вам нужно будет выполнить код, указанный на шаге выше, и, кроме того, вам нужно будет загрузить polymer с помощью следующего кода

     var link = document.createElement('link');
    link.setAttribute('rel', 'import');
    link.setAttribute('href', "link_to_your_polymer.html");
    link.onload = function() {
       // Execute polymer dependent code here
    }
    

ОБНОВЛЕНИЕ # 1 — Улучшенное решение

После дальнейшего изучения я узнал, что Polymer не будет работать в расширении при динамической загрузке. В результате вышеуказанные изменения необходимы. Более простой альтернативой этому является загрузка polymer в head вашего скрипта содержимого следующим образом:

   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);
      });
  }

  loadRes( chrome.extension.getURL("path_to_your_webcomponents-lite.js") ) // You may/may not need webcomponents.js here
    .then( loadRes( chrome.extension.getURL("path_to_your_polymer.html") ) )
    .then( loadRes( chrome.extension.getURL("path_to_your_custome_component") ) )
    .then(function(){
      // code that depends on web components 
    });
  

ВЫ ДОЛЖНЫ добавить URL-адреса, загруженные chrome.extension.getURL в web_accessible_resources часть вашего манифеста.

Вышесказанное необходимо, поскольку polymer.html должен быть загружен через ресурс html. Прочитайте ответ Эрика Бидельмана здесь

Пожалуйста, обратите внимание, что вам может не понадобиться загруженное здесь полизаполнение webcomponents, если ваш компонент уже загружает их.

Столкнулся с этой проблемой в июле 2017 года. Простое решение, которое я нашел, — загрузить последнюю версию полизаполнения web components для пользовательских элементов в качестве дополнительного скрипта содержимого. В файле polyfill не требуется вносить изменения в код (возможно, было улучшено обнаружение функций).

Извлечение из манифеста:

 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["webcomponents-sd-ce.js", "contentscript.js"]
    }
]