Identify true activeElement in a frame hierarchy - google-chrome-extension

Question

I'm looking for a way to get the focused input of any page with the goal to update it's value.
I have a content script that receives the value and checks if activeElement is an <input>.
The challenge is when the main document's activeElement is an iframe. I can set all_frames: true in manifest, which will find any active <input>, but I only want to set the value of the activeElement of the active iframe.
Currently I'm solving this by letting the child content script(s) blur() all activeElements except the current one (attaching a handler to focusin), but a solution that does not modify the document state would be better imho.
Is it possible to send a message only to the main document and if this one's activeElement is an iframe, get that frameId (and try again)?
I don't control the web pages.

Answer 1

Inject a new content script that checks the full hierarchy of frames, including cross-domain frames.
main content script asks the background/event page if needed:
if (document.activeElement.matches('input') && window == parent) {
console.log('Input', document.activeElement);
document.activeElement.value += ' gotcha!';
} else {
chrome.runtime.sendMessage({action: 'modifyInput'});
}
background/event page script executes the additional content script in all frames:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse)) {
if (msg.action == 'modifyInput') {
chrome.tabs.executeScript(sender.tab && sender.tab.id, {
file: 'modify-input.js',
allFrames: true,
matchAboutBlank: true,
runAt: 'document_end',
});
}
});
modify-input.js, IIFE is used to makes sure garbage collection removes the injected stuff.
;(function() {
if (isInputActive()) {
if (window == parent) {
foundTheInput();
} else {
askParent();
}
} else if (isFrameActive()) {
window.addEventListener('message', function onMessage(e) {
if (!e.data || e.data.id != chrome.runtime.id)
return;
switch (e.data.action) {
// request from a child frame
case 'checkme':
if (window == parent) {
confirmChild(e.source);
window.removeEventListener('message', onMessage);
} else {
askParent();
}
break;
// response from a parent
case 'confirmed':
window.removeEventListener('message', onMessage);
if (isInputActive()) {
foundTheInput();
} else if (isFrameActive()) {
confirmChild(e.source);
}
break;
}
});
}
function isInputActive() {
return document.activeElement.matches('input');
}
function isFrameActive() {
return document.activeElement.matches('frame, iframe');
}
function askParent() {
parent.postMessage({id: chrome.runtime.id, action: 'checkme'}, '*');
}
function confirmChild(childWindow) {
console.log('Frame', document.activeElement);
childWindow.postMessage({id: chrome.runtime.id, action: 'confirmed': true}, '*');
}
function foundTheInput() {
console.log('Input', document.activeElement);
document.activeElement.value += ' gotcha!';
}
})();
I didn't test this, but did use and saw similar code previously.