dzcssb1 2014-05-13 11:49 采纳率: 0%
浏览 781

在开发chrome扩展的时候的小问题

content_scripts里怎样时时监测页面有没有变化啊?
因为是新手,所以求教一下。
想要完成的任务是在页面出现某个元素的时候执行一个函数,函数当然要用一些这个元素里的数据。求教一下应该怎样做到?

  • 写回答

1条回答

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-08 22:59
    关注

    所有内容均由人工智能模型输出,其内容的准确性和完整性无法保证,不代表我的态度或观点。
    (通义千问专栏,v2.1.0版本)


    该回答引用通义千问大模型,仅提供参考,不保证完全正确
    在 Chrome 扩展的 content_scripts 中,你可以使用 MutationObserver API 来检测页面上元素的变化。MutationObserver 是一个可以监控 DOM 树变化的 API,当页面上的节点被添加、删除或修改时,它会触发回调函数。


    以下是一个简单的示例,展示了如何使用 MutationObserver 监听特定元素(比如 body 元素)及其子元素的变化:

    // 选择要观察的元素
    const targetNode = document.body;
    
    // 观察器配置:需要观察什么类型的变动
    const config = { attributes: true, childList: true, subtree: true };
    
    // 当观察到变动时调用的回调函数
    const callback = function(mutationsList, observer) {
        // 使用传入的 mutationsList 参数进行操作
        for(const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
            }
            else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    };
    
    // 创建一个观察器实例并传入配置和回调
    const observer = new MutationObserver(callback);
    
    // 开始观察目标节点
    observer.observe(targetNode, config);
    
    // 在不再需要观察时停止观察
    // observer.disconnect();
    

    在这个例子中,我们创建了一个新的 MutationObserver 实例,并将其配置为监听目标元素(这里是 body 元素)的所有属性更改以及子元素的添加和删除。当这些变化发生时,回调函数会被调用,并打印出有关变动的信息。


    如果你想在某个特定元素出现时执行一个函数,可以在回调函数中检查新添加的节点是否是你感兴趣的元素。如果是的话,你就可以执行你的自定义函数了。


    注意:MutationObserver 的性能开销相对较高,因此你应该只关注那些真正关心的元素和变动类型。如果你不需要对整个文档树进行监视,那么最好缩小观察范围,例如只关注某个具体的父元素。

    评论

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题