What's the EASY way to execute locally-sourced Javascript on an external resource?

I have a script I'm writing to observe a page for a change. I have a small interface in an HTML file, and I'm trying to load the target in an iframe. I've also tried using XMLHttpRequest and fetch, but a frame would be better (changes can be received without requesting the whole document over and over).

As you have probably guessed, I'm butting up against same-origin restrictions. Now, I'd think I'd be able to do this in an iframe or in a fetch/XMLHttpRequest originating from localhost—after all, how does the page's host server know I'm not just asking for the page via the usual method? But, obviously, it DOES know; Firefox, Chrome et al enforce the host's same-origin policy even though it's my code running on my machine and not one of the many, many valid reasons to be enforcing.

I know multiple RIGHT ways that I COULD do this, but they seem totally overblown – any testing automation environment (PostMan, phantomjs, headless Firefox/Chrome), or content-aware macro engines (Jitbit) – and I just want to be able to bodge together a proof-of-concept which will ultimately be the only way I actually use the thing until I no longer need it.

So, how do I do this maddeningly simple, infuriatingly confounding thing in the least stress-inducing way?

https://stackoverflow.com/questions/66848274/whats-the-easy-way-to-execute-locally-sourced-javascript-on-an-external-resourc March 29, 2021 at 11:02AM