Skip to content

Instantly share code, notes, and snippets.

@cazepeda-zz
Created October 28, 2012 02:02
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save cazepeda-zz/3967172 to your computer and use it in GitHub Desktop.
Save cazepeda-zz/3967172 to your computer and use it in GitHub Desktop.
Bookmarklet to append a string to the end of a URL
window.location.href
====================
Bookmarklet to append a string to the end of the URL.
1. Create bookmark.
2. Edit bookmark URL(Chrome) / Location(Firefox) to include this code: javascript:window.location.href=window.location.href+'REPLACETHIS';
3. Now make use of that bookmarklet.
Code: javascript:window.location.href=window.location.href+'REPLACETHIS';
@mer2329
Copy link

mer2329 commented Jan 29, 2017

thank you

@whyboris
Copy link

whyboris commented Mar 7, 2017

Thank you!

@benmeroff
Copy link

Fantastic little workflow saver, thanks!

@grantkemp
Copy link

grantkemp commented Oct 31, 2017

Lovely - didn't know it was that simple..Thanks to you !

@rothenburycam
Copy link

Thanks again - still useful in 2018!

@smichel17
Copy link

smichel17 commented Dec 18, 2019

Hello from 2019. In the event that you're using this bookmarklet to append a url parameter, here's a slightly more robust version:

javascript:const params = new URLSearchParams(window.location.search); params.set("KEY", "VALUE"); window.location.href=window.location.origin+window.location.pathname+"?"+params.toString();

Follow the same steps from above, replacing KEY and VALUE with the ones you'd like.

@Arslan30
Copy link

Hi!
As i append to a certain url it doesn't work due to the last /....What would be a workaround this?

@minig0d
Copy link

minig0d commented Jan 19, 2021

Hello from 2019. In the event that you're using this bookmarklet to append a url parameter, here's a slightly more robust version:

javascript:const params = new URLSearchParams(window.location.search); params.set("KEY", "VALUE"); window.location.href=window.location.origin+window.location.pathname+"?"+params.toString();

Follow the same steps from above, replacing KEY and VALUE with the ones you'd like.

Note: using set will overwrite any existing parameters rather than append. (ex. if you're already on example.com/hello?foo=1, your example would change it to example.com/hello?KEY=VALUE rather than appending as suggested.

There is probably a way to shorten this even more, but it can be even further simplified to:
javascript:let tempUrl = new URL(window.location);tempUrl.searchParams.append("KEY","VALUE");window.location = tempUrl;

(which will correctly change example.com/hello?foo=1 to example.com/hello?foo=1&KEY=VALUE and will also change example.com/hello to example.com/hello?KEY=VALUE

Also the solution in the original post can be simplified to the following in modern browsers (I believe there were a couple quirks with this in really old browsers):
javascript:window.location.href+='REPLACETHIS';

@smichel17
Copy link

smichel17 commented Jan 19, 2021

ex. if you're already on example.com/hello?foo=1, your example would change it to example.com/hello?KEY=VALUE rather than appending as suggested.

Are you sure / did you test this? I'm pretty sure it will change to example.com/hello?foo=1&KEY=VALUE. That's the documented behavior, too: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/set#examples

What it will replace is any existing parameters of KEY. So if you have example.com/hello?foo=1&KEY=bar, it will become example.com/hello?foo=1&KEY=VALUE, whereas the original bookmarklet will yield example.com/hello?foo=1&KEY=bar&KEY=VALUE.

My use case was on GitLab issues; when viewing group level kanban boards, there was a url parameter that allowed you to filter to a single project, but no UI element to do this. But if the parameter was present twice, it would only use the first one. So I needed to replace it (while keeping all other parameters), not add an additional param on to the end. (I'm pretty sure this parameter trick no longer works, though).

@minig0d
Copy link

minig0d commented Jan 19, 2021

Are you sure / did you test this? I'm pretty sure it will change to example.com/hello?foo=1&KEY=VALUE. That's the documented behavior, too: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/set#examples
oops... you're absolutely right it does work... I missed that you were initializing with the location.search). My apologies!

But it is still half as long :)

@iFUCKINGHATEcomputers
Copy link

How do I make a bookmarklet which adds "about:reader?url=" to the beginning of the URL?

@minig0d
Copy link

minig0d commented Jun 29, 2023

How do I make a bookmarklet which adds "about:reader?url=" to the beginning of the URL?

Honestly, I don't think you can from a bookmarklet in modern Chrome due to the security settings. If you try to it redirects you to an about:block page.

Even from the DevTools console if you try the following it's blocked. I certainly don't want to say that it can't be done by somehow loosening security settings, via some JS glitch, or via an extension, but in terms of a traditional bookmarklet that will work for most people, I don't think it's possible. It isn't allowed in modern Firefox either.

location.href = 'about:reader?url=https://www.google.com'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment