使用shadow DOM注入chrome扩展UI [英] Injecting chrome extension UI using shadow DOM

问题描述

我对HTML和完整的网络世界wrt开发非常新。我试图创建一个chrome扩展，并决定通过在浏览器操作被点击时注入内容脚本向用户显示扩展UI。我创建了一个HTML页面来显示UI，现在我需要将这个HTML页面作为一个小部件加载到当前页面的右上角（显示为一个弹出窗口）。从互联网上看到的不同的东西，我决定使用shadow DOM，但没有线索如何做所有这一切。有人可以帮助我一个示例代码，帮助我继续这个吗？我不能写一个javascript，将被用作内容脚本做上述工作。

---

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

解决方案

只需编译来自我在此主题中回复的引用：

---

我的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} ）;}）;} //当用户点击浏览器动作时被调用action.chrome.browserAction.onClicked.addListener（hello）;  

注入脚本a.js：

  $。get chrome.extension.getURL（popup.html），function（data）{//$(data).appendTo('body'）; //或者如果你使用jQuery 1.8+：$（$。parseHTML data））。appendTo（'body'）;}）;  
 

还添加 popup.html 和 a.js 路径 web_accessible_resources manifest.json

I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.

---

Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?

解决方案

Just compiling reference from the responses I've got in this thread:

---

My 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);

Injected Script 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');
});

Also added popup.html and a.js paths to web_accessible_resources in manifest.json

这篇关于使用shadow DOM注入chrome扩展UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！