Yoh*_* AI 5 javascript firefox multiple-monitors firefox-addon-webextensions
Firefox Quantum 终于在 2017 年 11 月 14 日发布。引用此链接：
过去，您可以使用以下三种不同系统之一来开发 Firefox 扩展：XUL/XPCOM 覆盖、引导扩展或附加 SDK。到 2017 年 11 月底，WebExtensions API 将成为开发 Firefox 扩展的唯一途径，其他系统将被弃用。
使用 Firefox 57 Quantum 和 Web 扩展 API，我想制作一个能够在多个屏幕上运行的扩展。此扩展程序将用于显示多屏幕仪表板。
它的想法是如此简单。如果检测到两个或更多屏幕，则每个 Firefox 启动后都会在全屏模式下为每个显示器打开一个新窗口。我可以全屏显示，但面临在另一台显示器上打开并检测连接了多少显示器的问题。
使用browser.windowsAPI 创建另一个新选项卡，这里是一些片段代码：
getCurrentWindow().then((currentWindow) => {
let mirror1 = browser.windows.create({
url: "http://172.20.12.211:8080/ivi",
state: "fullscreen"
});
mirror1.then(() => {
browser.windows.remove(currentWindow.id);
var updateInfo = {
state: "fullscreen"
};
let mirror2 = browser.windows.create({
url: "http://172.20.12.211:8080/ivi",
state: "fullscreen"
});
mirror2.then((nextWindow) => {
var updateInfo = {
left: 1366
};
browser.windows.update(nextWindow.id, updateInfo);
});
});
});
显然，我上面的解决方案是针对两台显示器进行硬编码并将left参数设置为 1366 像素，因此如果屏幕分辨率不等于 1366x768 或连接了两台以上的显示器，则此解决方案将无法正常工作。
因此，是否有任何 API 或更好的方法来检测连接了多少显示器并检查它们的分辨率？Web 扩展 API 是否具有检测多个显示器和分辨率值的功能？如果没有，可能的解决方法是什么？
没有现成的扩展 API 可以回答您的问题，但有足够的构建块可以以其他方式回答问题。
当前窗口相对于显示器的位置可通过以下方式获得：
window.screenX- https://developer.mozilla.org/en-US/docs/Web/API/Window/screenXwindow.screenY- https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY可以通过以下方式检索正在显示窗口的显示器的大小：
screen.width- https://developer.mozilla.org/en-US/docs/Web/API/Screen/widthscreen.height- https://developer.mozilla.org/en-US/docs/Web/API/Screen/heightFirefox 甚至提供了读取当前显示器相对于所有其他显示器的位置的功能。如果您有两个显示器，并且当前屏幕实际上位于另一个屏幕的右侧，则非标准 Firefox-only screen.left属性具有非零值。
sreen.left- https://developer.mozilla.org/en-US/docs/Web/API/Screen/leftsreen.top- https://developer.mozilla.org/en-US/docs/Web/API/Screen/top注意：当privacy.resistFingerprinting在 Firefox 中打开该首选项时，上述所有 API 都会返回虚拟值。不过，您仍然可以通过扩展 API 查询窗口大小和位置chrome.windows.get。
如果您创建一个虚拟窗口并将其在屏幕上移动，那么您可以使用上述 API 来推断有关屏幕的信息，并最终构建可用显示和尺寸的完整视图。这是打印上述信息的示例扩展。您可以单击该按钮打开一个窗口，然后手动移动该窗口。
这可以通过打开一个非常窄的弹出窗口并使用 来移动它来自动化chrome.windows.update。如果左/上偏移太大，则窗口将粘在屏幕边缘（例如，如果您将 99999 作为左偏移传递到 1024px 宽的屏幕上宽度为 100 的窗口，则左偏移将变为924）。
manifest.json{
"name": "Display info",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Open popup to display info"
}
}
background.jschrome.browserAction.onClicked.addListener(function() {
chrome.windows.create({
url: chrome.runtime.getURL('/display.html'),
});
});
display.html<meta charset="utf-8">
<body style="white-space:pre">
<script src="display.js"></script>
display.jssetInterval(function() {
document.body.textContent =
'\nWindow offset: ' + window.screenX + ',' + window.screenY +
'\nScreen size : ' + screen.width + 'x' + screen.height +
'\nScreen offset: ' + screen.left + ',' + screen.top;
chrome.windows.get(chrome.windows.WINDOW_ID_CURRENT, function(win) {
document.body.insertAdjacentText('beforeend',
'\nExtension window offset : ' + win.left + ',' + win.top);
});
}, 200);
上述 API 并不特定于扩展。您还可以运行以下代码片段并移动窗口以查看值。
<body style="white-space:pre">
<script>
setInterval(function() {
document.body.textContent =
'\nWindow offset: ' + window.screenX + ',' + window.screenY +
'\nScreen size : ' + screen.width + 'x' + screen.height +
'\nScreen offset: ' + screen.left + ',' + screen.top;
}, 200);
</script>