Firefox 扩展将 Javascript 数组作为对象发送

2024-02-21

我在将 JavaScript 数组传递给我正在编写的附加组件时遇到问题附加生成器 https://builder.addons.mozilla.org/.

为了进行通信，我使用事件并使用数组发送事件，但附加组件（内容脚本）获取一个对象，而不是数组。

这是事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="application/x-javascript">

$(function() {
    $(window).bind('Runner-PageEvent', function(event) {
        console.log('PAGE: Reakcja na Runner-PageEvent na stronie');
    });

    $(window).bind('RunnerResult', function(event) {
        console.log('PAGE: Result is ' + event.originalEvent.detail.Result);

//// PROBLEM!!!
        console.log('PAGE: Should be array: ' + event.originalEvent.detail.array); // firebug shows object

        });

    $(window).bind('Runner-DetectCallback', function(event) {
        console.log('PAGE: Reakcja na Runner-DetectCallback na stronie');
        $('#browser-detection').text('Extension detected').css('background-color', 'green').css('color', 'white');
    });

    var event = new CustomEvent("Runner-Detect", {});
    window.dispatchEvent(event);
    console.log('PAGE: Runner-Detect sent');
});

function CallExtension() {
    var event = new CustomEvent("Runner-PageEvent", { detail : {
            a: "messageA",
            b: "messageB",
            c: "messageC",
            d: "messageD",
            arrayA: ["a", "b", "c", "d"],
            arrayB: [0, "info", "info2", 3]
        }});
    window.dispatchEvent(event);
    console.log('PAGE: CALL EXTENSION clicked');
}

</script> 
</head>
<body>
<div id="browser-detection" style="background-color: red">No extension</div>
<br/>
Run extension: <button onclick="CallExtension()">Run!</button>
</body>
</html>

Firebug 将事件显示为具有一个属性的对象detail.tab作为包含四个项目的数组。

内容脚本接收一个对象e, where e.detail.tab是一个对象（但应该是一个数组）。

window.addEventListener(
    'eventname', 
    function(e) { 
        // console.log(e.detail.tab.length); -> produce an error on console (Ctrl+Shift+J)
        // console.log(e.detail.tab[0]); -> as above
        for(var x in e.detail.tab){
            console.log(x);
            console.log(e.detail.tab[x]);
        }            
        self.port.emit('SendToExtension', e.detail);
    }
);

不知道是Add-on Builder有问题还是我做错了什么？
请帮忙！

似乎有一个错误CustomEvent() https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent将信息传入和传出沙箱（XPCNativeWrapper https://developer.mozilla.org/en-US/docs/XPCNativeWrapper）。它的序列化不正确CustomEventInit.detail在某些情况下的价值，并且在第一次这样的情况之后，未能通过detail根本没有价值——表明正在发生某种内存/状态损坏。

以下内容请参考此测试页：jsbin.com/ajegib/1 http://jsbin.com/ajegib/1.
安装或在“测试”模式下运行此 Firefox 附加组件：CustomEvent data_ 跨沙箱 https://builder.addons.mozilla.org/package/156591/latest/.

请注意，测试网页和扩展程序的内容脚本都具有如下代码：

window.addEventListener ("EventWithArrayData", function (zEvent) {
    console.log (
        "Event detail: ", zEvent.detail, Array.isArray (zEvent.detail)
    );
} );

var zEvent = new CustomEvent ("EventWithArrayData",
    {"detail": [5,6,7] }
);
window.dispatchEvent (zEvent)

Open both Firebug's console, and the Firefox Error Console (CtrlShiftJ) to observe the results as custom events with array values for detail are sent. (You can press the Normal array data button, to send them.)

What should happen:

网页和扩展程序都应该将两个事件的数据视为数组。

The Firebug安慰should展示：

**The Normal button was pressed.**
In web page (Normal) from page: [1, 2, 3]  true
In web page (Normal) to page: [5, 6, 7]  true

The FF Error安慰should展示：

info: In Content Script (Normal) from page:  1,2,3 true
info: In Content Script (Normal) to page:  5,6,7 true

What does happen:

On the 第一个活动:

The Firebug控制台显示：

**The Normal button was pressed.**
In web page (Normal) from page: [1, 2, 3]  true
In web page (Normal) to page: {0: 5, 1: 6, 2: 7}  false

The FF Error控制台显示：

info: In Content Script (Normal) from page:  [object Object] false
info: In Content Script (Normal) to page:  5,6,7 true

On the 所有后续事件:

The Firebug控制台显示：

**The Normal button was pressed.**
In web page (Normal) from page: [1, 2, 3]  true
In web page (Normal) to page: null  false

The FF Error控制台显示：

info: In Content Script (Normal) from page:  [object Object] false
info: In Content Script (Normal) to page:  null false

Observe:

在所有情况下，web page正确地看到自己的事件发送的数组数据。它看到一个数组。
但是，该扩展看到的是一个类似数组的对象。
从扩展发送的数组数据在第一次传递时对扩展正确显示，但在所有后续尝试中都为空。
从扩展发送的数组数据在页面上显示为对象，然后根本不显示（null)!

解决方法：

Both 自定义事件文档 https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent and DOM 标准 http://dom.spec.whatwg.org/#interface-customevent声明eventInitDict.detail可以有任何类型。但对于通过附加沙箱发送的事件，情况显然并非如此。
好像没有火狐浏览器的错误 https://bugzilla.mozilla.org/index.cgi为了这。也许我们应该开一个。

不管怎样，似乎有效的解决方法是对我们发送的数据进行 JSON 编码CustomEvent().

像这样发送：

var detailVal   = JSON.stringify ( [1, 2, 3] );

var zEvent = new CustomEvent ("EventWithJSON_Data",
    {"detail": detailVal }
);
window.dispatchEvent (zEvent)

像这样接收：

window.addEventListener ("EventWithJSON_Data", function (zEvent) {
    var datArray    = JSON.parse (zEvent.detail);
    console.log (
        "JSON data: ", datArray, Array.isArray (datArray)
    );
} );

You can see this at work on the test page + extension by pressing the JSON-encoded array data button. (Be sure to refresh the page first to clear the corruption discussed above.)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)