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?

Answer 1

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 .