使用阴影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操作。