Can I detect fullscreen in a Chrome extension?

Question

I have a Chrome extension (specifically, a "content script") where I'd like to detect whether the page I am monitoring/changing is in fullscreen state. I have tried several APIs, as well as the "screenfull" library, but no luck so far. Any ideas?

Thanks for your help!

Answer 1

If you want to detect whether the page has used the Fullscreen API to enter fullscreen mode, just check document.webkitIsFullscreen.

If you want a general method to reliably detect full screen mode, the chrome.windows API is your only option. Since this API is unavailable to content scripts, you need to use the message passing API to interact with a background or event page.

Example: content script

function isFullScreen(callback) {
    chrome.runtime.sendMessage('getScreenState', function(result) {
        callback(result === 'fullscreen');
    });
}
// Example: Whenever you want to know the state:
isFullScreen(function(isFullScreen) {
    alert('Window is ' + (isFullScreen ? '' : 'not ') + 'in full screen mode.');
});

Example: background / event page

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message === 'getScreenState') {
        chrome.windows.get(sender.tab.windowId, function(chromeWindow) {
            // "normal", "minimized", "maximized" or "fullscreen"
            sendResponse(chromeWindow.state);
        });
        return true; // Signifies that we want to use sendResponse asynchronously
    }
});

Answer 2

The simplest way is to listen for webkitfullscreenchange event, e.g

$(document).on('webkitfullscreenchange',function(){
  if (document.webkitIsFullScreen === true) {
    console.log('Full screen mode is on");
  } else {
    console.log('Full screen mode is off");
  }
});

Answer 3

You can try something like this:

var isFullScreen = (screen.width == window.outerWidth) && (screen.height == window.outerHeight);
if(isFullScreen) {
  // ...
}