Chrome extension cannot load external javascript from Google using content scripts and other ways

Question

I am writing a chrome extension that will allow transliteration for certain text fields on facebook.

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

here is the code i used in the content script i tried to load using ajax and common path.

when i checked it google said 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 the manifest.json script array.

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

he showed an error

Failed to 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 added https://www.google.com/jsapi for your understanding, and I also checked the removal of this.

since I can load this javascript into the document context. that is, when a web page ever loads ... here I specifically download for facebook. nevertheless, I need to fix the condition index because it does not give the correct result, but this is not a problem for this context of my question.

so please suggest me.

Answer 1

I don't seem to have found any documentation regarding this, but I think you cannot specify the http:// path in content_scripts . Possible work may include the following:

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

Or download it using an ajax request as you commented on your code.

Secondly, google.com/jsapi will need to be downloaded before you can use it in a script. In the manifest, you first load the script and then google.com/jsapi .

Friendly Tip: jQuery by default prohibits caching by adding a timestamp at the end of the URL. Since the script you are trying to download is unlikely to change at short intervals, you can pass cache: false as an option to save loading time. See this page for more information. Even better, you can link the script to your package so that there is no ajax request associated with your extension, which will add the speed of your extension.

Answer 2

One of the biggest problems with google.load is that it cannot load resources properly after the page has fully loaded, as the API uses document.write to enter scripts / styles. To fix the problem, you need to clear two methods:

 (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 are executed in an isolated environment : any properties of the global namespace, window , are not available. Thus, any APIs entered are not displayed in your Script content.

To fix this, see the following stack overflow answer: Create a Chrome extension .

Answer 3

This can help with understanding Chrome’s security policies.

Csp

It says that if you attach a script tag to a page (and not a popup or script content), it loads in the context of the page, and not in your extension. And the script from the extension cannot talk to the page scripts. If you look at the script page, you will see it there, but not under your extension scripts.

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

 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 script content. But the Goolge script API loads like a script page. Therefore, 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 init function invoked is called, and I see a hi warning. Not sure if this helps, but I decided that I would remember this for anyone struggling with downloading Google apis. I will update this answer if I find out the download method.