浏览器扩展如"memonic"如何将数据与特定用户相关联？

我的问题,这在浏览器扩展中如何工作？我的理解是,扩展不使用"会话"或"cookie",虽然我猜有一种方法来存储本地数据

(我为addons.mozilla.org做了代码和功能评论,因此对于Firefox方面有更多的了解,但在Chrome中它应该是相当的)

好吧,一些附加组件使用cookie和其他网络技术,但主要是在这种扩展时,作者选择这样的东西

通过XMLHttpRequest样式的AJAX(通常是某种REST API端点)创建一个可通过代码轻松使用的服务器端点.

扩展通常可以访问某些API,它可以是XMLHttpRequest本身,也可以是类似的(例如Firefox Add-on SDK,Chrome))

在用户交互时,扩展将发出XHR/Ajax调用以执行所需的任何操作,查询信息,注册帐户,登录用户,提交新数据等.

扩展API通常提供多种方式来存储和检索数据,从纯文本文件,键值存储到关系数据库(WebSQL/IndexedDB),例如Firefox Add-on SDKsimple-storage,Chromechrome.storage.此外,可能存在安全存储登录凭证的API(例如passwords模块)

您可以自行决定在浏览器中本地存储哪种数据,以及哪种类型的存储最适合这种数据.

一般来说,扩展可以做网站可以做的事情以及更多.(在Chrome中,通过chrome.*扩展API,在Firefox中,您基本上可以完成Firefox可以执行的所有操作,这就是普通程序可以执行的所有操作).

但是,如何从服务器向浏览器扩展传递唯一ID(识别用户)？

API如何以及是否维护(登录)状态取决于您的(现有)设计

每个请求发送用户:密码

有一个登录API,可以设置适当的cookie或返回某种会话令牌,这些会话令牌将用于后续请求

使用OAuth2等协议

这个唯一的id应该来自服务器(如php的会话ID),还是客户端(浏览器插件)生成它并将其发送到服务器？

这取决于你,但对我而言,服务器生成真正的唯一ID会有意义,因为它通常知道哪些ID仍然可用,而不是生成伪唯一ID的浏览器扩展,这些ID仍然有可能与之发生冲突.其他浏览器实例(其他用户)可以并行生成.

第二个用例:用户访问新闻网站,选择文本,右键单击选择一个菜单项,将选定的文本保存到他们的帐户.他们不需要访问"家"网站.这几乎是Memonic的Firefox扩展所做的.

附加组件将提供一个菜单项,在单击时获取所选文本,并通过后台API Ajax调用将其发送到服务器(在请求中提供auth信息或之前已经过身份验证).

2)在注册帐户之前,用户可以免费获得10个"剪报"

扩展可以要求服务器(进行API调用)发出某种临时用户ID,并将其与每个"剪切"请求一起发送.

在10次这样的"剪辑"请求之后,服务器将返回错误,告知扩展名"免费剪辑"已用完.

此时,扩展程序会向用户询问"没有更多免费剪报.注册帐户以获得无限剪报"的行,例如通过在新标签页(或其他辅助UI)中打开服务器上的此类注册页面.

打开页面时,扩展程序可能已经将临时用户ID传递给页面(例如,通过GET参数,或通过设置cookie或请求数据或请求标题),以便在成功注册后,已经制作的"剪报"将与新的完整帐户相关联.

扩展程序还可以监控注册进度以自动获取登录详细信息.

[监控登记]这是如何完成的？

最简单的方法可能是附加内容脚本,或者直接从DOM中删除信息,或让站点发出内容脚本然后处理的常规DOM事件.

有些人还选择通过常规网站+表单完成整个注册工作,但使用HTML只是为了创建由扩展控制的UI.一旦用户单击注册按钮并进行另一个API调用以执行实际注册,扩展将读出注册字段,服务器将使用成功或错误代码进行回复.成功后,扩展程序将记住登录信息并随后使用.

PS:这是一个使用Firefox Add-on SDK的完整示例扩展,其中包含一个上下文菜单项,当单击该项时,将查询Web服务(API端点,此处不需要身份验证),以通知用户当前TLD的注册人标签.它并没有完全转化为您的特定用例,但它是一个很好的,简单的演示,可以显示您稍后可能需要的一些内容,并让您一瞥这样的扩展可能是什么样子.

var cm = require("sdk/context-menu");
var notifications = require("sdk/notifications");
var {Request} = require("sdk/request");
var {Cc, Ci, Cu} = require("chrome");
Cu.import("resource://gre/modules/Services.jsm");


cm.Item({
  label: "Whois Registrant",
  contentScript: 'self.on("click", function (node, data) {' +
                 '  console.log("clicked", location.host);' +
                 '  self.postMessage(location.host);' +
                 '});',
  onMessage: function (domain) {
    domain = Services.eTLD.getBaseDomainFromHost(domain);
    Request({
      url: "http://www.restfulwhois.com/v1/" + encodeURIComponent(domain),
      headers: {"Accept": "application/json"},
      onComplete: function (response) {
        var msg;
        try {
            msg = "Registered via:\n" + JSON.stringify(response.json.registrant, null, 2);
        }
        catch (ex) {
            msg = "Failed - " + ex;
        }
        notifications.notify({
          title: domain,
          text: msg
        });
      }
    }).get();
  }
});