javascript - 使用 shadow DOM 注入(inject) chrome 扩展 UI

Question

我对 HTML 和完整的网络世界开发还很陌生。我正在尝试创建一个 chrome 扩展，并决定在单击浏览器操作时通过注入(inject)内容脚本向用户显示扩展 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);

注入(inject)脚本 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 的路径