在本系列文章中，我想谈谈我为浏览器编写Web扩展的经验。 我已经有创建Web扩展的经验，该Web扩展由大约100,000个Chrome用户安装，它们可以自动工作，但是在本系列文章中，我决定通过将Web扩展与服务器端紧密集成来研究Web扩展的开发过程。
第2部分 ，
第3 部分 ，
第4部分网络扩展的想法
每个开发人员都面临着在浏览器中实现流程自动化的任务。 对我来说，任务是在LinkedIn和Facebook上聚集某个主题的小组成员。
在此之前，我曾用php编写Web解析器解决方案的经验，但是这些站点使用了许多动态元素，该任务的解决方案重点已专门转移到通过浏览器与Web资源进行交互。
当然，我不会违反关于服务提供的协议（条款和条件），因此以下内容仅是我的想象，不建议实施。
可以快速打开开发者控制台并编写一个可模拟用户操作的javascript脚本，然后收集数据。 这种方法在Facebook上部分起作用，可以在一个页面上收集小组成员及其信息。 但这不适用于LinkedIn，您需要在其中打开每个成员的页面。
在寻找第三方解决方案之后，我选择了iMacros来完成此任务。 该扩展名具有自己的用于编写宏的语言。 我以某种方式对其进行了调整，以解决LinkedIn的问题。 我必须下载旧版本的Mozilla Firefox，因为该扩展名不适用于该浏览器的多线程实现。
在寻找第三方解决方案时，我遇到了Web解析器，Web爬网程序，Web爬网程序等多种变体。许多变体都集中在具有逐页导航的网站上，而不是动态内容上。 一些解决方案建议为操作系统安装软件解决方案，然后使用Web扩展程序来解决这一问题。 我遇到了非常专业的事情，例如，仅在Facebook上收集参与者。
经历了所有折磨之后，我想到了“发明自行车”来自动执行浏览器中的任务的想法。 在我的网络扩展程序的强制性要求中，我强调了：
- 在最大数量的Web浏览器（包括移动设备）中工作。
- javascript是用于浏览器的标准脚本语言。
- 在脚本中使用您自己的数据文件。
- 将从脚本接收的数据保存到文件的功能。
- 脚本必须是公共的或私有的。 如果脚本是公开的，则安全团队需要检查此类脚本。
除此清单之外，我还指出了每个项目的更具体内容。
- 您需要使用一个框架来编写Web扩展，以最大程度地减少开发跨浏览器解决方案的努力。
- 所有浏览器都支持Javascript，但是您需要编写自己的库才能与Web扩展交互。 该库应具有保存数据，从下载文件中检索数据等功能。
- 通常需要使用输入来运行脚本。 例如，用于授权的数据，用于API的密钥，要爬网的页面列表等。此类数据应直接上载到Web扩展并存储在云中。
- 从脚本保存数据是自动化最必要的功能之一。 存储的数据必须直接从Web扩展程序上载到csv，或者在超出上载数据限制时发送到用户的邮件。 例如，如果上载的组成员超过10,000，则从Web扩展中下载可能会花费很长时间。 应通过在服务器上生成文件来避免这种情况。
- 您必须具有用于安全团队的管理Web界面，才能检查他们已标记为公共用户的脚本。
我不时发现针对同一问题的越来越多的解决方案-在浏览器中运行自定义脚本。 所有这些解决方案都不符合我的要求，因为我想要一个Web扩展程序，该扩展程序能够删除每个页面上的广告。 转换页面并仅显示其内容，而无需不必要的标记； 从任何页面收集数据并将其转换为方便将来使用的格式； 经过一段时间后收集数据； 等
因此，我疯狂地创建了扩展以运行自定义脚本来执行最大范围的任务，从而“着火了”。
选择一个Web扩展框架
由于最初的目标是最大数量的Web浏览器，因此我需要一个框架来构建跨浏览器扩展。 我们可以立即注意到一个事实，那就是根本没有这样的框架。 因为许多浏览器虽然以这种方式工作并为Web扩展提供类似的API进行交互，但它们却根本不同。
我被迫几乎立即放弃了移动浏览器支持的初始版本。 由于没有一个这样的浏览器不提供使用Web扩展的功能。 我只提到了Dolphin浏览器中对Web扩展的支持，但是我在官方网站上找不到详细信息。 决定放弃这个好主意。
在编写旧扩展时，我使用了kango框架。 在2013年，它尽可能方便。 虽然没有Internet Explorer的支持。
由于我的扩展程序可以用作书签，因此我没有注意这一事实，而是选择了此框架，该框架在当时只是跨浏览器开发的理想解决方案。
从那时起，出现了其他项目，这些项目为自己确定了跨浏览器开发Web扩展的目标。 我发现所有这些项目都处于开发的早期阶段。 自Mozilla Firefox开始使用WebExtensions API以来，他们的任务已得到简化，这使将Chrome的扩展程序轻松转换为Firefox的扩展程序成为可能。
2013年的Opera浏览器扩展程序与Chrome扩展程序兼容。 Safari的扩展现在仅适用于MacO，因为对Safari浏览器本身的Windows平台的支持早已停止。
Tor浏览器在旧的Mozilla Firefox引擎上运行，因此支持xpi Web扩展，Mozilla Foundation放弃了xpi Web扩展，转而使用Web Extension技术。
从本质上讲，kango框架几乎可以完成今天的工作，因为它会为除Internet Explorer之外的所有浏览器生成Web扩展。 但是，由于已经过去了很多时间，并且Firefox现在可以使用类似于Chrome的机制，因此kango会为两个浏览器生成相同的程序包。 我必须稍微修改Firefox的生成，然后添加Tor的生成。
由于kango框架项目的状态以及代码的许可证尚不清楚，因此我无法将更改发布到公共领域。 如果版权所有者允许使用开放源代码发布1.9.0版，那么我将很乐意为您提供帮助。
所有Web扩展都具有处理数据的两点。 content.js文件允许您操作DOM，而background.html文件则允许您处理后台数据和服务器交互。 这两个点之间的通信是通过消息机制进行的。
因此，要使用服务器端的数据修改DOM，我们需要从background.html获取它们，并通过消息传递机制在content.js中使用它们
出于多种原因，这种理想的机制对我的情况不起作用。 因此，我在background.js中仅保留了在浏览器中使用弹出窗口和Web扩展按钮的逻辑。
任何带有弹出窗口的Web扩展程序的逻辑都是相同的。 通过单击按钮，我们仅显示弹出窗口，第二次单击则关闭。
Kango框架为开发人员提供了用于交互的统一界面，然后将书面Web扩展的代码转换为特定Web浏览器的Web扩展，因此节省了开发跨浏览器Web扩展的大量时间。
在下一篇文章中，我将讨论选择
“ Web扩展服务器端和Web扩展界面的框架”