JS A Method To Set Cookie Then Load Page

Question

I visit a site often that has a "click to change to dark theme" button. The dark theme is much easier to read, so I have to click the link every visit (history cleared on close).

I'm on a local Linux box with Firefox; so Javascript, HTML, Python and Bash are available.

I'm focused on a Bookmarklet as it seems like the right way - however, nothing I'm doing is working. I'm not versed in Javascript so it's been days looking up and trying examples. It may not be possible as a Bookmarklet, so perhaps there is another way around?

Bookmarklet - Set Then Go

Here's what I have:

javascript:document.cookie="theme=dark; domain=example.org; path=/;"; location.href="http://www.example.org";

It works if it's only the cookie, and it works if it only loads the site - but not both. I'm ok with programmatically going to the page first, setting the cookie, then reloading but that doesn't work either. I'm not wanting to click two links. "example.org" is how the cookie is stored for a normal visit, and I'm ok with the cookie only lasting for that session.

Persistent Cookie

I can't get Firefox (IceCat) to keep the cookie. I set it under Exceptions to allow, but nothing keeps it unless both "Keep cookies until they expire" and "Cookies" is unchecked for removal after close. Doing that keeps all cookies from everywhere which I'm not wanting to do.

Permanent Cookie

I'd tried setting the cookie in an immutable file - but Firefox doesn't keep cookies there anymore. They are in SQLite. Maybe there's a way to set a flag on the row so it's never removed? User.js and prefs.js don't seem to apply - but shouldn't it be possible to set the cookie in prefs.js or user.js that would set it for each browser load thereby creating a 'permanent cookie'?

Bookmarklet - Go Then Click

Another thing I tried was to open the page, then click the link programmatically to load the dark theme:

javascript:location.href="http://www.example.org";document.getelementbyid('Dark').click();

The ID is known and in the form of a non-valid anchor (no href). The site's javascript seems to be listening for a click event. Here is what they have:

$('#Dark').click(function(){
    document.cookie='theme=dark; domain=.example.org; path=/';
    window.location.reload(true);
});

So shouldn't it be as simple as setting an environment variable then loading the site - maybe JS doesn't have environment vars?

Inject It And Forget It

I read that it was possible to inject style into the head of the page, so I tried to inject:

 <script>document.getelementbyid('Dark').click();</script>

via the Bookmarklet which seems like it should work as the click would be in a local context. I could never get it to inject, but again, I don't know Javascript.

Last Resort

If nothing above is possible, could it be done with bookmark to a local .html file that sets the cookie for the given domain then redirects to the site? A last ditch solution that is not preferred would be an actual script (.sh/.py)?

---

I don't want to share the site, and I don't want to not clear history on exit. Neither are due to what you're probably thinking. :)

I'm here because I'm wanting a Javascript solution (a bookmark), but I'm not good at Javascript - so all the examples above might work with tweaking, I'm just doing it wrong.

Thanks all for any help!! If you can fix it - could you also explain why what I had doesn't work?

Answer 1

Below is a try to explain rather than an answer.

Let's assume that you are already at the target page. Do the following bookmarklets work for you? This:

javascript:(function() {
    document.getElementById('Dark').click();
})();

or this one:

javascript:(function() {
    document.cookie='theme=dark; domain=.example.org; path=/';
    window.location.reload(true);
})();

Answer 2

I eventually figured out a cookie's initial entry can only be set by the domain, as a measure against XSS. So the answer to my question is it's not possible.

The simplest work around is to use an Add-On followed by userContent.css.

It would of been nice to set the theme preference (cookie) before loading the page - but I can see why the rule's in place..

It takes the same amount of clicks to go to the site and click "Change To Dark Theme" as it would if JS was used (open the site [1st click], set the cookie and reload [2nd click]).