如何在Google Chrome擴展中構建HUD？

Question

我正在嘗試使用content script製作谷歌瀏覽器擴展程序。 我的目標是在頁面頂部顯示一個可以與頁面交互的頁面（該頁面已在我自己的頁面上工作）。

我需要的東西，這是非常複雜的放在一起的延伸，由於安全策略：

• 的擴展使用require.js（即現在的工作原理，使用this Github repo）
• 使用模板引擎以描述我的顯示：我需要添加大量的內容到頁面，我不認爲用JavaScript編寫HTML會是一個很好的工作流程。
• 對於我目前的版本，我在我的服務器上使用了翡翠，但這對於擴展來說是不可能的。我想我需要使用像Angular.js或Backbone.js，但我不能讓他們在內容腳本上工作。
• 我需要擴展和頁面之間有很多溝通的：比如我需要檢測幾乎不斷鼠標移動
• 我需要使用socket.io

我的擴展功能，每一位我的服務器通信已經在獨立的網頁中開發並嘗試過了，但現在我需要將它集成到一個真正的擴展中，並且我真的被卡住了。

因此，由於這些要求，我想知道構建該方法的正確方法是什麼：把它全部放在一個iFrame中（服務器端通信是否工作？以及如何與頁面進行交流？），還是一種使模板引擎在其中很好地工作的方式，或者我沒有想到的解決方案？

Answer 1

試試這個：

• 開發的HUD部分作爲一個獨立的頁面內容腳本將包括iframe中。你should be able to use Angular.js等，但你將需要儘可能地本地副本，你需要在manifest.json適當的條目，以使其在擴展中工作。查看/創建其他問題的細節。

• 讓您的內容腳本注入監控鼠標移動等的代碼到目標頁面。讓此代碼消化並彙總數據，這樣就不會發送垃圾郵件。也許將摘要發送給HUD頁面和/或內容腳本，每秒五或六次。

之後，它應該只是一個工作的問題，一次一個。將其分解爲特定問題，並針對某個特定問題提出問題（如果在以前的問題中找不到答案）。

我非常確定你看起來想要的是可行的，但是對於單個堆棧溢出問題，細節過於寬泛。