使用shadow DOM注入Chrome扩展UI

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

编辑1：一些阅读后，我发现了，我们需要创建一个使用JavaScript元素层次并不能直接使用任何创建HTML页面。那是对的吗？如果我们必须利用JavaScript，应该使用对document.createElement的调用并添加元素？或document.write？

来源

2015-03-02 labyrinth

与注射进入的HTML内容从脚本页面可能重复：http://stackoverflow.com/questions/16334054/inject-html- into-a-page-from-a-content-script – peterdotjs 2015-03-02 17:18:31

非常感谢您将我重定向到该主题！它有确切的必需信息！ – labyrinth 2015-03-02 17:59:29

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

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

来源

2015-03-02 17:12:53 peterdotjs

感谢您的回答！我发现如何使用jQuery来使用评论中peterdotjs指向的引用来完成这项工作！ – labyrinth 2015-03-02 18:00:35

我已经为这个问题添加了一个答案。让我知道，如果这种方法是正确的:) – labyrinth 2015-03-02 18:13:09

从我在这个主题得到的答复只是编译参考：

我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

来源

2015-03-02 18:12:22 labyrinth

popup.html是否通过a.js中的jquery注入时移动页面内容？你是如何使popup.html看起来像一个弹出窗口？ – manutdfan 2016-04-28 19:28:21

使用shadow DOM注入Chrome扩展UI

回答

相关问题