Question

Olá，在寻找解决方案几个小时后，我无法解决“问题”，因此我在这里寻求帮助。我的目标是创建一个Google扩展程序，以显示当前选项卡/页面上的图像数量，为此，我尝试使用javascript：

var x = document.images.length;
document.getElementById("idhere").innerHTML = x

使用html：

<p id="idhere"></p>

它可以工作，但不是我想要的方式，因为它在扩展程序的弹出窗口而不是选项卡（背景？）页面中查找图像。然后它返回0，因为我的弹出窗口中没有图像，但是如果我添加图像，它将返回1 ...

我的问题是：如何获取扩展弹出窗口“后面”页面上的图像数量？

Answer 1

内容脚本是在网页上下文中运行的文件。通过使用标准的文档对象模型（DOM），他们能够读取浏览器访问的网页的详细信息，对其进行更改并将信息传递给其父扩展。

这里是有关使用Content Scripts处理DOM的完整文档。

相关的SO帖子：

Answer 2

完成@jess的回答：

首先在您的 manifest.json 中添加以下行：

"content_scripts": [{
    "matches": ["https://anylinkhere.com/*"],
    "css": ["optionalstyle.css"],
    "js": ["contentscript.js"]
}],

然后在扩展程序的文件夹中创建 contentscript.js 文件：

window.onload = function() {
chrome.runtime.sendMessage(document.images.length);
}

window.onload = function（）{}

将在页面完全加载后运行（需要加载所有图像）

chrome.runtime.sendMessage（document.images.length）;

会将消息以及页面上的图像数量发送到您的background.js。

然后在您的 background.js 中添加：

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse,) {
chrome.storage.sync.set({"x": (response)}, function() {
console.log('Set x as '+ (response));
});
});

chrome.runtime.onMessage.addListener ...

接收您的contentscript.js发送的消息

chrome.storage.sync.set（{“ x”：（response）}， ...

将响应（图像数量）值存储到x，然后popup.js将可以访问。

console.log（'将x设置为'+（响应））;

记录（可选）

现在在您的 popup.js 中：

chrome.storage.sync.get('x', function(data) {
document.getElementById("anyidhere").innerHTML = data.x;
});

chrome.storage.sync.get（'x'， ...

从存储中获取X值

document.getElementById（“ anyidhere”）。innerHTML = data.x;

将X的值添加到具有指定ID（来自popup.html）的元素中，例如：

<body>
<p id="anyidhere"></p>
</body>

好吧，这是我通过学习两天所学到的，有些信息可能不正确或解释不正确，但是可以用。

这是您如何将信息从网页发送到弹出窗口

Chrome扩展程序：从当前页面而不是弹出窗口获取document.images.length。（JavaScript）

2 个答案:

Chrome扩展程序：从当前页面而不是弹出窗口获取document.images.length。 （JavaScript）

2 个答案:

Chrome扩展程序：从当前页面而不是弹出窗口获取document.images.length。（JavaScript）