在 Chrome 扩展中读取文档 CSS

Question

我正在尝试使用 chrome 扩展来读取页面 CSS。这就是我的内容脚本中的内容：

   var allSheets = document.styleSheets;
     for (var i = 0; i < allSheets.length; ++i) {
      var sheet = allSheets[i];
          var src = sheet.href;
      var rules = sheet.cssRules || sheet.rules;
     }

由于某种原因，规则始终为空。我确实获得了“src”变量中使用的所有 CSS 文件。但规则总是为空。当我在 HTML 页面上将其作为单独的 javascript 尝试时，它就起作用了。但是当我将其放入 chrome 扩展的内容脚本中时失败。有人可以告诉我为什么吗？

Answer 1

好吧，这就是原因，但是为了乐趣和兴趣（以前从未使用样式表做过任何事情）我想我应该做一个如何......
ma​​nifest.json

{
    "name": "Get all css rules in stylesheets",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js" : ["myscript.js"],
            "run_at":"document_end"
        }
    ],
    "permissions": [
        "tabs", "<all_urls>"
    ],
    "version":"1.0"
}

myscript.js

// Create the div we use for communication
 var comDiv = document.createElement('div');
 comDiv.setAttribute("id", "myCustomEventDiv");
 document.body.appendChild(comDiv);

// Utitlity function to insert some js into the page, execute it and then remove it
function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); // run the script
    document.body.removeChild(script); // clean up
}


// function that gets inserted into the page
// iterates through all style sheets and collects their rules
// then sticks them in the comDiv and dispatchs the event that the content script listens for
getCSS=function (){
   var rules = '';

   // Create the event that the content script listens for
   var customEvent = document.createEvent('Event');
   customEvent.initEvent('myCustomEvent', true, true);

   var hiddenDiv = document.getElementById('myCustomEventDiv');
   var rules ='';
   var allSheets = document.styleSheets;
   for (var i = 0; i < allSheets.length; ++i) {
      var sheet = allSheets[i];
      for (var z = 0; z <= sheet.cssRules.length-1; z++) {
         rules = rules +'\n'+ sheet.cssRules[z].cssText;
      }
   }
   hiddenDiv.innerText = rules;
   hiddenDiv.dispatchEvent(customEvent);
}

// puts the rules back in the page in a style sheet that the content script can iterate through
// youd probably do most of this in the injected script normally and pass your results back through the comDiv....Im just having fun
document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', function() {
   var eventData = document.getElementById('myCustomEventDiv').innerText;
   document.getElementById('myCustomEventDiv').innerText='';

   var style = document.createElement('style');
   style.type = 'text/css';
   style.innerText=eventData;
   style = document.head.appendChild(style);
      var sheet = document.styleSheets[document.styleSheets.length-1];
      for (var z = 0; z <= sheet.cssRules.length-1; z++) {
         console.log(sheet.cssRules[z].selectorText +' {\n');
         for (var y = 0; y <= sheet.cssRules[z].style.length-1; y++) {
            console.log('  '+sheet.cssRules[z].style[y] + ' : ' + sheet.cssRules[z].style.getPropertyValue(sheet.cssRules[z].style[y])+';\n');
         };
         console.log('}\n');
      };

   // Clean up
   document.head.removeChild(style);
   document.body.removeChild(document.getElementById('myCustomEventDiv'));
});

exec(getCSS);

对于这个问题，我可能会在注入的脚本中进行大部分检查，然后通过 div 及其事件将结果传回。但我想看看是否可以使用内容脚本中的 dom 方法来浏览 css，这是我能想到的唯一方法。我不喜欢将规则插入回页面的想法，但无法找到任何其他方法。

Answer 2

要获取所有外部 css 和所有内部 css 文件，您可以使用 devtools API。如果你想在 chrome 扩展中使用它，你需要将 devtool 挂接到你的 chrome 扩展中。这段代码将起作用

chrome.devtools.panels.create(
    'my chrome extension',
    'icon.png',
    'index.html',
     function(panel) {
        var initial_resources = {};

        // collect our current resources
        chrome.devtools.inspectedWindow.getResources(function(resources) {
            for (var i = 0, c = resources.length; i < c; i++) {
                if (resources[i].type == 'stylesheet') {
                    // use a self invoking function here to make sure the correct
                    // instance of `resource` is used in the callback
                    (function(resource) {
                        resource.getContent(function(content, encoding) {
                            initial_resources[resource.url] = content;
                        });
                    })(resources[i]);
                }
            }
        });
    }
);

Answer 3

只是猜测，但由于 Chrome 扩展是基于 Javascript 的，因此它们可能存在跨域问题。当以编程方式尝试从另一个域获取样式表时，Chrome 将规则和 cssRules 设置为 null。

Answer 4

回答迟了，但我想我可以帮忙。访问受 COR 保护的外部表的 cssRules 的一种方法是使用 Yahoo 的 YQL 服务。我已将其合并到 Chrome 的开发人员工具扩展中，用于捕获页面片段的样式和标记。该扩展程序位于 Chrome 网页版存储并位于Github。

从 Github 获取源代码并查看 content.js 脚本以了解如何使用 YQL。基本上，您将对 YQL 进行 AJAX 调用，它会为您获取 CSS。您需要获取 CSS 内容并将其作为嵌入式样式标记注入到页面中，或者使用 JavaScript 解析 CSS（有一些用于此目的的库）。如果您选择将它们注入回文档中，请确保将新样式块设置为禁用，以免破坏页面的呈现。

扩展本身可能对您有用：