Bookmarklet: go to page & fill in form

Question

I want to make a bookmarklet to a site where you can watch videos with any subtitle .srt file. The intent is that I can directly click it from a YouTube (or DailyMotion, or ...) video page, and instantly be transported to https://tubecc.herokuapp.com/, with the desired video url already filled in.

My current attempt is:

javascript:{vidurl=document.location.href;document.location.href=('https://tubecc.herokuapp.com');document.getElementById("url").value=vidurl;void(0);}

However, all this does is navigate to the website - it does not fill in the url in the box.

When I try to fill in the url box with some nonsense text as a separate operation - i.e. I'm already on https://tubecc.herokuapp.com/ and just run document.getElementById("url").value="foobar" from the console, or make a separate bookmarklet which only includes javascript:{document.getElementById("url").value="foobar";void(0);}, it does work - 'foobar' appears in the text box, as expected.

It only seems to fail when combined with a larger bookmarklet which navigates to the page first. At one point I suspected it had something to do with asynchronicity so I added a delay for the fill in (javascript:{vidurl=document.location.href;document.location.href('https://tubecc.herokuapp.com');setTimeout(() => { document.getElementById("url").value="foobar"; }, 2000);void(0);}), but that didn't seem to help either.

PS: not a duplicate of this question - the basic principle is described there, and I am applying it. My question is about why it goes wrong in this specific situation.

Answer 1

When you set location.href browser navigates to the new page and unloads all the currently running JavaScript.

To achieve what you want you'll also need a browser extension User JavaScript and CSS (or any userscript manager like Tampermonkey) to run JavaScript code automatically on tubecc.herokuapp.com.

Use this bookmarklet to navigate to tubecc.herokuapp.com:

javascript: (() => {
  document.location.href = `https://tubecc.herokuapp.com?url=${document.location.href}`;
})();

Use this code in the browser extension:

const params = new URLSearchParams(document.location.search);
const url = params.get('url');

url && (document.getElementById('url').value = url);

Answer 2

Looking at this line again:

javascript:{vidurl=document.location.href;document.location.href=('https://tubecc.herokuapp.com');document.getElementById("url").value=vidurl;void(0);}

When we run this on a webpage, document.location.href=('https://tubecc.herokuapp.com') changes the location. And so when 'https://tubecc.herokuapp.com' is loaded, there is no javascript code running.

To achieve the functionality you are looking for, you may use localstorage to store the video URL in the browser. Then redirect to your page.

Finally, you need to add a start-up script in your 'https://tubecc.herokuapp.com' webpage.

Bookmarklet:

window.localStorage.setItem('videoURL')=document.location.href;
document.location.href('https://tubecc.herokuapp.com')

Start up script within 'https://tubecc.herokuapp.com':

let url = window.localStorage.getItem('videoURL');
document.getElementById("url").value=url;