javascript – Bookmarklet works fine in Opera, but when running in Firefox I get extremely weird results

I wrote this bookmarklet:

javascript:var b = document.createElement("button");b.innerHTML = "Scroll to current video";b.addEventListener("click",() => doItYesly());b.style.position  = "fixed";b.style.left = 0;b.style.top = 0;b.style.zIndex = "99999999";document.body.prepend(b);var s = document.createElement("button");s.style.position  = "fixed";s.style.left = 0;s.style.top = "50px";s.style.zIndex = "99999999";s.innerHTML = "Set";s.addEventListener("click",() => localStorage.setItem("scrolldistanceforosautoscroller",window.scrollY));document.body.prepend(s);function doItYesly(){let inter = setInterval(() => {scrollTo(0,parseInt(localStorage.getItem("scrolldistanceforosautoscroller")));if(window.scrollY === parseInt(localStorage.getItem("scrolldistanceforosautoscroller"))){clearInterval(inter);}},100);}window

Basically it’s a tiny bookmarklet to allow a user to auto-scroll to a specific point in a long list of videos on YouTube. I wrote it for a friend of mine who repeatedly navigates to the same page over and over, and wanted to try and save some time and prevent from having to manually scroll through all the videos every time he wanted to return to the exact same spot.

When I click this bookmark in my browser (I use Opera) it works just fine. When I open the same bookmark in Firefox (he uses Firefox) it redirects me to a page that says “this page is hosted on your computer” and it simply says (object Window). This is because, in Opera when I would run my code it would print out “input scroll distance”, because the last expression evaluated to that. To fix that, I simply pointed to the window object, causing the final expression to evaluate to the page itself. This fixed the problem for Opera, but for Firefox it doesn’t fix the issue… Instead of just rendering the page like usual, it simply outputs a textual representation of the window object…

Is there any way around this? I assume this is for security, and if so then there probably isn’t a workaround… But perhaps there’s something I could do to make Firefox stop behaving this way?

When I run this same exact code from the dev console it works perfectly as expected, the problem only occurs when I save it as a bookmarklet and click on it. Any ideas?

javascript – Bookmarklet for selecting code snippets on StackExchange in 2021

The following code will add to each code block on https://codereview.stackexchange.com/ or https://stackoverflow.com/ a ‘Select Code’ button that will select the code belonging to that block.

This was originally written in 2013, I adjusted it to the new CSS and exchanged var with let, otherwise I think it looks fine. However JS has changed a lot, so I am submitting it again.

The original code was reviewed here 7 years ago.

In order to use this, visit http://codereviewcommunity.github.io/CodeReviewBookmarklet/

