JavaScript：（How）如何在Chrome的DevTools中检索外部CSS规则？

我正在开发一个扩展DevTools的Chrome扩展。为此，我需要获取当前选定元素的所有已定义的CSS选择器（$0）。JavaScript：（How）如何在Chrome的DevTools中检索外部CSS规则？

我知道document.styleSheets中的每个项目都通过cssRules公开了所有必要的数据。这将是完美的，但不幸的是CORS似乎在作品中抛出扳手。对于外部样式表，cssRules返回null。

是否可以访问这些数据，而不诉诸于骇客解决方案下载样式表并将其插入到style标签中？我问，因为Chrome本身似乎在侧边栏面板样式中这样做，但我无法找到关于此事的许多信息。

谢谢！

来源

2016-09-21 Thierry

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

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

来源

2016-09-21 23:01:25 Thierry

JavaScript：（How）如何在Chrome的DevTools中检索外部CSS规则？

回答

相关问题