A browser widget to extract Critical CSS and Full CSS from a page. Can be used via the browser console.

The widget is based on a concept by Paul Kinlan, head of Chrome webdeveloper relations team.

https://gist.github.com/PaulKinlan/6284142

The original snippet uses a Chrome innovation called getMatchedCSSRules which is deprecated and will be removed in Chrome 63.

The Critical CSS Widget is made cross browser using a polyfill for getMatchedCSSRules and it includes a tool to extract the full CSS of a page and to provide the extracted CSS as a file download with annotated file references, information about the viewport, file size and a row index to quickly navigate to the critical CSS from a specific stylesheet.

The critical CSS is also printed in groups in the broser console which enables to extract critical CSS from specific stylesheets.

Copy & paste the widget javascript code directly in the browser console (F12) and use the following methods with an optional callback to extract critical CSS.

// file download
o10n.extract();

// callback
o10n.extract('critical',function(css) {
   console.log('Extracted critical CSS:',css);
});

// file download
o10n.extract('full');

// callback
o10n.extract('full',function(css) {
   console.log('Extracted Full CSS:',css);
});

The following code will instantly start a Critical CSS download after pasting the code into the browser console.

(function(d,c,s) {s=d.createElement('script');s.async=true;s.onload=c;s.src='https://cdn.rawgit.com/o10n-x/critical-css-widget/master/critical-css-widget.min.js';d.head.appendChild(s);})(document,function() {
   // critical css file download
   o10n.extract();
});