Firefox Hub API 允许附加组件在 Firefox for Android 主页添加新的面板，用户通常在该页面上找到他们的热门网站、书签和历史记录。这些 API 在 Firefox 30 中引入，但在 Firefox 31 和 32 中有更多功能和错误修复。您已经可以在 addons.mozilla.org 上找到一些这些附加组件，并且有一些 github 上的样板代码 来帮助您入门。

概述

构建 Firefox Hub 附加组件主要包括两个部分：创建主页面板和存储要在该面板中显示的数据。主页面板由不同的视图组成，每个视图都显示来自给定数据集的数据。

创建新的主页面板

要创建主页面板，首先使用 Home.panels API 注册面板。register API 接受面板 ID 和一个选项回调函数作为参数。每次安装或更新面板时，都会调用此选项回调来动态生成选项对象，从而允许动态进行语言环境更改。

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org"
    }]
  };
}

Home.panels.register("my.panel@mydomain.org", optionsCallback);

您必须始终在启动时注册任何现有面板，但当您第一次希望面板实际上出现在用户的首页时（例如，当您的附加组件安装时），您还需要显式安装面板。

Home.panels.install("my.panel@mydomain.org");

您可以修改选项回调函数以自定义在面板中显示数据的方式。例如，您可以选择以网格或列表形式显示数据，自定义在没有可用数据时显示的视图，或者选择在用户点击其中一个项目时启动一个意图。

存储面板数据

要实际在新的主页面板中显示内容，请使用 HomeProvider API 存储数据。此 API 允许您异步保存和删除数据，以及注册回调以允许浏览器定期为您同步数据。

HomeProvider API 使您可以访问 HomeStorage 对象，您可以与这些对象交互以从给定数据集保存和删除数据。这些方法旨在与 Task.jsm 一起使用，以便在任务中执行异步事务。

let storage = HomeProvider.getStorage("my.dataset@mydomain.org");
Task.spawn(function() {
  yield storage.save(items);
}).then(null, Cu.reportError);

在 Firefox 31 中，我们扩展了 save API 以支持为您替换现有数据，这对于定期刷新数据集来说非常方便。

function refreshDataset() {
  let items = fetchItems();
  Task.spawn(function() {
        yield storage.save(items, { replace: true });
  }).then(null, Cu.reportError);
}

HomeProvider.addPeriodicSync("my.dataset@mydomain.org", 3600,
refreshDataset);

此代码片段将确保每 3600 秒（1 小时）刷新一次数据集。

Firefox 32 Beta 中的新功能

除了错误修复之外，Firefox 32 还为 Firefox Hub API 添加了一些新功能。

刷新处理程序

除了支持定期更新数据之外，我们还添加了对“下拉刷新”的支持，这使用户能够手动刷新面板数据。要利用此功能，可以在视图声明中添加 onrefresh 属性。

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org",
      onrefresh: refreshDataset
    }]
  };
}

添加此新行后，在面板上向下滑动将触发一个刷新指示器并调用 refreshDataset 函数。在对该数据集进行保存调用后，刷新指示器将消失。

身份验证视图

我们添加了对身份验证视图的支持，以使您的附加组件更容易使用需要身份验证的数据。此视图包括文本和图像的空间，以及一个触发身份验证流程的按钮。要使用此功能，可以在面板声明中添加 auth 属性。

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org"
    }],
    auth: {
     authenticate: function authenticate() {
        // … do some stuff to authenticate the user …
       Home.panels.setAuthenticated("my.panel@mydomain.org", true);
     },
     messageText: "Please log in to see your data",
     buttonText: "Log in"
   }
  };
}

默认情况下，身份验证视图将在面板首次安装时出现，并且当用户点击视图中的按钮时将调用 authenticate 函数。由您决定在用户成功完成身份验证流程时调用 setAuthenticated(true)，并且您也可以在用户未经身份验证时调用 setAuthenticated(false)。此身份验证状态将在应用程序运行之间持续存在，因此如果您需要重置它，则由您负责。

未来工作

我们有一些关于如何扩展这些 API 的想法，但如果您想看到任何东西，请告诉我们！我们也一直在寻找新的 Firefox for Android 贡献者，我们很乐意帮助您 开始编写补丁.