Using remote JavaScript in Chrome Extensions

Question

Is there any way to get remote JS file to chrome extension?

My manifest.json looks like this:

{
    "name": "My Extension",
    "version": "0.1",
    "content_scripts": [
    {
        "matches": ["http://*/*"],
        "js": ["jquery.js", "main.js"],
        "run_at": "document_end",
        "all_frames": true
    }
    ]
}

I want use one JavaScript API, which is limited by usage on selected domain, so I can't insert it simply to loaded page in Chrome like this:

$('head').append('<script src="http://example.com/myApi.js?key=%key%"></script>');

because the JS API alerted me, that I'm using it on URL, which I haven't gave them.

I want just use some functions from this remote JS. The API key can be fortunately registered and used on localhost.

But I don't have any clue, how to solve this problem - where to put the remote JS file to be able to use it.

I've got an idea to create a "virtual DOM", but perhaps it's not a solution, because the JS API code can't be executed.

Where to insert the code? Some background page??

Perhaps one solution would be inserting an iframe of my (hosted somewhere on my domain and registered in API) page and call JS functions from here? This solution could work, but it don't like the dependecy on my domain/server availability. I'd like to execute the code in some "sandbox" in Chrome (in the view of API - on localhost). — Radek Simko, Jul 23 '10 at 19:38
It sounds like you simply need to visit `http://example.com/myApi.js?key=%key%` in the browser, save the file, call it `external.js`, and put it in the same place you have `jquery.js` and `main.js` (also add it to the manifest like so: `["jquery.js", "main.js", "external.js"]`). — Adam, Jul 23 '10 at 20:37

score 3 · Answer 1 · answered Oct 25 '10 at 07:56

3

Did you try :

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/myApi.js?key=%key%';
document.getElementsByTagName('head')[0].appendChild(script);

I use it in my Google Chrome extension and works nicely.

answered Oct 25 '10 at 07:56

Shikiryu

10,180
8
49
75

I couldn't get this to work, I'm using it in a background.html page not a popup tho, that could be why? – Doug Molineux Apr 22 '11 at 18:00

score 0 · Accepted Answer · answered Oct 25 '10 at 07:25

Try this script :

if(window.top == window && !document.getElementById('molseek'))
{
    if (document && document.doctype && document.doctype.name && document.doctype.name.toLowerCase() == 'html') {
        loadToolTip();
    }
    // Weird guest... but if we got an head element, try to validate even if no doctype...
    else if (document && document.getElementsByTagName('head').length) {
        loadToolTip();
    }
    // Weird guest #2... but if we got title element, try to validate even if no doctype nor head...
    else if (document && document.getElementsByTagName('title').length) {
        loadToolTip();
    }
}

function loadToolTip(){

    (function(s){
        if(!window.molseek){
            s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
            (document.getElementsByTagName("head").item(0)||document.body).appendChild(s)
        }
    })(document.createElement('script'));
    (function(s){
        if(!window.apture){
            s.src='https://location';
            (document.getElementsByTagName("head").item(0)||document.body).appendChild(s)
        }
    })(document.createElement('script'));

}

score 0 · Answer 3 · answered Jun 02 '11 at 05:12

0

Currently can't find a way to host code for an extension remotely, but still allow that code to use chrome.* javascript calls.

answered Jun 02 '11 at 05:12

Devin Rhode

23,026
8
58
72

Using remote JavaScript in Chrome Extensions

3 Answers3