javascript - chrome 扩展 : Which will be better, ajax 或 chrome.extension.sendRequest？

Question

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

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

编辑

我有一个打包的应用程序，所有应用程序信息都存储在 background.html 的 websql 数据库中。 index.html 上有一个 input-type-text (当有人点击应用程序 Logo 表单新标签页时打开)

index.html 上的输入在用户输入时从 background.html 的数据库中获取建议。 (就像你开始在谷歌主页上输入查询时谷歌所做的那样)我可以通过两种方式获取建议数据，使用 XmlHttpRequest 和通过 chrome 的消息传递 api。由于会有很多对 background.html 的请求，我想知道哪种方法更有效..

有问题的应用程序:https://chrome.google.com/webstore/detail/fddboknafkepdchidokknkeidnaejnkh?hl=en-US

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

Answer 1

您应该使用 message passing API每当您想在内容脚本和其他页面之间进行通信时。我不明白你想如何在这里使用 ajax。

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

不要被这些消息传递函数的异步特性所迷惑。 Chrome 团队的设计考虑是在任何地方都使用异步函数(带有回调)。这并不意味着他们需要很多时间来执行。尽管我没有对它们进行基准测试，但它们似乎几乎可以立即执行。

编辑

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

message passing API ( sendRequest ) 仅适用于应用程序不同部分之间的通信。之所以使用此 API，是因为您的应用程序的不同部分运行在不同的环境中，这些部分称为 isolated worlds。 .这些环境彼此完全分开，以保护您免受恶意代码的侵害。通过这些不同环境的唯一针孔是这个消息传递 API。

如果您想与 Web 服务器(您称其为“页面”)通信，则需要使用 ajax。使用 ajax，您还会注意到 Chrome 的严格安全模型。在正常情况下，网页只允许向其来源的同一站点发出请求。这称为' same origin policy '。因为您的扩展程序/应用程序未托管(已打包)，所以默认情况下它无权访问 Web 服务器。作为开发人员，您必须向用户请求此权限。您可以通过填写 permissions 来做到这一点。扩展 list 中的属性。每当用户安装您的应用程序时，他必须 accept您有权访问某个 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。你不需要一个网络服务器来完成这个任务吗？您能否在您的问题中举例说明您是如何在您的应用程序中实现这一目标的？