I am developing a Chrome extension at the moment, and one of its main features is to trigger specific checks upon detecting user typing in input and textarea elements.
My code works fine on normal pages, but while testing, I recently encountered an issue of the code not detecting the input, if the input field in question is being loaded via a frame tag.
How can I rectify that? Here is my attempt at fixing it, but it doesn’t seem to be working. No errors either.
// Helper function to add an input event listener to a given document
function addInputListener(doc) {
doc.addEventListener('input', function(event) {
if ((event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') && !domainCheckTriggered) {
domainCheckTriggered = true; // Ensure this runs only once
checkDomain(); // Call the function when input is detected
}
}, true); // Use capture phase to ensure it catches early
}
// Attach listener to the main document
addInputListener(document);
// Function to handle frames (for <frame> inside <frameset>)
function handleFrame(frame) {
try {
const frameDoc = frame.contentDocument || frame.contentWindow.document;
if (frameDoc) {
addInputListener(frameDoc); // Attach the event listener to the frame's document
console.log("Input listener added to frame:", frame.src);
} else {
console.warn("Could not access frame content:", frame.src);
}
} catch (error) {
console.error('Error accessing frame content:', error);
}
}
// Attach listeners to any frames that exist on page load
if (document.frames) {
for (let i = 0; i < document.frames.length; i++) {
handleFrame(document.frames[i]);
}
}
// Listen for dynamically added frames (if they can be added dynamically in your case)
const observer = new MutationObserver(function(mutations) {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.tagName === 'FRAME') {
handleFrame(node);
}
});
});
});
// Start observing the document for changes (e.g., dynamically added frames)
observer.observe(document.body, { childList: true, subtree: true });
manifest.json
{
"manifest_version": 2,
"name": "Tempest",
"version": "1.0",
"icons": {
"16": "icons/tempest_16.png",
"48": "icons/tempest_48.png",
"128": "icons/tempest_128.png"
},
"browser_action": {
"default_icon": {
"16": "icons/tempest_16.png",
"24": "icons/tempest_48.png",
"32": "icons/tempest_128.png"
}
},
"permissions": [
"tabs",
"pageCapture",
"activeTab",
"storage",
"<all_urls>"
],
"background": {
"scripts": ["scripts/jszip.min.js", "background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_idle"
}
],
"web_accessible_resources": [
"whitelist.txt",
"UI/welcome.html",
"UI/register.html",
"UI/login.html"
],
"options_page": "UI/welcome.html"
}
