chrome插件无法获取页面指定元素的内容
请教大佬，我刚学习chrome开发，发现有个问题，我想使用插件获取页面上的某个元素的内容。
如下图我想获取这个数字 22
它的html代码结构为：
我的manifest.json内容为：
极客观点
项目管理
HarmonyOS
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["content/index.css"],
"js": ["content/jquery.js", "content/index.js"]
}我在index.js中想用
$('.space-attention').html();
获取这个 22 ，但是打印它总是为 undefined
但是我在页面的console控制台直接执行$('.space-attention').html()却能正确打印出来：
请教大佬们解惑下这是什么原因呢，谢谢。
AI BotBETA这种情况通常是由于 Chrome 插件的 content_script 运行环境与页面脚本（包括你在控制台执行的脚本）的上下文不同所导致的。具体来说，可能有以下几个原因：
jQuery 加载时机问题：
chromecontent_script 中，jQuery 可能在 DOM 完全加载之前就执行了。确保你的 jQuery 代码在 DOM 完全加载后执行。可以通过将 jQuery 代码放在 $(document).ready() 函数中来解决。作用域和隔离问题：
content_script 运行在一个与页面脚本隔离的环境中。这意味着，尽管你可以在页面控制台中看到元素并成功获取其内容，但在 content_script 中可能由于作用域隔离而无法访问到这些元素。postMessage API 在页面脚本和 content_script 之间进行通信。CSS 选择器问题：
.space-attention 选择器在 content_script 执行时是唯一且正确的。有时候，由于页面动态加载内容或使用了 Shadow DOM，选择器可能无法正确匹配到元素。权限和匹配模式：
manifest.json 中的 "matches": ["<all_urls>"] 允许插件在所有页面上运行，这通常不是问题，但确保你的插件确实在目标页面上激活了。在 index.js 中，尝试使用以下代码：
$(document).ready(function() {
var content = $('.space-attention').html();
console.log(content);
});这段代码确保了在 DOM 完全加载后再尝试获取元素内容。如果问题仍然存在，考虑使用 postMessage 或其他方法在页面脚本和 content_script 之间进行通信。
希望这些信息能帮助你解决问题！
8 回答4.6k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
4 回答2.2k 阅读✓ 已解决
5 回答1.2k 阅读✓ 已解决
可能是页面内容还没有渲染前就执行了获取操作,可以试一下等待一段时间后才执行