I am currently learning js and dom manipulation and I am trying to figure this out since about 24 hours. By now I am completely clueless. I have the following (below) code where I try to DOM manipulate willhaben.at to inject it with some additional information. The injection only works when I refresh the page or open it in new tab, I know this is because:
The Chrome extension content script will only load when a completely new webpage matching the URL specified in your manifest is loaded. In this era of single page web applications, many websites, including GitHub, use Javascript frameworks and Ajax calls to only update parts of the existing webpage content as the user navigates around the site. Even though the address bar is being updated, most of the time no actual page loads are being executed, so your chrome extension won't trigger.
My manifest:
{
"manifest_version": 3,
"name": "WH",
"version": "1.0",
"description": "...",
"icons": {
"32": "icon.png"
},
"content_scripts": [
{
"matches": ["*://www.willhaben.at/iad/kaufen-und-verkaufen/d/*"],
"js": ["wh.js"],
"run_at": "document_end"
}
]
}
An example script:
const changeThis= document.querySelector('[data-testid="ad-detail-header"]');
changeThis.innerHTML = 'THIS IS NOT WORKING WITHOUT REFRESHING :(';
I've tried to trigger my script if the url changes, I've tried mutationObserver and probably many other things I don't even remember. I can't even get a darn log in to the console after I navigate without a refresh. I am pretty sure it is something banal but I can't seem to be able to figure it out. Sorry if you would need code snipes of what I've tried by now but I didn't save all the trials I did and it would be a freaking large amount of code snippets.
(before posting I went trough all of the "Review questions already on Stack Overflow to see if your question is a duplicate." but non of them solved my issue on this site. However I tried the below two after while going trough the list)
document.addEventListener("pjax:end", function() {
console.log('pjax:end');
});
Manifest:
"matches": ["*://*.willhaben.at/*"],
Does not work either.
