Question

我是HTML的新手，也是完整的网络世界。我正在尝试创建chrome扩展，并决定在单击浏览器操作时通过注入内容脚本向用户显示扩展UI。我已经为要显示的UI创建了一个HTML页面，现在我需要将这个HTML页面加载到当前页面右上角的一个小小部件中（看起来像弹出窗口）。从互联网上查找的不同内容来看，我决定使用shadow 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');
});

还在popup.html

中向a.js添加了web_accessible_resources和manifest.json个路径

Answer 2

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

使用JavaScript，您需要动态创建元素并将其插入DOM。你走在正确的轨道上。您可以使用document.createElement或类似jQuery的库来帮助您进行DOM操作，因为您更熟悉Web开发。

使用shadow DOM注入chrome扩展UI

2 个答案: