Search code examples
javascriptgoogle-chromegoogle-chrome-extensiongoogle-visualization

Google Chart in Chrome Extension Popup?


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?


Solution

  • 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.