# How to use highcharts in content script

**URL:** <https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914>\
**Category:** Development\
**Created:** [April 21, 2018, 10:00pm UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914 "2018-04-21T22:00:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hraesvelg](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@Hraesvelg](https://discourse.mozilla.org/u/Hraesvelg)\
**Post date:** [April 21, 2018, 10:00pm UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/1 "2018-04-21T22:00:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [April 22, 2018, 7:11pm UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/2 "2018-04-22T19:11:44Z")

</div>

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

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Hraesvelg](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@Hraesvelg](https://discourse.mozilla.org/u/Hraesvelg)\
**Post date:** [April 22, 2018, 9:10pm UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/3 "2018-04-22T21:10:29Z")

</div>

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

because i have try this and the problem persist…

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [April 23, 2018, 4:49am UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/4 "2018-04-23T04:49:47Z")

</div>

> [@Hraesvelg](#):
>
> your suggestion is to remove the strict mode ?

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:

```js
(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

---

<div class="post-metadata">

**Author:** ![Hraesvelg](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@Hraesvelg](https://discourse.mozilla.org/u/Hraesvelg)\
**Post date:** [April 23, 2018, 9:48am UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/5 "2018-04-23T09:48:14Z")

</div>

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 … ?

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [April 23, 2018, 4:16pm UTC](https://discourse.mozilla.org/t/how-to-use-highcharts-in-content-script/27914/6 "2018-04-23T16:16:54Z")

</div>

> [@Hraesvelg](#):
>
> this change fix the problem of drawing !

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.