0

I like to use the windows.WindowState API, but got the error "windows is not defined".

const windowState = windows.WindowState;

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):

  • TabLeave ➔ stop speech
  • TabEnter ➔ start speech again, if user made this setting
  • LostFocus & WndMinimized ➔ pause speech, if user made this setting
  • GotFocus & WndRestored/WndMaximized ➔ resume speech, if it was paused before and the user made this setting

My "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"
    ]
}

Problem demo:

<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>

Please follow these steps:

  • run code snippet
  • click play button
  • click pause (same button)
  • navigate to some other tab, which has an article
  • go into Firefox reader mode
  • start speech synthesis there

➔ it should not play any speech output (at least this happens to me)

  • now compare the same with stopping the speech instead of pausing it

My questions are:

  • Is the windows.WindowState API limited to the background script only, or can it be used on the content script too?
  • What permission does it need?
PjotrC
  • 311
  • 1
  • 6
  • 16
  • Remember to read and follow the [posting guidelines](/help/how-to-ask): if you have code, show the [mcve] for that code, if you get errors, show those errors. And of course remember to explain what it is you're doing and for non-standard APIs, why you're using them. – Mike 'Pomax' Kamermans Jan 30 '21 at 17:48
  • @Mike'Pomax'Kamermans I wanted to keep my question short. Use case is not of much importance... But ok, here is my goal: I am using the speech synthesis API and want to stop it, when the user switches to another tab, but pause it, when he minimizes that browser. – PjotrC Jan 30 '21 at 18:23
  • @Mike'Pomax'Kamermans Please open my question again. Btw: If you would add the information, which I needed, to your MDN doc article, I wouldn't have to asked here in the first place... – PjotrC Jan 30 '21 at 18:32
  • @Mike'Pomax'Kamermans Can you please provide the link for the API documentation? Because the one, that I used, is extremely short too (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/WindowState) Now I saw, that in the path, there is the information "Add-ons > Browser Extensions" mentioned - but not, what permission is needed for it. – PjotrC Jan 30 '21 at 19:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228058/discussion-between-pjotrc-and-mike-pomax-kamermans). – PjotrC Jan 30 '21 at 21:10
  • @Mike'Pomax'Kamermans I am not sure, if I understood you right: Speech synthesis is per tab and completely independent from other tabs? - I'll bet 100 bucks against that! Please see the update to my question and the steps to reproduce... Should we use the chat instead of comments? – PjotrC Jan 31 '21 at 22:24
  • I don't use chat, because this discussion is not supposed to be between us. It's between you, and _everyone on this site_, so your post should get edits in response to comments to make those comments moot (I'll delete a few of mine because the old ones are no longer needed to get those details in your post) – Mike 'Pomax' Kamermans Feb 01 '21 at 00:09

2 Answers2

0

The windows API can only be used in extensions, and if you are using an extension, you need to request permission in your extension's manifest.json file.

Then you would just use it like this:

const windowState = windows.WindowState;
luek baja
  • 1,475
  • 8
  • 20
  • no, you wouldn't, you'd use `windows.WindowState`, with a lowercase w, and and s at the end - as per [the documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows). And we can assume that they're asking about this thing because they know why they're using, but they forgot to actually the error they're getting. – Mike 'Pomax' Kamermans Jan 30 '21 at 17:46
  • @luekbaja Thank you! Yes, I am working on an extension. Is that API limited to the background script, or does it also work on a content script? What permission is needed for it? – PjotrC Jan 30 '21 at 17:55
0
  1. Question (content/background):

The windows.WindowState API is not included in this list - therefore it can only be used in background scripts. And the base object is browser or chrome. Here some lines of code for use in an onMessage listener:

// 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;
  1. Question (permission):

This API does not need any permission.

PjotrC
  • 311
  • 1
  • 6
  • 16