How to use highcharts in content script

hi all,

i have problem since the lastest version of firefox (59.0.2) and my extension.
i use highcharts like content script in my extension but highcharts (6.0.7) need to access specific function the console return the message when i show graph :

TypeError: 'requestAnimationFrame' called on an object that does not implement interface Window.  highcharts_6.0.7.js:272:25
Error: Permission denied to access property Symbol.toPrimitive

the function requestAnimationFrame is necessary to draw the graph
the property Symbol.toPrimitive is use to show tooltip in graph…

how can i fix it ?

thanks!

I don’t think this is a WebExtension problem. The only reference to requestAnimationFrame in https://code.highcharts.com/6.0.7/highcharts.js is:

u=E.requestAnimationFrame||function(a){setTimeout(a,13)}

if that is done in strict mode and you later call u, it basically boils down to:

o = { r: window.requestAnimationFrame, }; o.r(() => console.log('frame'));

(the this inside requestAnimationFrame is not a Window object) and Firefox doesn’t like that, which makes sense. Firefox needs to know for which window you are requesting your next-paint callback.

One reason why you may run into this problem is a top-level "use strict" declaration.
Using strict mode is a good practice, but always do it within a function closure, to avoid problems with 3rd party code.

ok, so if i resume your suggestion is to remove the strict mode ?

because i have try this and the problem persist…

Not at all:

Using strict mode is a good practice, but always do it within a function closure.

I.e., wrap your code in a self invoking function:

(function(global) { 'use strict';

// your code here

})(this);

Your strict mode is safely scoped to the code in the file, and if you want to set any global variables, you can explicitly do so on the global object.


If removing/scoping the use strict doesn’t help, you can:

  • add a script that runs before highcharts that does window.requestAnimationFrame = window.requestAnimationFrame.bind(window); (If the assignment doesn’t work use Object.defineProperty)
  • report the problem with highcharts

ok ok sorry bad translation …

if other developper have a problem i have modify the code :

(function(root, factory) {
    **'use strict';**
    if (typeof module === 'object' && module.exports) {
        module.exports = root.document ?
            factory(root) :
            factory;
    } else {
        root.Highcharts = factory(root);
    }
}(typeof window !== 'undefined' ? window : this, function(win) {
    var Highcharts = (function() {
        **window.requestAnimationFrame = window.requestAnimationFrame.bind(window);**
...

this change fix the problem of drawing ! thanks for your help !

he remains the last bug with tooltip not showing…
when i have mouse hover in charts the console render :

Error: Permission denied to access property Symbol.toPrimitive

i don’t know where come from the bug … ?

That is good to hear.

if other developper have a problem i have modify the code

Not really. And doing that would make it pretty hard to pass the AMO code review.
Instead, put the window.requestAnimationFrame = window.requestAnimationFrame.bind(window); line in a different script that you include before everything else.
And the first use strict you seem to have added is pointless. (What I meant is that you should add it to your code. Leave libraries unchanged.


remains the last bug with tooltip not showing…
when i have mouse hover in charts the console render :

Error: Permission denied to access property Symbol.toPrimitive

That sounds like a script is trying to cast an object into a string or number which is it not allowed to access.

If the console doesn’t give you a stack trace to the Error, you can set the debugger to pause on (caught) Exceptions. That should break where the Error occurs and should help to understand what is going on.