Using Google Charts in Chrome extension

Question

I want to use a chart library in my extension. Google Charts library seems to be the most convenient one. But I can't use it in the script I inject into the page. My manifest.json looks like this:

...
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [
  {
    "js": ["loader.js", ...],
    ...
  }
],
...

But I always get these errors:

jsapi_compiled_format_module.js:1 Uncaught ReferenceError: google is not defined
jsapi_compiled_default_module.js:1 Uncaught ReferenceError: google is not defined
jsapi_compiled_ui_module.js:1 Uncaught ReferenceError: google is not defined
jsapi_compiled_corechart_module.js:1 Uncaught ReferenceError: google is not defined

And it is only one line in the script:

google.charts.load('current', {'packages':['corechart']});

So is it any way to make it work?

Are you not attempting to load content from gstatic anymore? If not, that invalidates my answer. — vcsjones, Feb 18 '16 at 17:15
I've done both ways and got same errors, tried your answer, but it hadn't changed anything. — user3262515, Feb 18 '16 at 17:37
Hi @user3262515 how did you managed to use google charts in your extension finally, I am also going through the same issue. Did you used an alternative library or found a way to use google charts. Thank you. — Mudasir Abi, Apr 13 '20 at 08:05

score 1 · Accepted Answer · edited May 23 '17 at 11:58

loader.js tries to add additional code by inserting <script> tags into the page.

Due to content script context isolation, those scripts execute in the page's context (and not the content script context). Therefore, google becomes defined in the page, but not in your script.

It's not clear if this can be worked around at all.

By Terms of Service, you are not allowed to bypass the loader and the API will likely actively prevent you from doing so.
You can inject your code that uses charts into the page as well, but that opens up issues that the context isolation is there for in the first place.

It's by far easier to find an alternative library that you can simply include with the extension, for example Chart.js.

Thank you, now I'm using Chart.js but it doesn't have some features, I need. But okay, I'll try to adapt it for my project. — user3262515, Feb 18 '16 at 18:37

Using Google Charts in Chrome extension

1 Answers1