A little trick for changedetection.io and shadowdom

[iii@mander.xyz]

I selfhost changedetection.io to get notifications when a webpage changes.

Most of the time, the build-in visual selector is all I need to select the parts of the page I want it to monitor.

Some of the time I need to write custom (CSS) query selectors.

Today I had an interesting case where both of those methods failed. The page (laposte.fr) uses webcomponents who write to shadowdom. Shadowdom isn't directly addressable by CSS or Xpath or ... filter.

The trick was to run some custom javascript, in the "browser steps" section:

document.body.innerHTML = document.querySelector("#shadowdom_parent_container").shadowRoot.textContent;

This replaces the document body with whatever text is inside the webcomponent. Now it's as simple as having the monitor watch for changes on the body tag.

[deadcatbounce@reddthat.com]

There's a change detection add-on for Firefox I use for websites which don't have RSS feeds. Might work on that other thing.

SiteDelta Watch.