CODEWITHSUNDEEP
google-chrome-extensionfullscreencontent-script
yaronf
yaronf

Reputation: 303

Can I detect fullscreen in a Chrome extension?

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!

Upvotes: 1

Views: 1776

Answers (3)

Peter Tadros
Peter Tadros

Reputation: 9297

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");
  }
});

Upvotes: 0

Rob W
Rob W

Reputation: 348992

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
    }
});

Upvotes: 5

gthacoder
gthacoder

Reputation: 2351

You can try something like this:

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

Upvotes: 2

Related Questions