gpt4 book ai didi

javascript - Chrome 扩展 : Getting the document. images.length 来自当前页面,而不是弹出窗口。 (Javascript)

转载 作者:行者123 更新时间:2023-12-03 01:06:34 25 4
gpt4 key购买 nike

Olá,经过几个小时的寻找解决方案后,我无法解决“问题”,所以我在这里寻求帮助。 我的目标是创建一个谷歌扩展,显示当前选项卡/页面上有多少图像,为此,我尝试使用 javascript:

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

与 html:

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

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

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

最佳答案

完成@jess的回答:

首先在 ma​​nifest.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>

嗯,这就是我学习了两天所学到的全部内容,有些信息可能不正确或解释得不好,但它是有效的。

这是将信息从网页发送到弹出窗口的方式

关于javascript - Chrome 扩展 : Getting the document. images.length 来自当前页面,而不是弹出窗口。 (Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52376172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com