Skip to content

Instantly share code, notes, and snippets.

@o0101
Forked from anonymous/index.html
Created September 23, 2017 18:15
Show Gist options
  • Save o0101/b7bcf95f60b6979de2a07764109020e8 to your computer and use it in GitHub Desktop.
Save o0101/b7bcf95f60b6979de2a07764109020e8 to your computer and use it in GitHub Desktop.
Bookmarklet // source https://jsbin.com/nosefuduju
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bookmarklet</title>
</head>
<body style="max-width:700px; margin:0 auto;">
<p>Here is the bookmarklet:
<a href="javascript:(function()%7B(function()%20%7Bconst%20req%20%3D%20new%20XMLHttpRequest()%3Bconst%20key%20%3D%20'AIzaSyAUYMRSUW3BAZLhSTbB1poQuQ4xaqt2C4c'%3Breq.open('POST'%2C%20'https%3A%2F%2Fwww.googleapis.com%2Furlshortener%2Fv1%2Furl%3Fkey%3D'%2Bkey)%3Breq.setRequestHeader(%22Content-Type%22%2C%20%22application%2Fjson%22)%3Breq.responseType%3D%22json%22%3Breq.send(JSON.stringify(%7BlongUrl%3Alocation.href%7D))%3Bconst%20text%20%3D%20document.createElement('textarea')%3Blet%20result%3BsetTimeout(%20()%20%3D%3E%20(document.execCommand('copy')%2Ctext.remove())%2C%20700%20)%3Breq.onreadystatechange%20%3D%20()%20%3D%3E%20%7Bif%20(%20req.status%20%3D%3D%20200%20%26%26%20req.readyState%20%3D%3D%204%20)%20%7Bdocument.body.appendChild(text)%3Btext.value%20%3D%20req.response.id%3Btext.select()%3B%7D%7D%7D())%7D)()">⌘goo.gl</a>
<p>
This bookmarklet copies the sends the current URL to Google's URL Shortener API and then copies it to clipboard.
<p>
Drag it to your "Bookmarks Bar". When on a page, click it to use it. The short link will be copied to your clipboard.
Then just paste it anywhere.
<p>
I like to call it "Command-Goo.gl" but who knows what you like?
<p>
The code for this bookmarklet is:
</p>
<pre><code>
(function() {
const req = new XMLHttpRequest();
const key = 'AIzaSyAUYMRSUW3BAZLhSTbB1poQuQ4xaqt2C4c';
req.open('POST', 'https://www.googleapis.com/urlshortener/v1/url?key='+key);
req.setRequestHeader("Content-Type", "application/json");
req.responseType="json";
req.send(JSON.stringify({longUrl:location.href}));
const text = document.createElement('textarea');
let result;
setTimeout( () => (document.execCommand('copy'),text.remove()), 700 );
req.onreadystatechange = () => {
if ( req.status == 200 && req.readyState == 4 ) {
document.body.appendChild(text);
text.value = req.response.id;
text.select();
}
}
}())
</pre></code>
<p>
It was turned into a bookmarkelt at the following site: <a href=https://mrcoles.com/bookmarklet/>https://mrcoles.com/bookmarklet/</a>
<p>
This code is released under an MIT License
</p>
<details>
<summary><em>API key</em><br></summary>
<p>
I'm using my API key. When I say "my" I mean the key I created with <a href=https://developers.google.com/url-shortener/v1/getting_started#APIKey>this link</a>. You can create your own key, too. Do that, if you prefer to.
These API keys should be good for 1,000,000 calls per day according to the docs.
Enjoy it!
If you want to see other code that I wrote you can go to my <a href=https://github.com/dosyago-coder-0>github.</a>
</details>
<p>
<hr>
</body>
</html>
@o0101
Copy link
Author

o0101 commented Sep 23, 2017

I wrote this and posted it to HN under projectant: https://news.ycombinator.com/item?id=15320941

You're welcome to use the code. It's under MIT License.

🌮 👍

@ksaj
Copy link

ksaj commented Sep 23, 2017

I wrote a far less elegant bash script to do this, using pbcopy and pbpaste. I thought it was pretty clever at the time. D'oh!

Nice to see a useful browser enhancement that doesn't require tampermonkey et al. This should be a built-in Chrome feature.

@o0101
Copy link
Author

o0101 commented Sep 24, 2017

Thanks for that super kind comment, @ksaj! You should put your bash script up too, it would be interesting. pbcopy I remember came in very handy on a Mac one time.

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