Chrome扩展：哪个更好，ajax或chrome.extension.sendRequest？ [英] chrome extensions: Which will be better, ajax or chrome.extension.sendRequest?

问题描述

我有一个应用程序，我在其中输入建议作为用户类型在输入类型中，文本。那么，我应该使用Ajax在两个页面之间进行通信还是使用chrome.extension.sendRequest？

编辑

我有一个打包的应用程序，所有的应用程序信息都存储在background.html的websql数据库中。 index.html上有一个输入类型文本（当有人点击应用程序标识形式的新标签页时打开）

index.html上的输入提取来自background.html数据库的建议作为用户输入的内容。 （就像谷歌当你开始在谷歌主页上输入查询一样）我可以通过两种方式获取建议数据，使用XmlHttpRequest和通过chrome的消息传递API。由于会有很多请求background.html，我想知道哪种方法是有效的。

有问题的应用程序： https://chrome.google.com/webstore/detail/fddboknafkepdchidokknkeidnaejnkh?hl=zh-CN a>

编辑2

该应用100％离线。我没有连接到任何服务器或网站。我不加载任何外部脚本，甚至没有加载jQuery。所有应用程序连接到的是它自己的目录中的文件。当用户点击新标签页中的应用程序图标时，会在pc启动时加载background.html并加载index.html。要看到所有的行动，你可以安装应用程序，看看它。

b $ b

我使用常规的ajax从background.html调用index.html，它似乎工作正常。顺便说一下，index.html和background.html都在'html'目录中。

  function ajaxcall（url，callback） {
 var call = new XMLHttpRequest（）; 
 call.onreadystatechange = function（）{if（call.readyState == 4）callback（call.responseText）;} 
 call.open（GET，url +'＃'+ Math.random ），真正）; 
 call.send（null）; 
 
 $ b $ ajaxcall（'/ html / index.html'，function（response）{console.log（'foo'）}）; 
  

解决方案

您应该使用消息传递API ，只要您想在内容脚本和其他网页之间进行通信。 我们在这里看不到如何使用ajax。如果你在沟通我们的背景页面和浏览窗口，你也可以使用 chrome.extension.getBackgroundPage ，它只是从背景页面返回窗口对象。由于内容脚本的限制，您不能在内容脚本中使用此功能。这意味着您将始终必须使用消息传递api来处理内容脚本。

不要被这些消息传递函数的异步性所愚弄。这只是Chrome团队的一个设计考虑事项，以便随处使用异步功能（带回调）。这并不意味着他们需要很多时间来执行。尽管我没有对它们进行长凳标记，但它们似乎几乎是瞬间执行。

编辑

我误解了你的问题。我以为你问的是如何在你的扩展/应用程序的不同页面之间进行通信。你真正要问的是如何与Web服务器通信。

消息传递API a>（ sendRequest ）仅适用于应用程序不同部分之间的通信。此API的原因是因为您的应用的不同部分在不同的环境中运行，这些部分称为孤立的世界。这些环境完全相互分离，以保护您免受恶意代码的侵害。通过这些不同环境的唯一针孔就是这个消息传递API。

如果您想与网络服务器通信（在您称之为网页时），您需要使用ajax。使用ajax，您还会注意到Chrome的严格安全模式。在正常情况下，网页只允许向其发出的同一网站发出请求。这称为同源政策。由于您的扩展程序/应用程序未托管（已打包），因此默认情况下它无权访问Web服务器。作为开发人员，您必须向用户请求这一权利。您可以填写 权限 属性的扩展清单。每当用户安装您的应用时，他必须接受您有权访问的权限一个Web服务器。

当我读到您的问题时，我假设您对浏览器中的Chrome扩展程序，应用程序，Ajax和策略还不是很熟悉。我鼓励您在开发应用程序时进一步阅读这些主题，以确保用户的安全。
$ b 编辑2

好的，您可以在应用程序的两个不同部分之间进行通信，即index.html和background.html。为此，您可以使用 getBackgroundPage 并直接调用在您的后台页面中定义的函数。你做的是如下：在你的背景页面中：

  window.getSuggestions = function（query）{
 //搜索数据库查询
 
 return ['suggestion1'，'suggestion2']; 
}; 
  

然后，您可以在主页面上调用以下函数（index.html）：

  var backgroundPage = chrome.extension.getBackgroundPage（）; 
 var mySuggestions = backgroundPage.getSuggestions（'suggestion'）; 
 console.log（mySuggestions）; 
  

就是这么简单。你不需要任何ajax或 sendRequest 。根本没有异步代码。你可以以同步的方式调用一个函数，这将被返回：

  ['suggestion1'，'suggestion2'] 
  

我没有进行基准测试，我还没有看到任何数据，但我很漂亮确定这段代码比消息传递API或ajax快很多。我不知道你可以在你的扩展中使用 XmlHttpRequest ，但如果可能的话，我认为它是最慢的方法，因为你实际上是在进行网络调用而不是调用到内存中的对象。如果你想确定时间，我建议你自己进行基准测试。您可以使用以下代码轻松地在Chrome中执行此操作：

  console.time（'someID'）; 
 //在这里执行繁重的操作。 
 console.timeEnd（'someID'）; 
  

执行此操作的时间将显示在控制台上。

编辑3

现在我想到了，我不确定你会怎么做ajax一个扩展内的两页。你不需要一个Web服务器来完成这项任务吗？你可以举一个例子来说明你在应用程序中是如何实现这一点的？

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')});

解决方案

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?

这篇关于Chrome扩展：哪个更好，ajax或chrome.extension.sendRequest？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！