chrome扩展:ajax和chrome.extension.sendRequest哪个更好

chrome extensions: Which will be better, ajax or chrome.extension.sendRequest?

本文关键字：chrome 更好 sendRequest 扩展 ajax extension      更新时间：2023-09-26

不仅更快，而且在速度和使用资源/内存方面都更好。

我有一个应用程序，当用户键入输入类型的文本时，我会在其中输入建议。那么，我应该使用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=en-美国

编辑2

该应用程序100%脱机。我没有连接到任何服务器或网站。我没有加载任何外部脚本，甚至没有jquery。应用程序所连接到的只是它自己目录中的文件。background.html在电脑启动时加载，index.html在用户单击新选项卡页面中的应用程序图标时加载。要查看所有操作，您可以安装应用程序并亲自查看。

编辑3

我使用常规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(),true);
    call.send(null);
}
ajaxcall('/html/index.html', function(response) {console.log('foo')});

当您想要在内容脚本和其他页面之间进行通信时，应该使用消息传递API。我看不出您希望如何在这里使用ajax。

如果你在后台页面和浏览弹出窗口之间进行通信，你也可以使用chrome.extension.getBackgroundPage，它只是从后台页面返回window对象。由于对内容脚本的限制，您不能在内容脚本中使用此功能。这意味着您将始终必须为内容脚本使用消息传递api。

不要被这些消息传递函数的异步特性所欺骗。在任何地方使用异步函数（带回调）只是Chrome团队的一个设计考虑。这并不意味着它们需要很多时间来执行。虽然我还没有对它们进行基准测试，但它们似乎几乎是瞬间执行的。

编辑

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

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

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

当我读到你的问题时，我假设你仍然不太熟悉浏览器中的Chrome扩展、应用程序、Ajax和策略。我鼓励您在开发应用程序时进一步阅读这些主题，以便确保用户的安全。

编辑2

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

window.getSuggestions = function(query) {
  // search database for 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');
// perform heavy operation(s) here.
console.timeEnd('someID');

执行此操作的时间将打印到控制台。

编辑3

现在我想一想，我真的不确定如何在扩展内的两个页面之间执行ajax。此任务不需要web服务器吗？你能在你的问题中举例说明你是如何在应用程序中实现这一点的吗？

相关文章：