如何处理从内容脚本到后台脚本的嵌套框架?

问题描述 投票:0回答:1

我正在为 Firefox 创建一个网络扩展,旨在收集浏览器中的数据游戏

我开始进行一个简单的测试来管理内容脚本和后台之间的注入和通信(通过端口)。在一个简单的页面中一切都很好:我只是通过我的扩展编辑表格单元格,使用 API 调用来获取一些随机数据。 当我想要实现我的目标时,我很难获取帧信息。 我的脚本在游戏中工作正常(测试页面中完成的事情在游戏中工作正常),因此通信和注入看起来都很好。 游戏使用了很多框架,超越了登录或问候页面,如简单的结构摘录所示:

<html>
    <frameset>
        <frame></frame> <!-- left menu -->
        <frame>
            <html>
                <frameset>
                    <frame></frame> <!-- main window -->
                    <frame></frame> <!-- action menu-->
                </frameset>
            </html>
        </frame>
    </frameset>
</html>

这个网站使用相同类型的结构。

因为与表格单元格的交互工作正常,所以我尝试获取所有框架集:

console.info(document.querySelectorAll('frameset'))

返回的节点列表为空。

我需要能够至少从左侧菜单和主窗口获取信息。

根据 MDN,我使用

webnavigation.getAllFrames()
。 控制台输出不是我所期望的:

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

读取 url 属性,我认为我的控制台已被捕获,但没有任何框架。

这是我如何获取我的选项卡(背景):

browser.tabs.query({currentWindow: true, active: true})
.then((tabs) => {
    tabMH = tabs[0]; // Safe to assume there will only be one result
}, console.error)

这是我尝试获取所有帧的方法:

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

最后,清单:

{
    "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"
        ]
    }
}
javascript iframe firefox-addon-webextensions
1个回答
0
投票

在处理 WOxxOm 评论时,我终于明白我可以简单地在注入过程中获取所需的信息并将它们保存在后台脚本中。

我的

manifest.json
相应地进化了:

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

我完全无法使用

.contentDocument

编辑:结果会变得更好:

{
    "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"
            ],
        }
    ]
}
© www.soinside.com 2019 - 2024. All rights reserved.