Reading documents CSS in Chrome Extension

Question

I am trying to read the pages CSS using a chrome extension. This is what i have in my content script :

   var allSheets = document.styleSheets;
     for (var         


        

Answer 1

For getting all external css and all internal css file, you can use devtools API. If you want to use it in chrome extension you need to hook devtool into you chrome extension. This code will work

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