问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么Chrome插件无法获取指定元素内容？

头像
空虚的水煮肉
    151

    chrome插件无法获取页面指定元素的内容

    请教大佬，我刚学习chrome开发，发现有个问题，我想使用插件获取页面上的某个元素的内容。
    如下图我想获取这个数字 22
    image.png
    它的html代码结构为：
    image.png
    我的manifest.json内容为：

      "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()却能正确打印出来：
    image.png
    请教大佬们解惑下这是什么原因呢，谢谢。

    前端javascriptchromehtmlcss
    阅读 1.1k
    avatarAI BotBETA

    回答

    这种情况通常是由于 Chrome 插件的 content_script 运行环境与页面脚本（包括你在控制台执行的脚本）的上下文不同所导致的。具体来说，可能有以下几个原因：

    1. jQuery 加载时机问题：

      • 在 content_script 中，jQuery 可能在 DOM 完全加载之前就执行了。确保你的 jQuery 代码在 DOM 完全加载后执行。可以通过将 jQuery 代码放在 $(document).ready() 函数中来解决。

    2. 作用域和隔离问题：

      • Chrome 插件的 content_script 运行在一个与页面脚本隔离的环境中。这意味着，尽管你可以在页面控制台中看到元素并成功获取其内容，但在 content_script 中可能由于作用域隔离而无法访问到这些元素。
      • 解决方法之一是使用 postMessage API 在页面脚本和 content_script 之间进行通信。

    3. CSS 选择器问题：

      • 确保 .space-attention 选择器在 content_script 执行时是唯一且正确的。有时候，由于页面动态加载内容或使用了 Shadow DOM，选择器可能无法正确匹配到元素。

    4. 权限和匹配模式：

      • 你的 manifest.json 中的 "matches": ["<all_urls>"] 允许插件在所有页面上运行，这通常不是问题，但确保你的插件确实在目标页面上激活了。

    解决方案示例

    在 index.js 中，尝试使用以下代码：

    $(document).ready(function() {
    var content = $('.space-attention').html();
    console.log(content);
});

    这段代码确保了在 DOM 完全加载后再尝试获取元素内容。如果问题仍然存在，考虑使用 postMessage 或其他方法在页面脚本和 content_script 之间进行通信。

    希望这些信息能帮助你解决问题！

    1 个回答
    得票最新
    头像
    changli
      1.2k460155
      ✓ 已被采纳

      可能是页面内容还没有渲染前就执行了获取操作,可以试一下等待一段时间后才执行

      查看全部 1 个回答
      推荐问题
      宣传栏