keithclark / css-feature-toggle-devtools-extension

A devtools extension for toggling CSS features allowing developers to see how pages/apps render in browsers that don't support modern CSS features
MIT License
162 stars 5 forks source link

Investigate `<iframe>` support #5

Closed keithclark closed 5 years ago

keithclark commented 5 years ago

Currently, CSS rules defined <style> elements can only be disabled in the top-level document.

devtools.inspectedWindow.eval() is being used to execute JavaScript in the page to collect up CSS text of each <style> element and pass it back to the devtools panel for modification. It should be possible to update the eval'd page script to walk into <iframe> elements that share the same origin, however it would be good to find a solution that works for all documents.

My initial though is to use a content_script / background_page to inject JS into each document and use messages to communicate with the devtools panel.