Google Chart in Chrome Extension Popup?

Question

I would like to have my Chrome extension's popup page display a Google Chart that shows information on the user's news-reading habits. I notice (particularly here: Chrome extension doesn't work) that a problem with this is that Chrome extensions do not allow inline script, which complicates including the necessary API files to use Google Chart. Is there a way around this? Is there somewhere where I can download the entirety of the API to simply include in my extension?

Answer 1

An extension can, in principle, use a library that violates CSP. However, that requires an additional hoop to jump: Sandboxing.

  "sandbox": {
    "pages": [
      "sandbox.html"
    ]
    "content_security_policy":
        "sandbox allow-scripts; script-src 'self' 'unsafe-eval' https://www.google.com/jsapi"
  ],

It was specifically created to address this issue. See the "Using eval in Chrome Extensions. Safely." guide for implementation details.

You will need to communicate the results between your normal scripts and sandbox, as sandboxed pages have no Chrome API access.

Answer 2

You can't use Google Charts if the document is in the Chrome extension's context because it violates the inline-JavaScript rule. However, you can put an iframe into the extension's popup that references a remote resource. For instance, if the below snippet is in your popup:

<iframe src="https://mycoolextension.com/user/12345"></iframe>

Then you can have an application using Google Charts available at the address https://mycoolextension.com/user/12345. If you want to integrate the charts with the extension's data, you will either need to add parameters to the chart iframe's address, or implement a content script to message values into the iframe.