我可以在Chrome扩展程序中检测全屏吗？

Question

我有一个Chrome扩展程序（特别是“内容脚本”），我想检测我正在监控/更改的页面是否处于全屏状态。我已经尝试了几个API，以及“screenfull”库，但到目前为止还没有运气。有什么想法吗？

感谢您的帮助！

Answer 1

如果您想检测该网页是否使用了全屏API 进入全屏模式，请点击document.webkitIsFullscreen。

如果您想要一种通用的方法来可靠地检测全屏模式，chrome.windows API是您唯一的选择。由于此API不适用于内容脚本，因此您需要使用message passing API与background或event page进行互动。

示例：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.');
});

示例：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

您可以尝试这样的事情：

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

Answer 3

最简单的方法是监听webkitfullscreenchange事件，例如

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