使用陰影DOM注入chrome擴展UI

Question

我對HTML和整個Web世界的開發非常陌生。 我正在嘗試創建chrome擴展程序，並決定通過在單擊瀏覽器操作時注入內容腳本來向用戶顯示擴展程序UI。 我已經創建了一個用於顯示UI的HTML頁面，現在我需要將此HTML頁面作為小部件加載到當前頁面右上方的某個位置（以顯示為彈出窗口）。 通過在互聯網上查找的不同內容，我決定使用影子DOM，但不知道如何執行所有這些操作。 有人可以幫我提供示例代碼來幫助我繼續這一工作嗎？ 我無法編寫將用作內容腳本的javascript，以完成上述工作。

---

編輯1：經過更多閱讀后，我發現我們需要使用javascript創建元素層次結構，並且不能直接使用任何已創建的HTML頁面。 那是對的嗎？ 而且，如果我們必須使用JavaScript，應該利用對document.createElement和add element的調用嗎？ 或document.write？

Answer 1

只需從我在此線程中獲得的響應中編譯參考：

---

我的Background.js：

 function hello() { chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () { chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" }); }); } // Supposed to Called when the user clicks on the browser action icon. chrome.browserAction.onClicked.addListener(hello); 

注入腳本a.js：

 $.get(chrome.extension.getURL("popup.html"), function (data) { //$(data).appendTo('body'); // Or if you're using jQuery 1.8+: $($.parseHTML(data)).appendTo('body'); }); 

還添加popup.html和a.js路徑web_accessible_resources中manifest.json

Answer 2

對於Chrome擴展程序內容腳本，您只能注入JavaScript / CSS。 您將無法擁有自己的HTML彈出頁面，就像使用browserAction時一樣 。

使用JavaScript，您需要動態創建元素並將其插入DOM。 您走在正確的軌道上。 隨着對Web開發人員的熟悉，可以使用document.createElement或類似jQuery的庫來幫助進行DOM操作。