如何使用windows.WindowStateAPI(JavaScript)？

Question

我喜欢使用 windows.WindowState API，但出现错误“windows 未定义”。

const windowState = windows.WindowState;

我正在开发一个使用语音合成的 WebExtension API。它的问题是，当语音暂停时，API 不能再在其他选项卡上使用了！为了防止这种情况，必须停止而不是暂停该语音。但在这种情况下，如果用户想再次恢复第一个选项卡上的文本，则必须从头开始重复整个段落。也就是说，为什么我要区分不同的可见性变化（为此我使用 'visibilitychange'、'blur' 和 'focus' 事件）：

TabLeave ➔ 停止讲话
TabEnter ➔ 再次开始讲话，如果用户进行了此设置
LostFocus & WndMinimized ➔ 暂停语音，如果用户进行了此设置
GotFocus & WndRestored/WndMaximized ➔ 恢复语音，如果之前暂停并且用户进行了此设置

我的“manifest.json”：

{
    "description": "My extension.",
    "manifest_version": 2,
    "name": "Lesehilfe",
    "version": "1.0",
    "homepage_url": "https://dummy.de",

    "icons": {
        "32": "icons/aero_arrow_reading_aid_32x32.cur"
    },

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["lib/tinycolor.js", "lib/input_action.js", "lib/state_change.js", "lib/print.js", "lib/xLabs_library.js", "options.js", "content.js"],
            "css": ["style.css", "resources.css"]
        }
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "options_ui": {
        "page": "options.html",
        "browser_style": true,
        "chrome_style": true,
        "_comment": "browser_style is for Firefox, non-standard chrome_style for Chrome and Opera"
    },

    "permissions": [
        "storage",
        "notifications",
        "activeTab"
    ]
}

问题演示：

<html>
    <body style="text-align: center;">
        <strong>Speech Synthesis API Test</strong>
        <p id="SOquestion">
I am developing a WebExtension, which makes use of the speech synthesis API. The problem with it is, when speech is paused, that API can’t be used on other tabs anymore! To prevent this, that speech has to be stopped instead of paused. But in this case, the whole paragraph has to be repeated from start, if the user wants to resume the text on the first tab again. That is, why I want to distinguish between different visability changes (I am using the 'visibilitychange', 'blur' and 'focus' event for this):
        </p>
        <button id="btnPlayPause">▶</button><!-- Play sign -->
        <button id="btnStop">⏹</button>    <!-- Stop sign -->
        <script>
            function onCompletion(e) {
                btnPlayPause.innerText = "▶";  // Play sign
            }

            var btnPlayPause = document.getElementById("btnPlayPause");
            var btnStop = document.getElementById("btnStop");
            var text = document.getElementById("SOquestion").innerText;

            var synth = window.speechSynthesis;
            var utterThis = new SpeechSynthesisUtterance(text);
            utterThis.onend = onCompletion;
            utterThis.lang = 'en-UK';

            btnPlayPause.addEventListener('click', (e) => {
                if (synth.paused) {
                    btnPlayPause.innerText = "⏸";  // Pause sign
                    synth.resume();
                    return;
                }
                if (synth.speaking) {
                    btnPlayPause.innerText = "▶";   // Play sign
                    synth.pause();
                    return;
                }
                btnPlayPause.innerText = "⏸";      // Pause sign
                synth.speak(utterThis);
            }, false);
            
            btnStop.addEventListener('click', (e) => {
                onCompletion();
                synth.cancel();
            }, false);
        </script>
    </body>
</html>

请按照以下步骤操作：

运行代码片段
点击播放按钮
点击暂停（同一个按钮）
导航到其他标签，其中有一篇文章
进入 Firefox reader 模式
在那里开始语音合成

➔ 它不应该播放任何语音输出（至少这发生在我身上）

现在与停止而不是暂停语音进行比较

我的问题是：

windows.WindowState API 是否仅限于后台脚本，还是也可以用在内容脚本上？
需要什么权限？

Answer 1

windows API 只能在扩展中使用，如果您使用扩展，您需要在扩展的 manifest.json 文件中请求权限。

那么你就可以像这样使用它：

const windowState = windows.WindowState;

Answer 2

问题（content/background）：

windows.WindowState API 不包含在 this list 中 - 因此它只能在后台脚本中使用。基础对象是 browser 或 chrome。这里有一些用于 onMessage 侦听器的代码行：

// does only work on Firefox (or Chromium with polyfill) due to the use of promise
return browser.windows.getCurrent().then(win => {
    return {windowState: win.state};
});

// old version for Chromium
chrome.windows.getCurrent(null, (win) => {
    sendResponse({windowState: win.state});
});
return true;

问题（许可）：

这个API不需要任何许可。

如何使用windows.WindowStateAPI(JavaScript)？

How to use windows.WindowState API (JavaScript)?

javascript

api

windowstate