Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Chrome扩展,如何在网页上创建覆盖?_Javascript_Html_Google Chrome - Fatal编程技术网

Javascript Chrome扩展,如何在网页上创建覆盖?

Javascript Chrome扩展,如何在网页上创建覆盖?,javascript,html,google-chrome,Javascript,Html,Google Chrome,我正在尝试使用Chrome扩展在网页中插入div。以下是我在my background.js中的代码: function CreateDiv(){ console.log("Created"); var div = document.createElement("div"); div.style.width = "100px"; div.style.height = "100px"; div.innerHTML = "Hello"; documen

我正在尝试使用Chrome扩展在网页中插入div。以下是我在my background.js中的代码:

function CreateDiv(){
    console.log("Created");
    var div = document.createElement("div");
    div.style.width = "100px";
    div.style.height = "100px";
    div.innerHTML = "Hello";
    document.body.appendChild(div);
}

chrome.contextMenus.create({"title": "Menu", "onclick": CreateDiv});
console.log("Loaded");

经过大约一个小时的实验,我发布了它正在background.html页面上创建一个div,而我希望它在我当前查看的页面上创建一个div。有人知道我怎么做吗?我已经看到它与扩展,如'广告块',我看了代码,但我仍然迷路。。。有人对我如何做有什么建议吗?

要更改活动选项卡的HTML,需要做的是将信息发送到content.js并在那里创建它。要从background.js发送信息,可以像这样使用chrome.tabs.sendMessage

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {createDiv: {width: "100px", height: "100px", innerHTML: "Hello"}}, function(response) {
            console.log(response.confirmation);
        });
    });
要在content.js中获取这些信息,请执行以下操作

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.requested == "createDiv"){
            //Code to create the div
            sendResponse({confirmation: "Successfully created div"});
        }
    });
请记住在清单文件中列出内容脚本