Wie kann ich eine Polymer-Eisenliste von einer Browsererweiterung/Userscript bearbeiten und sortieren?

Question

Ich möchte eine Chrome-Erweiterung schreiben, um einige Daten zu jedem Listeneintrag auf einer Site hinzuzufügen, die Polymer und <iron-list> verwendet, um Daten anzuzeigen. Ich habe keine Erfahrung mit Polymer oder Web Components, aber es sieht so aus, als ob ich die verwendete Vorlage bearbeiten muss; Ist das korrekt?

Die Seite hat hat einen <iron-list> Tag eine leere <array-selector id="..."></array-selector> enthält, dann <div> die wiederum eine <template id="..."></template> enthält, durch ein Bündel von Listeneinträgen gefolgt (custom-Tags).
Die Listeneinträge sind Lazy-Loaded, so dass nur etwa 20 gleichzeitig existieren, selbst durch die Liste ist viel größer.

Das Template-Tag sieht in DevTools leer aus (es zeigt nur "# document-fragment"), und auch mit JavaScript bin ich nicht weiter gekommen.

Der nächste Schritt danach wäre, die Liste nach einigen Daten zu sortieren, die ich der Liste hinzufüge.

Wie kann ich fortfahren? Und was muss ich im Allgemeinen wissen, um Fortschritte bei diesem Projekt zu machen?

Answer 1

Nur zu sagen, es gibt 2 Versionen von Webkomponenten.

Die nativ von Browsern (Chrome) unterstützten sind shadowroots auch shadow-dom genannt.

Und diejenigen, die Polyfills benötigen.

Diese 2 Versionen sind sehr unterschiedlich. Die, die Sie mit # Dokument-Fragment beschreiben, ist mit Polyfill (wahrscheinlich) und ich habe noch nie eine Lösung gefunden, wie man <template> bearbeiten kann. In Ihrem Fall wird es sogar viel viel schwieriger sein, da Sie nicht wissen, welche Bindung es verwendet, Sie können nicht nach innen sehen und so weiter. Sehr schwer, es zu arbeiten.

Ich habe niemanden hier auf stackoverflow mit so guten Kenntnissen des Polymers gesehen.