Question

假设您有一个“主页”网站，用于某种“保存我最喜欢的剪报”服务，用户可以在其中注册帐户，然后将他们喜欢的报价或其他文本的片段保存到个人收藏中（这种类型的一个例子）网站是“Memonic”：http://www.memonic.com/，其中我肯定）。

首次使用案例：用户访问自己喜欢的新闻网站，选择＆amp;复制一些文本，切换到加载了“home”（剪辑）网站的选项卡，粘贴到表单中，然后将所选文本保存到他们的帐户。

第二个用例：用户访问新闻网站，选择文本，右键单击以选择将所选文本保存到其帐户的菜单项。他们不需要访问“家”网站。这几乎是Memonic的Firefox扩展所做的。

因此，在第一个用例（浏览器）中，假设基于PHP的体系结构，服务器从请求中从浏览器传递的cookie中识别用户。 cookie包含session_id，对于该用户是唯一的，服务器用户可以在其中查找包含user_id的会话数据。然后使用user_id将记录插入数据库。

我的问题：这在浏览器扩展程序中如何运作？我的理解是扩展不使用“会话”或“cookie”，虽然我猜测有一种方法来存储本地数据。但是，如何从服务器向浏览器扩展传递唯一ID（识别用户）？这个唯一的id应该来自服务器（如php的会话ID），还是客户端（浏览器插件）生成它并将其发送到服务器？

详细说明第二个用例：

用户下载＆amp;安装浏览器扩展程序，但未注册
用户在注册帐户前可获得10个免费“剪报”
用户访问新闻网站，开始“剪辑”，达到10，然后点击扩展程序工具栏中的“注册”。在网站上弹出一个叠加层，其中包含一个iframe，其中包含注册表单。用户创建用户名＆amp;密码，点击提交。

现在，登录凭证（用户名和密码）已经发送到“家庭”（剪辑）服务器，“家庭”服务器已经创建了一个带有user_id的新用户帐户，并存储在数据库中。此时，浏览器扩展应该知道如何识别用户（user_id或session_id的等价物）......这是如何实现的？

ps - 我真的只对Firefox＆amp;铬

Answer 1

我的问题是，这在浏览器扩展中如何运作？我的理解是扩展不使用＆＃34;会话＆＃34;或者＆＃34; cookies＆＃34;，虽然我猜测有一种存储本地数据的方法

（我为addons.mozilla.org做了代码和功能评论，因此对于Firefox方面的知识更加了解，但在Chrome中它应该是相当的）

好吧，一些插件使用了Cookie和其他网络技术，但大多数情况下，当涉及到这种扩展时，作者选择这样的东西

通过XMLHttpRequest样式的AJAX（通常是某种REST API端点）创建一个可通过代码轻松使用的服务器端点。
扩展程序通常可以访问XMLHttpRequest本身或类似的某些API（例如Firefox Add-on SDK，Chrome]）
在用户交互时，扩展程序将发出XHR / Ajax调用，以执行所需的任何操作，查询信息，注册帐户，登录用户，提交新数据等。

扩展API通常提供多种方式来存储和检索数据，从纯文本文件，键值存储到关系数据库（WebSQL / IndexedDB），例如， Firefox Add-on SDK simple-storage，Chrome chrome.storage。此外，可能存在安全存储登录凭据的API（例如passwords module）

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

通常，扩展程序可以执行网站可以执行的操作以及更多内容。（在Chrome中通过chrome.*扩展API，在Firefox中，您基本上可以执行Firefox可以执行的所有操作，这就是普通程序可以执行的所有操作。）

但是如何将唯一ID（识别用户）从服务器传递到浏览器扩展名？

API如何以及是否维护（登录）状态取决于您并依赖于您（现有）的设计

每次请求发送用户：密码
拥有一个登录API，可以设置适当的cookie或返回某种会话令牌，这些会话令牌将用于后续请求
使用OAuth2等协议

此唯一ID是否应该来自服务器（如php的会话ID），还是客户端（浏览器插件）应该生成它并将其发送到服务器？

这取决于你，但对我而言，服务器生成真正的唯一ID会有意义，因为它通常知道哪些ID仍然可用，而不是生成伪唯一ID的浏览器扩展仍然有可能与其他浏览器实例（其他用户）可能并行生成的ids碰撞。

第二个用例：用户访问新闻网站，选择文本，右键单击以选择将所选文本保存到其帐户的菜单项。他们不需要访问＆＃34; home＆＃34;现场。这几乎是Memonic的Firefox扩展。

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

2）允许用户10次免费＆＃34;剪报＆＃34;在注册帐户之前

扩展程序可以要求服务器（进行API调用）发出某种临时用户ID，并将其发送给每个＆＃34;剪辑＆＃34;请求。
经过10次此类＆＃34;剪辑＆＃34;请求，服务器将返回一个错误告诉扩展名＆＃34;免费剪辑＆＃34;筋疲力尽。
此时，分机会向用户询问＆＃34;没有更多免费剪报的内容。注册一个帐户以获得无限制的剪报＆＃34;例如，通过在新标签页（或其他辅助用户界面）中打开服务器上的此类注册页面。
当打开页面时，扩展程序可能已经将临时用户ID传递给页面（例如，通过GET参数，或通过设置cookie或请求数据或请求标题），以便在成功注册后已经制作的＆＃34;草屑＆＃34;将与新的完整帐户相关联。
扩展程序还可以监控注册进度以自动获取登录详细信息。

[Montioring registration]这是如何完成的？

最简单的方法可能是附加a content-script并直接从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();
  }
});

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

1 个答案: