使用 shadow DOM 注入 chrome 扩展 UI

Question

我对 HTML 和完整的网络世界 wrt 开发非常陌生。我正在尝试创建一个 chrome 扩展，并决定在单击浏览器操作时通过注入内容脚本向用户显示扩展 UI。我已经为要显示的 UI 创建了一个 HTML 页面，现在我需要将此 HTML 页面作为一个小部件加载到当前页面右上角的某个地方（看起来像一个弹出窗口）。从网上查到的不同的东西，我决定使用影子 DOM，但不知道如何做这一切。有人可以帮助我提供示例代码来帮助我继续执行此操作吗？我无法编写一个 javascript 来用作内容脚本来完成上述工作。

---

编辑1：经过阅读，我发现我们需要使用javascript创建元素层次结构，并且不能直接使用任何创建的HTML页面。那是对的吗？如果我们必须使用 javascript，是否应该使用对 document.createElement 的调用并添加元素？还是 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');
});

还在manifest.json 中添加了popup.html 和a.js 到web_accessible_resources 的路径

Answer 2

对于 Chrome 扩展内容脚本，您将只能注入 JavaScript/CSS。当使用browserAction 时，您将无法拥有自己的 HTML 弹出页面。

使用 JavaScript，您需要动态创建元素并将它们插入 DOM。你在正确的轨道上。随着您对 Web 开发的熟悉程度越来越高，您可以使用 document.createElement 或 jQuery 之类的库来帮助进行 DOM 操作。