Чтение документов CSS в расширении Chrome

Я пытаюсь читать страницы CSS с помощью расширения Chrome. Вот что я имею в своем скрипте контента:

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

По какой-то причине правила всегда пусты. Я получаю все CSS-файлы, используемые в переменной 'src'. Но правила всегда бывают нулевыми. Это работает, когда я пробую это как отдельный javascript на HTML-странице. Но происходит сбой, когда я помещаю его в скрипт содержимого моего расширения Chrome. Может кто-нибудь знает почему?

 sharath17 февр. 2012 г., 01:34
оу .. понял .. Да .. установить это: "совпадения": ["http: // * / *", "https: // * / *"],
 sharath17 февр. 2012 г., 01:15
соответствует как в?
 hamczu17 февр. 2012 г., 01:03
Я проверил ваш код на панели инструментов разработчика, и, как я вижу, свойства "cssRules" и "rules" всегда имеют значение null. Более важно - чего ты пытаешься достичь?
 sharath17 февр. 2012 г., 01:06
читать все CSS и анализировать их и работать с атрибутами CSS ..
 Chris Sobolewski17 февр. 2012 г., 01:14
Не пытаясь быть педантичным, но правильно ли настроены ваши «спички»? Можете ли вы установить его на «*» и посмотреть, что произойдет?

Ответы на вопрос(4)

но поскольку расширения chrome основаны на Javascript, они могут иметь проблемы с несколькими доменами. Chrome устанавливает правила и cssRules равными нулю, когда программно пытается получить таблицу стилей из другого домена.

 Chris Sobolewski17 февр. 2012 г., 03:24
Chrome позволяет вам получить доступ к DOM в скриптах страниц.
 sharath17 февр. 2012 г., 01:56
Я пытаюсь прочитать все атрибуты CSS и сделать некоторые вещи только для чтения с атрибутами. Таким образом, вы говорите, что нет способа сделать это на плагине Chrome? ; '(
 Rob Taylor17 февр. 2012 г., 01:54
Не совсем, это угроза безопасности. Чего вы пытаетесь достичь, читая правила?
 Rob Taylor17 февр. 2012 г., 02:06
Если у вас есть контроль над серверами, с которыми взаимодействует ваше расширение, это возможно. В противном случае, если не считать итерацию объектов в DOM и вычисление их стилей, боюсь, вам не повезло.
 sharath17 февр. 2012 г., 01:35
Есть ли способ это исправить?
Решение Вопроса

вот почему, но для забавы и интереса (никогда ничего не делал с таблицами стилей раньше), я думал, что я бы сделал как ....
manifest.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);

В случае этого вопроса Id выполняет большую часть проверок во внедренном сценарии, а затем передает результаты обратно через div и его событие. Но я хотел посмотреть, смогу ли я использовать методы dom в скрипте контента, чтобы пройти через css, и это был единственный способ, которым я мог это сделать. Мне не нравится идея вставить правила обратно на страницу, но я не могу придумать какой-либо другой способ сделать это.

 dexiang16 июл. 2018 г., 12:55
для внешней таблицы стилей вы не можете читать ее содержимое как угрозу безопасности.
 dexiang16 июл. 2018 г., 12:55
для внутренней таблицы стилей вы можете получить доступ к ее содержимому напрямую.
 sharath23 февр. 2012 г., 19:59
Это так круто :) .. Я попробовал это, но по какой-то причине внешний 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]);
                }
            }
        });
    }
);
 dexiang16 июл. 2018 г., 12:56
пожалуйста, проверьте:developer.chrome.com/extensions/devtools Модули API chrome.devtools. * Доступны только для страниц, загруженных в окне DevTools. Сценарии содержимого и другие страницы расширения не имеют этих API. Таким образом, API доступны только через время существования окна DevTools.

но я думаю, что могу помочь. Одним из способов доступа к cssRules внешних листов, защищенных COR, является использование службы YQL Yahoo. Я включил его в расширение инструментов разработчика для Chrome для захвата стилей и разметки для фрагмента страницы. Расширение находится вИнтернет-магазин Chrome и находится наGithub.

Получите исходный код от Github и посмотрите на скрипт content.js, чтобы увидеть, как используется YQL. По сути, вы сделаете AJAX-вызов для YQL, и он получит CSS для вас. Вам нужно взять CSS-контент и либо внедрить его на страницу в виде встроенного тега стиля, либо проанализировать CSS с помощью JavaScript (для этого есть несколько библиотек). Если вы решите вставить их обратно в документ, убедитесь, что блоки новых стилей отключены, чтобы не испортить визуализацию страницы.

Само расширение может быть полезно для вас:

Ваш ответ на вопрос