Question

Not just faster but better both in speed and using resources/memory.

I have an app where I put in suggestions as user types in an input-type-text. So, should I use ajax to communicate between two pages or chrome.extension.sendRequest?

EDIT

I have a packaged app, all the app info is stored in background.html’s websql database. there is an input-type-text on index.html (which opens when someone clicks on app logo form new-tab page)

The input on the index.html fetches suggestions from the database of background.html as the user types in it. (just like google does when you start typing the query on google homepage) I can fetch suggestion data in two ways, using XmlHttpRequest and through chrome’s message passing api. Since there will be a lot of requests to the background.html, i was wondering which method would be efficient..

The app in question: https://chrome.google.com/webstore/detail/fddboknafkepdchidokknkeidnaejnkh?hl=en-US

EDIT 2

The app is 100% offline. I am not connecting to any server or website. I am not loading any external script, not even jquery. All the app ever connects to is the files in it’s own directory. background.html loads when pc starts and index.html loads when user clicks the app icon in new tab page. To see everything in action, you can install the app and see it for yourself.

EDIT 3

I am using the regular ajax to call index.html from background.html and it seems to work fine. By the way, both index.html and background.html are in ‘html’ directory.

function ajaxcall(url,callback) {
    var call = new XMLHttpRequest();
    call.onreadystatechange=function() {if(call.readyState==4) callback(call.responseText);}
    call.open("GET",url+'#'+Math.random(),true);
    call.send(null);
}

ajaxcall('/html/index.html', function(response) {console.log('foo')});

Answer 1

You should use the message passing API whenever you want to communicate between content scripts and your other pages. I don’t see how you want to use ajax here.

If you’re communicating between let’s say your background page and the browseraction popup you could also use chrome.extension.getBackgroundPage which simply returns you the window object from the backgroundpage. Due to the restrictions imposed on content scripts you can’t use this function in content scripts. This means you will always have to use message passing api for content scripts.

Don’t be fooled by the asynchronous nature of these message passing functions. it’s just a design consideration from the Chrome team to use asynchronous functions (with a callback) everywhere. It doesn’t mean they take a lot of time to execute. Although I haven’t bench-marked them, They seem to execute almost instantaneously.

Edit

I misinterpreted your question. I thought you were asking about how to communicate between the different pages in your extension/app. What you are really asking is how to communicate with a web server.

The message passing API (sendRequest) only works for communication between different parts of your app. The reason why this API is in place is because different parts of your app run in different environments, these are called isolated worlds. These environments are completely separated from each other to protect you from malicious code. The only pinhole through these different environments is this message passing API.

If you want to communicate with a web server (‘pages’ as you call them) you will need to use ajax. With ajax you will also notice the tight security model of Chrome. Under normal conditions a webpage is only permitted to make requests to the same site it originates from. This is called ‘same origin policy‘. because your extension/app is not hosted (it is packaged) it has no rights to access a web server by default. You, as a developer, will have to request this right to the user. You can do this by filling in the permissions property in the extension manifest. Whenever the user installs your app he has to accept that you have the right to access a certain web server.

As I read your question I am assuming you are still not very familiar with Chrome extensions, apps, Ajax and policy in a browser. I encourage you to read further on these topics while you are developing your app so you can ensure the security of your users.

Edit 2

Ok, so you’re communicating between two different parts of your app, the index.html and the background.html. For this you can use getBackgroundPage and directly call functions defined in your background page. What you do is the following: In your backgroundpage:

window.getSuggestions = function(query) {
  // search database for query

  return ['suggestion1', 'suggestion2'];
};

Then you can call the following function on your main page (index.html):

var backgroundPage = chrome.extension.getBackgroundPage();
var mySuggestions = backgroundPage.getSuggestions('suggestion');
console.log(mySuggestions);

It’s that simple. You don’t need any ajax or sendRequest for this. No asynchronous code at all. You can just call a function in a synchronous fashion and this will be returned:

['suggestion1', 'suggestion2']

I didn’t benchmark this and I haven’t seen any data about it yet but I’m pretty sure this code is a lot faster than the message passing API or ajax. I didn’t know you could use XmlHttpRequest within your extension but if it’s possible I expect it to be the slowest way since you’re actually making a network call in stead of calling to in-memory objects. If you want to be sure about the timings I suggest you to benchmark them yourself. You can easily do this with Chrome by using the following code:

console.time('someID');
// perform heavy operation(s) here.
console.timeEnd('someID');

The time to perform this operation will be printed to the console.

Edit 3

Now that I think about it, I’m not really sure how you would do ajax between two pages inside an extension. Don’t you need a web server for this task? Can you give an example in your question of how you achieved this in your app?