javascript - 如何在 Google Chrome 扩展中构建 HUD？

Question

我正在尝试使用 content script 制作 Google Chrome 扩展程序。 我的目标是在页面顶部显示一个可以与页面交互的显示(这已经在我自己的页面上运行)。

由于安全策略，我需要将非常复杂的东西放在一起扩展:

• 在扩展上使用 require.js(目前有效，使用 this Github repo)
• 使用模板引擎来描述我的显示:我需要向页面添加大量内容，我认为用 javascript 编写 HTML 不是一个好的工作流程。
• 对于我当前的版本，我将 jade 与我的服务器一起使用，但是这不可能通过扩展来实现。我想我需要使用 Angular.js 或 Backbone.js 之类的东西，但我无法让它们在内容脚本上工作。
• 我的扩展程序和页面之间需要大量通信:例如，我需要几乎不断地检测鼠标移动
• 我需要使用 socket.io 与我的服务器通信

我的扩展的每一个功能都是在一个独立的网页中开发和尝试的，但现在我需要将它集成到一个真正的扩展中，我真的被困住了

因此，由于这些要求，我想知道构建它的正确方法是什么:将其全部放在一个 iFrame 中(服务器端通信是否有效？以及如何与页面通信？)，或者某种方式让模板引擎在那里很好地工作，或者我没有想到的解决方案？

Answer 1

试试这个:

• 将 HUD 部分开发为独立页面，内容脚本将包含在 iframe 中。你should be able to use Angular.js等等，但是您将需要尽可能多的本地副本，并且您需要 manifest.json 中的适当条目以使其在扩展中工作。有关详细信息，请参阅/创建其他问题。

• 让您的内容脚本注入(inject)代码以监控鼠标移动等到目标页面中。让这段代码消化和总结数据，这样它就不会向系统发送垃圾邮件。也许每秒钟向 HUD 页面和/或内容脚本发送五六次摘要消息。

在那之后，应该只需要让各个部分一起工作，一次一个。将其分解为特定问题，一次就一个特定问题提出问题(如果您在之前的问题中找不到答案)。

我很确定您似乎想要的是可行的，但对于单个 Stack Overflow 问题而言，细节过于宽泛。