Using Google Chart API in chrome extension

[Andrey]

Hello. i using a Google Chart API in my chrome extension popup page.
But it is unuseful that api loading every time popup showing. Can i
and how i can load API script in background page and call it from
popup page to increase popup open speed?

[Riccardo Govoni ☢]

I played with this for a few minutes. As you suggest, I try loading the api in the background page (so this happens only once), and then access it in the popup page via:

var background = chrome.extension.getBackgroundPage();

'background' now points to the window object of the background page, so you can access the Google Visualization api, for example: background.google.visualization.DataTable.

You can see an example at https://gist.github.com/1240641.

The issue I face is that the chart that is created in the popup window is empty. More specifically, the chart rendering process creates an iframe (where the chart svg is placed) and said iframe appears to be empty.

I tried a few alternatives, but in all cases I end up with an empty iframe:

- executing the draw code in background page context, but pointing to the popup page DOM via chrome.extension.getViews({type: "popup"})[0] 

- drawing in the background page and then copying the created chart in the popup page via cloneNode().

I don't have much time right now to follow up, but I suspect the charts code fails drawing when the document hosting the target chart container is not the same document which hosts the API (although I couldn't find any specific js errors while debugging). Alternatively, there could be restrictions in the chrome extensions model to prevent popup page accessing the contents of iframes created by the background page (although this seems likely, if I know chrome extensions well enough).

I'll try to look a bit further into this if I have time, in case nobody picks this up before.

-- R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Riccardo Govoni]

I explored the topic a bit more. Here are the findings.

For charts that use iframes (such as LineChart and most of the 'corechart' package, which renders its SVG contents into an iframe created inside the chart container element you specify) there are some limitations in the code that prevent the rendering to occur correctly when the chart code is loaded in a different Window than the one where the chart is placed (as it happens here, where the code is loaded in the background page and the chart is rendered in the popup page, and as it may happen in other multi-frame scenarios).

Also, for charts that rely on additional resources (such as the Table visualization, which loads a style CSS file on the fly when used) such resources as well appear to be added to the Window where the code executes (the background page) rather than the Window where the chart is placed (the popup), resulting in either a non-working or un-styled visualization (depending on the loaded resources).

So I'd say that for the moment, the trick of loading the chart API in the background page to speed up the rendering of the extension popup is a no-go.

-- R.