Unable to find what's wrong in my code as I'm getting "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'" error.
I need to find if the data-count changes, if it does - print out that value to the console.
However, didn't manage a way on how to do that.
EDIT: it looks like that my script works, after the first attempt (getting error on page load, then going to another tab and comming back it prints out the correct value).
foreground.js:
var ember = document.getElementsByClassName("ember-view c-tab__list__item publicConversation");
var elementToWatch;
for(item of ember){
if(item.getAttribute("data-test-id") === "public-conversation" && item.getAttribute("data-count") != 0)
{
console.log(item.getAttribute("data-count"));
elementToWatch = item.getAttributeNode("data-count");
}
}
var config = {attributeFilter: ['data-update']};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.target.dataset.update == 'true') {
console.log('Attribute value updated', mutation);
}
});
});
observer.observe(elementToWatch, config);
background.js:
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.status !== "complete"){
return;
}
if(tab.url.indexOf("tickets") != -1){
chrome.tabs.executeScript(tab.id, {"file": "foreground.js"});
console.log("injected");
}
});
manifest.json:
{
"manifest_version": 2,
"name": "extension",
"version": "1.69",
"description": "Does things:)",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["https://exampleweb.com/tickets/*"],
"js": ["foreground.js"]
}
]
}
HTML example:
<li id="ember7026" class="ember-view c-tab__list__item publicConversation" data-test-id="public-conversation" data-count="0" aria-expanded="false" aria-selected="false"><span class="is_new_flag">NEW</span>Public
</li>