Chrome Extensions and loading external Google APIs Uncaught ReferenceError

Question

Right now I'm in the process of creating a Chrome extension. For it, I need to use Google's Calendar Data API. Here is my manifest.json file:

{
"name": "Test",
"version": "1.0",
"background_page": "background.html",
"content_scripts": [
    {
    "matches": ["<all_urls>"],
    "js": ["jquery.js", "content_script.js"]
    }
],
"permissions": [
    "tabs", "http://*/*"
]

}

I've tried adding the following to the js part of the manifest file but that throws an error when loading the extension.

http://www.google.com/jsapi?key=keyhere

I've also tried adding

document.write('<script type="text/javascript" src="http://www.google.com/jsapi?key=keyhere"&gt;&lt;/script&gt;');

to my background.html file. However, whenever I call

google.load("gdata", "1");

I get an error that says Uncaught ReferenceError: google is not defined. Why is my extension not loading this api when it loads the other ones fine?

Answer 1

You can't include external script into content_scripts.

If you want to inject <script> tag using document.write then you need to mask slash in a closing tag:

document.write('...<\/script>');

You can include your external api js into background page just as usual though:

<script type="text/javascript" src="http://www.google.com/jsapi?key=keyhere"&gt;&lt;/script&gt;

If you need this api in content scripts then you can send a request to your background page and ask it to do API-dependent stuff there, and then send a result back to your content script.

Answer 2

Thanks for that link, it helped a lot. However, now I've run into another interesting problem.

    for (var i = rangeArray.length - 1; i >= 0; i--) {
    var myLink = document.createElement('a'); 
    myLink.setAttribute('onclick','helloThere();'); 
    myLink.innerText ="GO";
    rangeArray[i].insertNode(myLink);
}

Now I get the error, "helloThere is not defined" even though I placed that function about ten lines above the current function that has the above loop in the same file. Why might this be happening? And if I do:

    for (var i = rangeArray.length - 1; i >= 0; i--) {
    var myLink = document.createElement('a'); 
    myLink.setAttribute('onclick','chrome.extension.sendRequest({greeting: "hello"}, function(response) { });'); 
    myLink.innerText ="GO";
    rangeArray[i].insertNode(myLink);
}

I get Uncaught TypeError: Cannot call method 'sendRequest' of undefined