This is my first time trying to make a Chrome extension. I want to track changes to an element on a page using MutationObserver, but I get null when trying to find the element I need. I checked for DOM loading – it didn’t help. Such an element definitely exists, I tried to run the code in the browser console – everything works.
I have this error
TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
manifest.json
{
"manifest_version": 3,
"name": "Helper",
"version": "1.0",
"action": {
"default_popup": "helper.html",
"default_icon": "helper_icon.png"
},
"content_scripts": [
{
"matches": [
"*://*.site.ru/*"
],
"js": [
"./content.js"
],
"run_at": "document_start",
"all_frames": true
}
],
"web_accessible_resources": [{
"resources": ["injected.js"],
"matches": ["<all_urls>"]
}]
}
content.js
console.log('content script start');
function run() {
console.log('The DOM is loaded');
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
observer.observe(document.querySelector('.items_9ujCP'), {
childList: true,
subtree: true,
characterDataOldValue: true
});
console.log(document.querySelector('.items_9ujCP')); // return null
}
document.addEventListener("DOMContentLoaded", run);
I’ve read similar questions, and it seems like everyone has a similar code working. I’d be glad if someone could help or explain what’s wrong.