While writing a text to speech extension I thought of an issue I can't figure out how to solve.
When you have one or more iframes on a page.
One iframe for this example. See Test_page html below.
You select text first in source page "brown fox" and second in the iframe "my box".
Now you execute eg via keyboard shortcut [chrome.commands.onCommand]:
[extension] Background.js:
chrome.tabs.executeScript(
{code: "window.getSelection().toString()", allFrames: true},
function(results) { console.log(results); });
The result is this:
["brown fox", "my box"]
The code do what it should but the selected text that is in focus is "my box" in the iframe. That might be the text the user expects to be spoken.
Is there anyway to figure out which selected text on the page has focus?
I could easily queue up both selections but that might not be expected by the user.
Am I overthinking this?
Note: I've reduced the code to the important part.
Note 2: Focus, meaning the white text with the blue background, the default in Windows.
Test_page.html:
<!DOCTYPE html>
<html>
<head>
<title>Text to speech test page</title>
</head>
<body>
<div>The quick, brown fox jumps over a lazy dog.</div>
<div>
<iframe src="Test_page_iframe.html"></iframe>
</div>
</body>
</html>
Test_page_iframe:
<!DOCTYPE html>
<html>
<head>
<title>[iframe] Text to speech test page</title>
<style type="text/css">
.text_iframe {
color: orange;
}
</style>
</head>
<body>
<div class="text_iframe">Pack my box with five dozen liquor jugs.</div>
</body>
</html>