I’m not sure if this is the right forum and in that case please point me to the right place.
UPDATE I used a very minimal version of my extension to dynamically add Highcharts to my HTML. And I think this is a bug in Firefox web-extensions where it cannot render Highcharts.
Here’s a minimal version of the code to reproduce the problem- https://github.com/bluechips23/FirefoxTesting
ORIGINAL ISSUE
I’m having some trouble porting my Google Chrome extension into Firefox web extensions.
I did a code comparison and compatibility check between Chrome extensions and Firefox web-extensions and everything looks good.
In my webextension, when you click on the popup icon, the extension makes an AJAX request and when it gets a response, it generates the results in dynamic DOM elements in the pop-up window. In some cases, it dynamically generates charts using Highcharts.
This works in Chrome and also in Safari. But in Firefox, when I click on the popup, I notice the following sequence in the Firefox’s add-on debugger:
- It makes the AJAX request and receives a response
- As it is processing through the response and dynamically generates the DOM elements, it freezes - more specifically when it is trying to generate the charts (using HighCharts). It doesn’t show the popup window and it throws the error “Unresponsive script at tabbrowser.xml:5828” (shown below).
- If the response doesn’t have the charts, the popup-window opens up fine.
Here’s the full error stack on debugger:
Error: Script terminated by timeout at:
handleEvent@chrome://browser/content/tabbrowser.xml:5828:1
_handleDOMChange@chrome://extensions/content/ext-browser-content.js:203:7
tabbrowser.xml:5828:1
NS_ERROR_ILLEGAL_VALUE: Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIMessageSender.sendAsyncMessage] ext-browser-content.js:213
Here’s the tabbrowser.xml:5828:
<method name="handleEvent">
<parameter name="aEvent"/>
<body><![CDATA[ // This switch statement throws error.
switch (aEvent.type) {
case "load":
this.updateVisibility();
TabsInTitlebar.init();
break;
case "resize":
if (aEvent.target != window)
break;
TabsInTitlebar.updateAppearance();
...[TRUNCATED CODE]...
]]></body>
</method>
Here’s the code at ext-browser-content.js:203
_handleDOMChange(detail) {
...[TRUNCATED CODE]...
// LINE BELOW THROWS ERROR
contentViewer.getContentSizeConstrained(this.maxWidth * ratio,
this.maxHeight * ratio,
w, h);
let width = Math.ceil(w.value / ratio);
let height = Math.ceil(h.value / ratio);
result = {width, height, detail};
}
sendAsyncMessage("Extension:BrowserResized", result);
},
};