JavaScript: (Wie) kann man in den DevTools von Chrome externe CSS-Regeln abrufen?

Question

Ich arbeite an einer kleinen Chrome-Erweiterung, die die DevTools erweitert. Dazu muss ich alle definierten CSS-Selektoren für das aktuell ausgewählte Element ($0) erfassen.

Ich weiß, dass jedes Element innerhalb document.styleSheets alle erforderlichen Daten durch cssRules verfügbar macht. Das wäre perfekt, aber leider scheint CORS einen Strich durch die Rechnung zu machen. Bei externen Stylesheets gibt cssRulesnull zurück.

Ist es möglich, auf diese Daten zuzugreifen, ohne auf eine hackische Lösung, z. das Stylesheet herunterladen und in ein style-Tag einfügen? Ich frage, weil Chrome selbst scheint so in seinem Styles Sidebar Panel zu tun, aber ich kann nicht viele Informationen zu diesem Thema finden.

Danke!

Answer 1

Ich denke, ich habe es herausgefunden. Es dauerte nur ein wenig mehr in der Dokumentation zu graben.

Die API inspectedWindow macht getResources verfügbar, sodass Sie alle Ressourcen innerhalb des überprüften Fensters abrufen können. Dies umfasst den Typ und die Funktionalität zum Abrufen seines Inhalts.

Durch Einfügen dieses Inhalts in ein style-Tag können Sie über document.styleSheets auf die CSS-Regeln zugreifen. Dies ist ideal, da mein Sidebar-Bereich in einem Schatten-DOM gekapselt ist, sodass ich genau wissen kann, welche Stylesheets importiert wurden.

chrome.devtools.inspectedWindow.getResources(function(resources) { 
    for (var i = 0; i < resources.length; i++) { 
     if (resources[i].type != 'stylesheet') { 
      continue; 
     } 

     // inject the resource into the shadow DOM 
     // this allows us to freely access all CSS rules CORS-free 
     resources[i].getContent(function(content) { 
      var style = document.createElement('style'); 
      style.textContent = content; 
      document.body.appendChild(style); 
     }); 
    } 
});