Advanced JS bookmarklets with params using Firefox' keywords

In Firefox you can combine JS bookmarklets, keywords and params to do something like this:

 undefined

        javascript:(function(){
        var args = '%s'.split(' ');
        alert(args);
    })();

Useful example:

 undefined

        javascript:(function(){
        var args = '%s'.split(' ');
        var subreddit = args[0];
        var search = args[1];
        document.location.href = "https://www.reddit.com/r/" + subreddit + "/search/?q=" + search + "&amp;include_over_18=on&amp;restrict_sr=on&amp;t=all&amp;sort=new";
    })();

Bookmarklet format:

 undefined

        javascript:(function() {var args = '%s'.split(' ');var subreddit = args[0];var search = args[1];document.location.href = "https://www.reddit.com/r/" + subreddit + "/search/?q=" + search + "&amp;include_over_18=on&amp;restrict_sr=on&amp;t=all&amp;sort=new";})();

If you assign the keyword redditsearch to that bookmarklet, you can type redditsearch PixelArt zelda on the firefox navbar and you will be reditected to the Reddit search for 'zelda' on r/PixelArt.

In general this makes the navbar a very powerful command line in which you can add any command with multiple params.

It seems Mozilla has plans to get rid of this feature, see the ticket Migrate keyword bookmarks into about:preferences managed Search Engines. The good news is that the last comment, besides mine asking them not to remove this functionality, is from some years ago. I hope they change their mind, or forget about it...

TIP: If you don't want to remember the param order, you can also ask for them with a prompt if no arguments are specified:

 undefined

        javascript:(function(){
        var args = '%s'.split(' ');
        var subreddit = args[0] != "" ? args[0] : prompt("Enter the subbreddit:");
        if (!subreddit) return;
        var search = args.length > 1 ? args[1] : prompt("Enter the text to search:");
        if (!search) return;
        document.location.href = "https://www.reddit.com/r/" + subreddit + "/search/?q=" + search + "&amp;include_over_18=on&amp;restrict_sr=on&amp;t=all&amp;sort=new";
    })();

Bookmarklet format:

 undefined

        javascript:(function(){ var args = '%s'.split(' '); var subreddit = args[0] != "" ? args[0] : prompt("Enter the subbreddit:"); if (!subreddit) return; var search = args.length > 1 ? args[1] : prompt("Enter the text to search:"); if (!search) return; document.location.href = "https://www.reddit.com/r/" + subreddit + "/search/?q=" + search + "&amp;include_over_18=on&amp;restrict_sr=on&amp;t=all&amp;sort=new"; })();

Sorry for the reddit examples, this was posted originally on r/firefox some time ago and adapting them to lemmy seemed a bit too much work :P.

You're viewing a single thread.

18 comments

