在本文中，我将继续介绍一系列出版物，在这些出版物中，我将谈谈我为浏览器编写Web扩展的经验。 我已经有创建Web扩展的经验，该Web扩展由大约100,000个Chrome用户安装，它们可以自动工作，但是在本系列文章中，我决定通过将Web扩展与服务器端紧密集成来研究Web扩展的开发过程。
第1部分 ，
第3 部分 ，
第4部分选择服务器端的框架
在我构想的最初，我就在考虑如何保存通过脚本获得的数据。 想到了将locaStorage或类似解决方案用于客户端数据库的可能性。 随着代码规划沿着这条路径进行，事实证明，将文件下载并存储在用户计算机上并不是一个好主意，因为用户将被绑定到一台计算机上。
因此，有必要保存用户脚本，即在服务器端运行脚本所获得的数据。 用户文件也应该通过服务器端加载。 用户必须直接通过Web扩展界面注册，重置密码等，因为通过单独的页面进行注册将无法与Web扩展进行舒适的交互。
因此，选择了将XHR与RESTful API结合使用的方法。 此选项还允许将来使用相同的代码来构建流水线的数据传递系统。 例如，可以在每天的周期中安排在搜索引擎结果中获取网络资源位置的时间。 此后，第三方应用程序使用API请求作为脚本结果获得的数据，并构建一个图表，显示搜索结果中位置变化的趋势。
不同编程语言的许多框架都有用于快速开发RESTful服务器应用程序的库，模块和包。 在大约12年中，我一直在使用各种基于PHP的框架，而在最近3年中，我还一直在使用Meteor.js。 该框架在node.js之上运行，因此我选择它作为服务器部分是因为它具有高性能（从脚本接收的一行数据的平均每条记录每条记录112毫秒），以及用于构建应用程序的一组现成的软件包。
作为RESTful库，我选择了
github.com/kahmali/meteor-restivus软件包，除其他事项外，还需要对其进行修补，因为它在使用钩子授权和不受无限密码猜测技术的保护方面无法正常工作。
Restivus具有描述RESTful API的良好功能，并支持以授权或匿名方式工作。 令牌和userId用作在RESTful地址执行用户定义的方法的权限确认。 这些参数可以存储在localStorage Web权限中，并在调用XHR时使用。
对于管理区域，我选择了可扩展且高度可配置的软件包
github.com/yogiben/meteor-admin ，这使我可以减少创建许多相同类型页面的时间，以满足安全团队的需要。
设计Web扩展的接口
该界面在用户选择产品方面起着决定性的作用。 便捷和简约被选为Web扩展界面的主要标准。 随后，添加了美学方面，以完成整个应用程序。
Semantic-ui被选为CSS / HTML框架。 同时，我拒绝使用其他npm软件包和组装机制（例如webpack），以最大程度地减少依赖关系和Web扩展的大小。 仅使用三个js库和第三方文件来尽可能透明地编写代码。
为了开始该过程，编译了必要页面的列表。 用于使用用户帐户的页面已分组到此列表中。
- 登录页面
- 注册页面
- 密码重设页面
此时，存在一个一次性链接重置密码问题。 在普通应用程序中，用户可以单击链接，重设密码，然后进入应用程序。 Web扩展可以使用navigator.registerProtocolHandler“拦截”链接并授权用户使用Web扩展，但是并非所有浏览器都支持此功能。 因此，决定通过该链接重置密码，然后用户可以使用新密码输入Web扩展名。
以下是用于在网络扩展程序中注册新用户的表格。
在这里，您可以看到用于社交营销的元素，例如邀请代码和用于在社交网络上分发的链接，该元素位于向支持服务发送问题的元素旁边。
注册后或授权后，用户可以直接在Web扩展中编辑其个人资料。 由于它消除了使用单独网站的需要，因此在质量上改进了当前解决方案。 用户可以在一处执行所有动作。
所有屏幕都分为多个选项卡，使您可以在屏幕之间快速移动并扮演一种菜单的角色。 在某些情况下，为了获得更直观的表示，将当前迭代的元素最小化。 例如，将按钮签名放置在按钮本身上，尽管将来计划将按钮的垂直列表替换为水平按钮，并删除工具提示中的签名。 这样做是为了最大程度地为新用户呈现Web扩展。 这是制作带有当前迭代脚本列表的主屏幕的方式。
每个用户脚本必须由某人创建。 如Web扩展前面所述，既可以有公共脚本，也可以有私有脚本。 要添加脚本，请使用以下简单形式。
此外，用户可以设置脚本公开的标志，这将使其他用户可以使用Web扩展社区的经验。
公共脚本有几个限制。 例如，它们不能用于在页面上，任务计划程序中启动并具有热键。 此外，每个公共脚本都具有“编辑”的能力，在此期间，用户可以删除公共标志，并将其以私有状态保存为自己的脚本。 这些额外的步骤对于防止不道德的开发人员是必需的。 当“编辑”公共脚本时，将要求用户检查代码并决定其使用方式以满足其需要。
通过将文件内容读入缓冲区，进行编码并进一步通过XHR通道发送到服务器，可以实现在Web扩展中下载文件。 在POST服务器上，处理请求并将文件发送到云存储。 在脚本中，用户可以通过
GC.loadFile（'filename.ext'）读取下载的文件
； ，这是内部库中的一个函数，将针对该函数编写单独的文章。
每个脚本都可以通过调用内部库的函数从计算中写入数据。 每次呼叫将在一个单元格中记录一行，所有行都使用相同的名称。 这样，您可以编写csv文件。 下面的屏幕显示了用于处理输出数据的界面。 用户可以直接从Web扩展程序下载数据，将生成的文件发送到他的电子邮件，获得指向供第三方应用程序使用的API的链接，或者删除数据。
更改脚本状态的所有操作（例如删除操作）都需要确认。 Web扩展程序本身具有在弹出窗口中运行的界面，因此对使用弹出窗口或确认窗口有限制。 因此，使用确认词的输入机制。
在下一篇文章中，我将讨论
“实现Web扩展与服务器端交互的陷阱”。