Giters

pagespeed-pro / critical-css-widget

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

Home Page:https://st.pagespeed.pro/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Failed to read the 'cssRules' property from 'CSSStyleSheet':

albertopontalto opened this issue · comments

commented

Hi.
I am using Google Chrome 66.0.3359.181 (Build ) (a 64 bit)

When i paste this into google chrome dev 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(); });

It give me the following error

image

Can you help me?

commented

Hi @albertopontalto,

Thank you very much for your feedback!

We have updated the widget with an improvement that should ignore the error.

https://github.com/o10n-x/critical-css-widget/releases/tag/1.0.2

The error is most likely related to external stylesheets.

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 has been removed in Chrome 63. The Critical CSS Widget is made cross browser using a polyfill for getMatchedCSSRules. It appears that Chrome 66 ads a security error when trying to access cssRules for external stylesheets.

image