POC

changedetectionio/static/js/watch-overview.js

@@ -3,4 +3,20 @@ $(function () {
   $('.diff-link').click(function () {
     $(this).closest('.unviewed').removeClass('unviewed');
   });
+
+  // after page fetch, inject this JS
+  // build a map of all elements and their positions (maybe that only include text?)
+  var p = $( "*" );
+  for (var i = 0; i < p.length; i++) {
+     console.log($(p[i]).offset());
+     console.log($(p[i]).width());
+     console.log($(p[i]).height());
+     console.log(getXPath( p[i]));
+  }
+
+  // overlay it on a rendered image of the page
+
+
+
+  //p.html( "left: " + offset.left + ", top: " + offset.top );
 });

changedetectionio/templates/watch-overview.html

@@ -2,7 +2,10 @@
 {% block content %}
 {% from '_helpers.jinja' import render_simple_field %}
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
+<script crossorigin src="https://unpkg.com/get-xpath"></script>
+
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-overview.js')}}" defer></script>
+
 <div class="box">
 
     <form class="pure-form" action="{{ url_for('api_watch_add') }}" method="POST" id="new-watch-form">