Chrome 扩展 - SoundCloud 页面操作答案

【问题标题】：Chrome Extension - SoundCloud Page ActionChrome 扩展 - SoundCloud 页面操作
【发布时间】：2014-10-19 06:21:34
【问题描述】：

我正在构建一个页面操作 chrome 扩展，但在处理 SoundCloud 上的内容时遇到了问题。我希望我的扩展程序分析页面上每首歌曲的播放、喜欢、转发和 cmets，然后根据数据向提要中的每首歌曲添加其他信息。

问题是当页面加载时，没有声音被加载到提要中，而是在页面加载后由 java 脚本加载。因此，当我阅读带有加载扩展名的文档时，没有数据可读取。最初，我通过添加从页面加载到内容脚本运行时的延迟来解决这个问题，但是当用户进一步向下滚动并加载更多歌曲时，这不起作用。

是否有人对我可以使用什么作为运行内容脚本的指标有任何想法。换句话说，我可以使用什么提示来确定页面上有要分析的新歌曲。

谢谢

【问题讨论】：

你可以使用 content-script 将你的代码注入到原始页面中的 JS 函数中，这样当函数（我猜是“play_music”之类的）被触发时，你的代码也会运行。
查看DOM modification events 上的规范问题。如果您找到合适的元素来聆听，这可能会有所帮助。

标签： javascript google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

我做了一些类似的事情，我找到的解决方案是创建自己的 onElementInsert 函数并不断检查直到内容注入页面。

我已经稍微修改了我的代码以尽量满足您的需求。您可能需要进行其他更改：

function onElementInsert( parent, func ) {
    var startingElementCount = parent.childNodes.length;

    // Checks to see if the element's number of immediate children nodes increased
    var checkChildCount = function(count) {
        if ( count < parent.childNodes.length ) {
            func();
            return true;
        }
        return false;
    }

    // Interval function to repeat every 100 milliseconds
    var interval = window.setInterval( function() {
        // Check if there are any new children
        if ( checkChildCount(startingElementCount) ) {
            // If so then trigger the insert event
            document.dispatchEvent( new Event('insertEvent') );
        }
    }, 100 );

    // Add an event listener for our insert event which will tell our interval to stop
    document.addEventListener('insertEvent', function (e) {
        clearInterval(interval);
    }, false); 
}

onElementInsert( document.getElementsByClassName('lazyLoadingList')[0].childNodes[0], function() {
   // Enter code here to execute when content has been added
});

这里发生的事情的细分：

此代码调用 onElementInsert(ele, func) 函数，该函数将不断检查是否有任何新的子节点添加到传递给它的元素 (ele) 中。
当发生插入时，它将执行函数 (func) 并将触发'insertEvent'，它将告诉函数停止检查进一步的插入。

类名为“lazyLoadingList”的元素是我发现 SoundCloud 将其 soundList 项加载到其中的元素。可能需要自己仔细检查一下。

需要注意的另一件事是，这只会检查您传入的元素的新直接子元素，它不会检测子元素的子元素。因此，当您使用它时，请确保在插入内容的元素上调用它——或更改它以检查所有子元素。

【讨论】：