'How to handle nested frames from content script to background script?
I am creating a webextension for Firefox, aiming to collect data in a browser game.
I've started with a simple test to manage injections and communication (with ports) between content scripts and background. All is fine in a simple page : I was just editing table cells through my extension, using an API call to get some random data. When I want to go toward my goal, I struggle in getting frames infos. My script works correctly in the game (things done in test page work fine in game), so both communication and injection seem fine. The game is using lot of frames, past the login or greeting page, as a simple structure extract shows :
<html>
<frameset>
<frame></frame> <!-- left menu -->
<frame>
<html>
<frameset>
<frame></frame> <!-- main window -->
<frame></frame> <!-- action menu-->
</frameset>
</html>
</frame>
</frameset>
</html>
This site uses same kind of structure.
Because interaction with table cells works fine, I tried to get all framesets :
console.info(document.querySelectorAll('frameset'))
Returned nodes list is empty.
I need to be able to get infos from, at least, left menu and main window.
According to MDN, I use webnavigation.getAllFrames()
.
Console output is not what I expect :
Array [ {…} ]
0: Object { tabId: 14, frameId: 0, parentFrameId: -1, … }
frameId: 0
parentFrameId: -1
tabId: 14
url: "about:debugging#/runtime/this-firefox"
<prototype>: Object { … }
length: 1
<prototype>: Array []
Reading the url property, I think my console is caught, but none of the frames.
Here is how I get my tab (background) :
browser.tabs.query({currentWindow: true, active: true})
.then((tabs) => {
tabMH = tabs[0]; // Safe to assume there will only be one result
}, console.error)
Here is how I try to get all frames :
function ecouteMessage(m) {
browser.webNavigation.getAllFrames({tabId: tabMH.id})
.then(function(framesInfo) {
console.info(framesInfo)
for (frameInfo of framesInfo) {
console.log(frameInfo);
}
}, function(a) {
console.info(a)
})
.catch(function(a) {
console.info('erreur')
console.info(a)
})
}
Finally, the manifest :
{
"manifest_version": 2,
"version": "0.1.0",
"name": "test simple",
"permissions": [
"activeTab",
"webNavigation",
"<all_urls>"
],
"icons" : {
"48": "icons/48_icon.png"
},
"content_scripts": [
{
"matches": ["*://games.mountyhall.com/*"],
"all_frames": true,
"js": [
"./content_scripts/js/test.js",
"./content_scripts/js/content_popup.js"
],
"css" : [
"./content_scripts/css/popup.css"
]
}
],
"background": {
"scripts": [
"background/scripts/background.js"
]
}
}
Solution 1:[1]
Working on WOxxOm comment, I finally understood that I can simply take needed informations during injection and save them in background script.
My manifest.json
evolved accordingly :
{
"permissions": [
"activeTab",
"webNavigation",
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"https://games.mountyhall.com/mountyhall/MH_Play/Play_menu.php",
"https://games.mountyhall.com/mountyhall/MH_Play/Play_news.php"
],
"all_frames": true,
"js": [
"./content_scripts/js/test.js",
"./content_scripts/js/content_popup.js"
],
"css" : [
"./content_scripts/css/popup.css"
]
}
],
"background": {
"scripts": [
"background/scripts/background.js"
]
}
}
I am completely unable to use .contentDocument
.
Edit : Results gets even better with this :
{
"manifest_version": 2,
"version": "0.1.0",
"name": "test simple",
"permissions": [
"activeTab",
"webNavigation"
],
"content_scripts": [
{
"matches": [
"https://games.mountyhall.com/*/*.*"
],
"all_frames": true,
"js": [
"./content_scripts/js/test.js",
"./content_scripts/js/content_popup.js"
],
}
]
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |