chrome扩展程序：ajax或chrome.extension.sendRequest哪个更好？

问题描述

| 不仅速度更快，而且在速度和使用资源/内存方面都更好。 我有一个应用程序，可以在输入类型文本中作为用户类型输入建议。因此，我应该使用ajax在两个页面或chrome.extension.sendRequest之间进行通信吗？ 编辑 我有一个打包的应用程序，所有应用程序信息都存储在background.html \的websql数据库中。在index.html上有一个input-type-text文本（当有人单击应用程序徽标表单的新标签页时打开） 用户输入时，index.html上的输入会从background.html数据库中获取建议。 （就像Google在您开始在Google主页上键入查询时所做的一样），我可以通过两种方式获取建议数据，即使用XmlHttpRequest和通过chrome的消息传递api。由于对background.html的请求很多，我想知道哪种方法会有效。 有问题的应用程序：https://chrome.google.com/webstore/detail/fddboknafkepdchidokknkeidnaejnkh?hl=zh-CN 编辑2 该应用程序100％离线。我没有连接到任何服务器或网站。我没有加载任何外部脚本，甚至没有jquery。该应用程序连接到的所有文件都是其自己目录中的文件。 pc启动时将加载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团队只是在各处使用异步功能（带有回调）的设计考虑。这并不意味着他们需要花费很多时间来执行。尽管我没有对它们进行基准测试，但它们似乎几乎立即执行。 编辑 我误解了你的问题。我以为您是在问如何在扩展程序/应用程序的不同页面之间进行通信。您真正要问的是如何与Web服务器通信。 消息传递API（

sendRequest

）仅适用于应用程序不同部分之间的通信。设置此API的原因是，您的应用程序的不同部分在不同的环境中运行，这些环境称为孤立世界。这些环境彼此完全隔离，以保护您免受恶意代码的侵害。通过这些不同环境的唯一针孔是此消息传递API。 如果要与Web服务器通信（称为“ \'pages \”），则需要使用ajax。使用ajax，您还将注意到Chrome的严格安全模型。在正常情况下，仅允许网页向其来源的同一站点发出请求。这称为“相同来源政策”。由于您的扩展程序/应用程序未托管（已打包），因此默认情况下它无权访问Web服务器。作为开发人员，您必须向用户请求此权限。您可以通过在扩展清单中填写

permissions

属性来实现。每当用户安装您的应用程序时，他都必须接受您有权访问特定Web服务器的权利。 在阅读您的问题时，我假设您对浏览器中的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处理。您不需要网络服务器来执行此任务吗？您能否举例说明您如何在应用中实现此目标？