Currently working on a chrome extension that can look over the comment section of a Youtube page, running the script each time new comments are loaded in via AJAX.
Due to the new method Youtube loads in comments I have had to use DOM mutation observers as the usual event "DOMSubtreeModified" is now depreciated.
This is the previous, rather simple way of doing it.
However I am now working with the following as the above code is depreciated. Only including the section that handles changes to the DOM to keep things simple.
The issue is I am getting the right number of console.log messages for the number of comments loaded, with more being added after the AJAX call however they are pointing to a null object.
Ideally I need the found results equal to the individual comments on any Youtube page, so they can be manipulated with JQuery.
console.log Messages in Chrome.
script.js
manifest.json (although most likely not needed.)
Any help would be great, been tinkering around with this for a good while now and at a loss on how to get it working. Thanks.
Due to the new method Youtube loads in comments I have had to use DOM mutation observers as the usual event "DOMSubtreeModified" is now depreciated.
This is the previous, rather simple way of doing it.
Code:
$("#divID").bind("DOMSubtreeModified", function() {
//run code here as the DOM has changed.
});However I am now working with the following as the above code is depreciated. Only including the section that handles changes to the DOM to keep things simple.
The issue is I am getting the right number of console.log messages for the number of comments loaded, with more being added after the AJAX call however they are pointing to a null object.
Ideally I need the found results equal to the individual comments on any Youtube page, so they can be manipulated with JQuery.
console.log Messages in Chrome.
Code:
mutationHandler: script.js:12
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
context: undefined
length: 0
prevObject: e.fn.e.init[0]
selector: "div"
__proto__: Object[0]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]
script.js:19
[prevObject: e.fn.e.init[0], context: undefined, selector: "div", constructor: function, init: function…]script.js
Code:
var targetNodes = $("#watch-discussion");
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver (mutationHandler);
var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true };
// Add a target node
targetNodes.each ( function () {
myObserver.observe (this, obsConfig);
} );
function mutationHandler (mutationRecords) {
console.info ("mutationHandler:");
mutationRecords.forEach ( function (mutation) {
console.log (mutation.type);
if (typeof mutation.removedNodes == "object") {
var jq = $(mutation.removedNodes);
commentSelection = jq.find('div');
console.log(commentSelection);
}
} );
}manifest.json (although most likely not needed.)
Code:
{
"background": {
"scripts": [ "jquery-1.7.2.min.js", "lib/typo/typo.js", "background.js"]
},
"content_scripts": [ {
"css": [ "skin/install.css" ],
"js": [ "jquery-1.7.2.min.js", "lib/typo/typo.js", "script.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"default_locale": "en_US",
"manifest_version": 2,
"name": "Test Application 1.0",
"options_page": "options.html",
"permissions": [ "http://*/*", "https://*/*", "tabs" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "0.1"
}Any help would be great, been tinkering around with this for a good while now and at a loss on how to get it working. Thanks.