chrome extension unable to load external javascript from google using content scripts and other ways

Question

I am writing a chrome extension which will enable transliteration for specific textboxes in facebook.

I have used the script tab to load https://www.google.com/jsapi in background.html

here is the code i have used in a content script i tried to load using ajax and the generic way.

when i checked it said google undefined.

/*
$.ajax({
  url: "https://www.google.com/jsapi",
  dataType: "script",

});
*/

var script = document.createElement("script"); 
script.setAttribute('type','text/javascript'); 
script.setAttribute('src','https://www.google.com/jsapi?'+(new Date()).getTime()); 
document.body.appendChild(script);

$(document).ready(function()
{
    alert(google)
    if(window.location.href.indexOf('facebook.com'))
        yes_it_is_facebook();
})



function yes_it_is_facebook()
{
//  document.getElementsByName('xhpc_message_text')[0].id = 'facebook_tamil_writer_textarea';

//  alert(document.getElementsByName('xhpc_message').length)

    google.load("elements", "1", { packages: "transliteration" });  
    google.setOnLoadCallback(onLoad);   
}

function onLoad()
{
    var options = {
                sourceLanguage:
                    google.elements.transliteration.LanguageCode.ENGLISH,
                destinationLanguage:
                    [google.elements.transliteration.LanguageCode.HINDI],
                shortcutKey: 'ctrl+g',
                transliterationEnabled: true
            };

    var control = new google.elements.transliteration.TransliterationControl(options);  
    control.makeTransliteratable(['facebook_tamil_writer_textarea']);   
}

and i have https://www.google.com/jsapi in manifest.json content script array.

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.2.min.js", "js/myscript.js", "https://www.google.com/jsapi"]
    }
  ],

it showed an error

Could not load javascript https://www.google.com/jsapi for content script

here is my manifest.json

{
  "name": "Facebook Tamil Writer",
  "version": "1.0",
  "description": "Facebook Tamil Writer",
  "browser_action": {
    "default_icon": "images/stick-man1.gif",
    "popup":"popup.html"
  },

  "background_page": "background.html",

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.2.min.js", "js/myscript.js", "https://www.google.com/jsapi"]
    }
  ],

  "permissions": [
    "http://*/*",
    "https://*/*",
    "contextMenus",
    "tabs"
  ]
}

in that i have added https://www.google.com/jsapi for your understanding and i have tested removing that also.

so how do i load that javascript into a document context . that is when ever a web page is loaded... here i specifically loading for facebook. still i have to correct the indexof condition because it is not giving the proper result but that is not the problem to this context of my question.

so please suggest me.

Answer 1

I don't seem to find any documentation regarding this but I think you cannot mention an http:// path in content_scripts option. A possible work around could be this:

$('head').append("<script type='text/javascript' src='http://google.com/jsapi'>");

Or loading it via ajax request as you have commented out in your code.

Secondly google.com/jsapi will have to be loaded before you can use it in your script. In your manifest you are loading your script first and then google.com/jsapi.

A friendly advice: jQuery by default disallows caching by appending timestamp at the end of url. Since the script you are trying to load is not likely to change in short durations you can pass cache: false as an option for saving load time. Check out this page for more info. Better yet you can bundle the script with your package so that there is no ajax request associated with your extension, that will add to the speed of your extension.

Answer 2

One of the biggest issues with google.load is that it cannot properly load resources after the page has fully loaded, because the API uses document.write to inject scripts/styles. To fix the issue, two methods have to be patched:

(function(g) {
    var loader_d = g.loader.d,
        setOnLoadCallback = g.setOnLoadCallback;
    // Force not to use document.write when the document is loaded
    g.loader.d = g.loader.writeLoadTag = function(a, b) {
       loader_d(a, b, document.readyState === 'complete');
    };
    // Executes functions directly when page has loaded
    g.setOnLoadCallback = function(a_listener, b) {
        if (b || document.readyState !== 'complete') {
            setOnLoadCallback(a_listener, b);
        } else {
            // When the API is not loaded yet, a TypeError with google.
            //  will be thrown. Not a ReferenceError, because google.* is defined
            // Retry max *c* times.
            var c = 5;
            b = function() {
                try {
                    a_listener();
                } catch (e) {
                   if (e instanceof TypeError && (''+e).indexOf('google.')!=-1) {
                       if (c--) setTimeout(b, 2000);
                   }
                }
            };
            b();
        }
    };
})(google);

Now, problem 2: Content Scripts run in an isolated environment: any properties of the global namespace, window, are not accessible. So, any injected APIs are not visible to your Content Script.

To fix this, see the following Stack Overflow answer: Building a Chrome Extension.

Answer 3

This might help with understanding Chrome's security policies

CSP

In there is says that if you attach a script tag to the page (not the popup or content script) it loads in the context of the page not your extension. And script from the extension can not talk to scripts of the page. If you look at the page script's you'll see it there but not under your extension scripts.

I discovered this while trying to inject the Google API script.

script = document.createElement('script');
script.src = "https://apis.google.com/js/client.js?onload=init";
(document.head||document.documentElement).appendChild(script);

The init function is defined in my content script. But the Goolge API script is loaded as a page script. So if I do this

var script = document.createElement('script');

script.innerText = "function init(){ alert('hi'); }";
(document.head||document.documentElement).appendChild(script);

script = document.createElement('script');
script.src = "https://apis.google.com/js/client.js?onload=init";
(document.head||document.documentElement).appendChild(script);

The injected init function is called and I see the alert 'hi'. Not sure if this helps but I figured I'd make a note of it for anyone else struggling with loading the Google apis. I'll update this answer if I figure out a way to actually get it loaded.