Enregistrer un élément personnalisé à partir d'une extension Chrome

C'est en effet possible. Mais, un peu hacky.

Réponse originale

Voici les étapes:

• Composants Web natifs (pas de polymère)
  REMARQUE : cela nécessite l'utilisation du polyfill de webcomponentsjs.
  Chrome empêchera l' registerElementexécution native dans une extension chrome. Pour le surmonter, vous devez empêcher l'utilisation du natif registerElementau profit d'un simulé (le polyfill).

Dans webcomponents-lite.jsCommenter le code suivant (et rendez-le plus élégant si vous le souhaitez:

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

Et voila! le natif registerElementa maintenant été remplacé par le polyfill - que chrome n'empêche pas d'utiliser au sein d'une extension.

• Composants Web Polymer
  Vous devrez exécuter le code répertorié dans l'étape ci-dessus et en plus, vous devrez charger le polymère via le code suivant

    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
    }
  

UPDATE # 1 - Solution améliorée

Après une enquête plus approfondie, j'ai appris que Polymer ne fonctionnerait pas dans une extension lorsqu'il était chargé dynamiquement. En conséquence, les modifications ci-dessus sont nécessaires. Une alternative plus simple à cela consiste à charger le polymère dans la tête de votre script de contenu comme ceci:

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

VOUS DEVEZ ajouter les URL chargées par chrome.extension.getURLà la web_accessible_resourcespartie de votre manifeste.

Ce qui précède est nécessaire car polymer.html doit être chargé via une ressource html. Lire la réponse d'Eric Bidelman ici

Veuillez noter que vous n'aurez peut-être pas besoin du polyfill des composants Web chargé ici si votre composant les charge déjà.