Question

在内容脚本中，我使用on.Message.addListener将具有类名的图像添加到当前活动的网页。

chrome.extension.onMessage.addListener（function（message，sender，sendResponse）{

// Selecting HTML tags
var divs = document.getElementsByTagName("div");

// Creating a full URL to use icon1
var imageUrl = chrome.extension.getURL("icons/icon1.png");

// Function to create an image
function PlaceImage(source_x, source_y, imageUrl) {

    var newImage = document.createElement("img");

    newImage.src = imageUrl;

    newImage.style.position = "absolute";
    newImage.style.left = source_x + 'px';
    newImage.style.top = source_y + 'px';

    // Assigning a class name
    newImage.className = "label-key";

    // Add an element to the HTML document
    document.body.appendChild(newImage);

}

// Divs
for(var j=0; j<divs.length; j++) {

    // Get the position of an element with getBoundingClientRect
    var position = divs[j].getBoundingClientRect();
    var x = position.left;
    var y = position.top;
    y -=32;

    // Create comment image
    PlaceImage(x, y, imageUrl);
}

}）;

稍后我尝试通过点击其中一个刚创建的图像来写入控制台：

$(".label-key").click(function () {
    console.log("hello");
});

浏览器没有反应。

我尝试通过访问一些具有不同名称的类元素来写入控制台，这是原始网页的一部分（从服务器接收）。它运作良好。

更多我在内容脚本中创建了另一个元素，但这次是在onMessage.AddListener之外：

var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.style.width = "100px";
newDiv.style.height = "100px";
newDiv.style.backgroundColor = "red";
newDiv.className = "label-key";

它也运作良好。 jQuery能够访问这个元素。

因此，我认为内容脚本的onMessage.addListener部分创建的html元素有问题。

有关其他参考：当我右键单击新创建的元素＆＃34; Inspect element＆＃34; - 我可以看到该元素是html文档的一部分。但是，如果我点击＆＃34;查看页面来源＆＃34;元素不存在。

Answer 1

嗯，您正在创建类label-key的新元素，但click处理程序赋值不会自动扩展到新创建的元素。

$(".label-key").click(...)的行为与CSS规则不同，尽管它看起来像：它收集调用时匹配的所有元素并为它们绑定一个监听器。

因此，如果您稍后添加更多图片，则需要再次添加点击处理程序：

function PlaceImage(source_x, source_y, imageUrl) { var newImage = document.createElement("img"); newImage.src = imageUrl; newImage.style.position = "absolute"; newImage.style.left = source_x + 'px'; newImage.style.top = source_y + 'px'; // Assigning a class name newImage.className = "label-key"; newImage.click(function () { console.log("hello"); }); // Add an element to the HTML document document.body.appendChild(newImage); }

内容脚本无法访问由内容脚本创建的HTML元素

1 个答案: