JavaScript：（How）如何在Chrome的DevTools中檢索外部CSS規則？

Question

我正在開發一個擴展DevTools的Chrome擴展。爲此，我需要獲取當前選定元素的所有已定義的CSS選擇器（$0）。

我知道document.styleSheets中的每個項目都通過cssRules公開了所有必要的數據。這將是完美的，但不幸的是CORS似乎在作品中拋出扳手。對於外部樣式表，cssRules返回null。

是否可以訪問這些數據，而不訴諸於駭客解決方案下載樣式表並將其插入到style標籤中？我問，因爲Chrome本身似乎在側邊欄面板樣式中這樣做，但我無法找到關於此事的許多信息。

謝謝！

Answer 1

我想我已經想通了。它只是多花了一些文件。

inspectedWindow API公開getResources，允許您獲取檢查窗口內的所有資源。這包括獲取其內容的類型和功能。

將此內容注入style標記允許您通過document.styleSheets訪問CSS規則。這是理想的，因爲我的側邊欄窗格被封裝在陰影DOM中，使我能夠確切地知道哪些樣式表已被注入。

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