Chrome扩展程序，如何在网页上创建覆盖？答案

【问题标题】：Chrome extension, how to create overlay over webpage?Chrome扩展程序，如何在网页上创建覆盖？
【发布时间】：2014-02-08 14:02:34
【问题描述】：

我正在尝试使用 Chrome 扩展程序将 div 插入网页。这是我在 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");

经过大约一个小时的试验，当我希望它在我当前正在查看的页面上创建 div 时，我发布它正在 background.html 页面上创建一个 div。有没有人有办法让我做到这一点？我已经看到它使用诸如“Ad Block”之类的扩展来完成，并且我查看了代码，但我仍然迷路了......有人对我如何做到这一点有任何建议吗？

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

要更改活动选项卡的 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"});
        }
    });

记得在清单文件中列出您的内容脚本。

【讨论】：