this is incredibly cool
i don't even know how i'm going to put this to use, but i know i'll find something to use it for. thank you
- I must admit that I've only used the multiple-param part in very few cases, but the main "bookmarklet keyword with param" is very useful, some examples I have:
  Custom searches: lemmy communities, lemmy content
  Get the link to a page with markdown format: title or custom texthttps//url...
  Post image or URL to a subreddit (I need to migrate this one for lemmy)
  
  oh crul it's you!
  i don't suppose you could share some of those? i just had a quick look, but the lemmy search syntax is different to reddit - the communities' ids are in the url, so the reddit method doesn't work unless i memorise the id №... (i wish the lemmy devs weren't so obsessed with numbers)
  
  the communities' ids are in the url, so the reddit method doesn't work unless i memorise the id №.
  Yeah... that's why I didn't tried that yet. I'm waiting a bit to see what frontend options are.
  The good news is that mlmym uses the community name for posting and searches:
  https://mlmym.org/lemm.ee/create_post?communityname=firefox%40lemmy.ml
  https://mlmym.org/lemm.ee/search?q=js&communityname=firefox%40lemmy.ml&sort=New
  To make it work with community ids, I planned to have something like the "subreddit shorcuts" from the "post to reddit" bookmarklet (see below). Not ideal, but better than nothing.
  i don't suppose you could share some of those?
  Sure, here there are. I realized that a couple of them are not really bookmarklets, but simple bookmarks with the %s param. You need to add a keyword and use it with keyword string to be searched.
  lemmy all search
  https://lemm.ee/search?q=%s&type=All&listingType=All&page=1&sort=TopAll
  lemmy community search
  https://lemm.ee/search?q=%s&type=Communities&listingType=All&page=1&sort=TopAll
  get link in markdown
  Execute it without param (e.g.: link) to get [title](url)
  Execute it with a param (link text to display) to get [text to display](url)
  It will show the result in a prompt and you can copy from there. The prompt itself has no effect, it doesn't matter how you close it.
  
  One liner:
  undefined
  
  javascript:(function() {var title = ("%s" || document.title).replace("[", "\\[").replace("]", "\\]");prompt("Title:", `[${title}](${document.location.href})`);})()
  I also have one to get just the title of a page, but I leave that as an exercise to the reader :D. It's very easy to modify the link one.
  post to reddit
  Use it with the subreddit name (e.g.: post CassetteFuturism) or the subreddit shortcut (e.g.: post cf).
  If executed with no param, it will show a list of "shortcuts" and will ask you to select one.
  The shortcuts are in the `subKeys``dictionary. That's the trick that could be used to assign the community ids from the community names (or custom shortcuts). Not practical for a random commmunity, but manageable for the most common ones.
  
  One liner:
  undefined
  
  javascript:(function() {var subKeys = {cf: 'CassetteFuturism',it: 'ImaginaryTechnology',iv: 'ImaginaryVehicles',ap: 'ApocalypsePorn',ss: 'Simon_Stalenhag',sw: 'spainwave',sk: 'sketches',};var subreddit = '%s';if (!subreddit) {var promptText = "Type subreddit:";for (var shortcut in subKeys) promptText += `\n- ${shortcut}: ${subKeys[shortcut]}`;subreddit = prompt(promptText);}if (!subreddit) return;if (subKeys[subreddit]) subreddit = subKeys[subreddit];var title = document.title;var url = encodeURIComponent(document.location.href);window.open(`https://www.reddit.com/r/${subreddit}/submit?url=${url}&title=${title}`);})()
  (...continues on next comment?)
  
  (... continues from previous comment, I was getting an error when I tried to post all in the same comment)
  post image to reddit
  I don't recommend this one, I haven't used in a while and it doesn't work great with most sites.
  It should works very similar to the previous one, but looking for images on the page. It also writes my usual "Source: titleurl blablabla" comment for the most common sites.
  The result is a huge mess and very fragile. I post it more as an example of how you could do some things.
  
  (one-liner missing because I'm still getting an error)
  EDIT: Yeah, lemmy doesn't like a single line with >5000 characters, hehe. Anyway, I don't recommend using this last one.
  
  holy hell that is an absolute monolith of a bookmarklet though
  
  Yep... sadly (AFAIK) reusing code in bookmarklets is not a thing to make it more mantainable.
  
  bless you crul, you are my absolute favourite lemming. shame that user tags aren't a feature yet so i notice when i run into you. i also see you have good taste in subreddits, too
  these are great - particularly the markdown one - that never would have crossed my mind, but i'm going to try to remember to use it from now on
  i wish i could move to mlmym, but it's just not as featureful as either lemmy-ui or reddit+res
  
  _ Thanks for the kind words. I Like meeting nice people here.
  shame that user tags aren't a feature yet so i notice when i run into you
  It's a bit cumbersome to use extensively, but this works for me in the default UI (with a Stylus-alike add on):
  undefined
  
  a[href="/u/username"] { background: red; color: white !important; }
  For mlmym you need to change a[href="/u/username"] with a[href="/lemm.ee/u/username"].
  i wish i could move to mlmym, but it's just not as featureful as either lemmy-ui or reddit+res
  Yeah, lemmy is very work-in-progress. I'm also eager for it to be more mature. But as I'm not actively helping with the coding, I can't complain :).
  And, sadly, mlmym deveopment is a bit slow right now. I hope it's because summer holidays and such. But if it doesn't catch up in the near future, I will have to move to other options. That's why I'm not investing too much time right now in my toolchain. I still don't know what to commit to.
  
  that's also a great idea, i'll see if i can find a way to cram that into µblock. thank you for the idea
  edit: for anyone who wants to do a similar thing, here is the syntax for a µblock filter:
  /(lemm.ee|mlmym.org)/##body a[href*="/lemm.ee/u/Crul"]::after:style(content:"awesome";color:tomato!important;border:1px solid currentColor;border-radius:var(--bs-border-radius, 0.375rem);padding-inline:0.5ch;margin-left:0.5ch;)
  the regex at the beginning is so it should work on both lemm.ee & mlmym; Crul is the username to be replaced; awesome is the tag content; tomato can be any colour but it's a nice muted red; the *= is so it works with mlmym's url prefix, and federation suffices (e.g. /u/Crul@lemm.ee); the radius var should be lemmy-ui native but it falls back to 0.375em if the var is not found
  (also i made it look a little prettier / more native)
  i'll have a look at the mlmym github, see if there's anything simple i can do; i've never used docker, but perhaps i can figure it out
  (also by the way your little doesn't work on the default ui, it makes a superscript underscore)
  
  I just realized that you can also add text tags with the ::after pseudo-element:
  undefined
  
  a[href="/u/username"]::after { content: " [TAG]"; }
  also by the way your little _ doesn't work
  Thanks, fixed!

18 comments

lemmy all search

lemmy community search

get link in markdown

post to reddit

post image to reddit