Search code examples
cssgoogle-chrome-extensionmedia-queriesbrowser-extension

CSS - Media Queries in a Chrome Extension Popup


How can I properly do a media query on the Chrome window's width? Is it even possible to properly do media queries in a Chrome extension?
Right now, my media queries act on the width of the extension's viewport, not on the actual browser's viewport (and the extension's viewport can be larger than the browser's). In a normal web app, the viewport width is always equivalent to the browser's viewport, but it doesn't seem to be the same for an extension

There seems to be a way to do this with JavaScript by setting the 'html' tag's width, but if there is a pure CSS way that'd be preferable

(This is for a browser action extension with a popup UI)


Solution

  • At least in a browser action popup, it is impossible to query the parent window's width with pure CSS. As I thought and @Xan confirmed in the comments, JavaScript is necessary to get the width of the parent window.

    A way to do this with JavaScript can be found here: How to get notified on window resize in chrome browser. Note that this does require a content script as chrome.window.onResized is still an open issue since 2010