javascript: $('pre.s-code-block').not('button + *').each(function createButton() {
    /* Thank you http://stackoverflow.com/a/2838358/7602 */
    function selectCode(el, win) {
        win = win || window;
        let doc = win.document,
            sel, range;
        if (win.getSelection && doc.createRange) {
            sel = win.getSelection();
            range = doc.createRange();
            range.selectNodeContents(el);
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (doc.body.createTextRange) {
            range = doc.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        }
    }
    let buttonText = 'Select Code',
        length = buttonText.length,
        codeBlock = this,
        $link = $('<button type='button'>' + buttonText + '</button>').click(function buttonListener() {
            console.log($(codeBlock).text().substring(length));
            selectCode(codeBlock);
        });
    $(codeBlock).before($link);
});
/* Cross browser bookmarklet sorcery */
void(0);

javascript – Bookmarklet to watch bright videos with a filter / dark mode

This is a bookmarklet that darkens the web page as a whole and leaves the buttons behind still clickable:

javascript: (function () {
    var FilterOnTopDiv = document.createElement('div');
    FilterOnTopDiv.setAttribute('style','width: 100%;
                     height:100%;
                     z-index:999999;
                     position:fixed;
                     left:0px;
                     top:0px;
                     background-color:#000;
                     opacity: 0.25;
                     pointer-events:none;');
    document.body.appendChild(FilterOnTopDiv);
}());

The opacity is set to 0.25, that means when clicking on the bookmark several times, the web page is always 0.25 darker per click.

When reloading the web page, as usual with bookmarklets, everything is reset.

You can change the color of background-color to not only darken it, but also filter for other colors e.g. to filter out blue tones.

Tested on Firefox version 78.6.0esr(64-Bit).

javascript – Selectively printing elements on web page using a bookmarklet

There is a web page I visit which I would like to print. However, I only want to print a couple of things on it, not everything.

So, I am making a bookmarklet that I can use whenever I visit the page to hide everything from the printer except what I want to print.

The site already has a class, ‘d-print-none’, to hide an element from the printer.

The following code is the javascript I made to base my bookmarklet on.

My idea is to first apply the ‘d-print-none’ class to everything. Then selectively remove it.

I remove the class from the element that contains what I would like to print as well as any of its children.

Then I recursively remove it from the parents until I reach the document element.

function removeClass(t_selector, t_class){
    document.querySelectorAll(t_selector + ' *').forEach(x=>x.classList.remove(t_class))
   
    node = document.querySelector(t_selector)
    while (node && node.nodeType != Node.DOCUMENT_NODE) {
        node.classList.remove.(t_class);
        node = node.parentNode;
    }
}

document.querySelectorAll( '*' ).forEach(x=>x.classList.add('d-print-none'))
removeClass('app-flex-chart', 'd-print-none')
removeClass('app-flex-grid', 'd-print-none')

Adding the class to all elements was pretty straightforward and succinct as was removing it from all of the target element’s children.

Climbing the tree to apply it to the element itself and any of its parents was more verbose and error prone. Sadly, there appears to be no css selector to find all parents of an element.

I paired the loop down to be as succinct and readable as I could.

I am looking for ideas on how to make it more robust, succinct, or readable. Open to any and all suggestions and criticisms.

For that while loop, I had to check if the node I was on existed and check to make sure it wasn’t the document node, either case would cause a crash.

Google Chrome – Twitter Bookmarklet is not available

Due to the Buffer.com browser extension, links can not be truncated when sharing on Twitter (they use their own Shortener buff, only if you purchase a paid rate: https://faq.buffer.com/article/396-publish- unshorten -link) I was looking for a replacement. I found something similar: https://chrome.google.com/webstore/detail/share-on-twitter/gkjgmeeoldebbdoehhngapnlfmdbmiie?hl=en, but I do not really trust it.

Then I came across this article https://www.makeuseof.com/tag/10-revolutionary-bookmarklets-for-sharing-to-replace-your-extensions/, which reminded me of the good old days when I actually did used "javascript bookmarks" (Firefox bookmarks), also called "Firefox" (although I have since switched to Chrome).
Apart from Facebook, whose bookmarklet page is still active (https://www.facebook.com/share_options.php), all other services either have their services set or have switched to browser extensions.

After a few searches, I finally found Twitter's own "official" bookmarklet, see Announcement here: https://blog.twitter.com/official/en_us/a/2010/tweet-button-bookmarklet-share-links-from-any-page.html (back in 2010 !!)
Unfortunately, this URL is now 404: https://developer.twitter.com/pages/share_bookmarklet

Also tried the bookmarklet from here: http://marklets.com/Twitter%20%27Share%27%20Bookmarklet.aspx but in Chrome this does not seem to work anymore, I can not drag it into the bookmarks bar! !! 🙁

As stated in a response to SO: "Bookmarklets were sacrificed on the altar of alleged security benefits."
https://stackoverflow.com/questions/39505367/why-bookmarklet-does-not-worrk-on-twitter

How do I find one Well How can I share a link (my current browser tab / page) on Twitter with a single click?

PS: Find a related question here Cut a URL and share it on Twitter with a shortcut for Firefox / Chrome, but was closed 2014 as "Off-Topic" (?).