# Bookmarklets - A little plugin (as a treat)
So [[Javascript]] bookmarklets are little bookmarks that will run some javascript on the current webpage. They can be very handy for certain scenarios, but do require a little bit of effort to setup.
Remember to be cautious when using bookmarklets, especially if you did not write it yourself. They can execute arbitrary code on the current page, and could be an easy way for a jerk to cause some real problems.
Always understand the code you are adding to your bookmarks.
## How to make a bookmarklet
1. **Create a Bookmark:**
- Open your browser (preferably Google Chrome)
- Right-click on the bookmarks bar or any bookmark folder.
- Choose "Add Page" or "Add Bookmark."
2. **Edit the Bookmark:**
- In the "Name" field, enter a descriptive name for your bookmarklet.
- I'm using "2x" so it's a nice and small button on my list of bookmarks.
- For the URL, this is where you're going to put some code, instead of a standard URL. Example code below.
3. **Save the bookmarklet**
- Save it to your bookmarks bar, so you have easy access to the button.
4. **Click the bookmarklet when you want to run it!**
## Example: 2x Speed Bookmarklet
You can change the speed of the target video, by changing the 2 after target speed. Most video players won't let you go above 10. Sometimes this won't work at all, it all depends on the website.
%%
These don't work on obsidian publish. I'd love to include the drag and drop link at some point though.
<blockquote class="line is-info">
<p>
Drag and drop this to your bookmarks ->
<a href='javascript: (function () {const targetSpeed = 2;document.querySelectorAll("video").forEach(video => {video.playbackRate = video.playbackRate === targetSpeed ? 1 : targetSpeed;});})();'>2x ⏩</a>
</p>
</blockquote>
[2x ⏩ ](javascript: (function () { const targetSpeed = 2; document.querySelectorAll("video").forEach(video => { video.playbackRate = video.playbackRate === targetSpeed ? 1 : targetSpeed; }); }\)();)
%%
You can copy paste the code below into your bookmark's URL.
```javascript
javascript: (function () {
const targetSpeed = 2;
document.querySelectorAll("video").forEach(video => {
video.playbackRate = video.playbackRate === targetSpeed ? 1 : targetSpeed;
});
})();
```
![[Bookmarklet_010.png]]
# Writing Bookmarklets
Generally anything you can do with Javascript you can do in bookmarklets! This makes them quite handy! I've used them for inserting CSS, for adding download buttons, batch clicking buttons, shortening URLs, etc.
## Components
Bookmarklets are pretty simple, it's a wrapper and some javascript code!
### Header
This part tells the browser. Hey there's some javascript coming, do things with it!
`javascript:`
### Your Javascript
#### Immediately Invoked Function Expression (IIFE)
It's best to wrap your custom function in an IIFE, this way your script is self-contained and self-executing.
```javascript
javascript: (function () {
/* Your code goes here*/
})();
```
#### Technically...
Technically you can just use `javascript:alert('test')` as a bookmarklet! This works, but only really for single functions and built in things, and it could leak things into other scopes. Which isn't great, don't pollute!
## Style Guide
Bookmarklets get encoded to be URL-safe and get squashed down to one line. Here's some tips for success:
- End each line with a semi-colon
- Do not use single-line comments `//`
- Since everything is on one line. Everything after that will be commented out and break your script
- Use multi-line comments instead `/* I'm a comment */`
# Troubleshooting
## It's not doing anything
Make sure you don't have comments, and that your statements and loops end when you expect them to by ensuring you have semi-colons ending your statements
Make sure you don't have any single line comments
Make sure the wrapper for the bookmarklet is formatted correctly
## Sometimes it works, sometimes it doesn't
I've run into this most often when the page has an iFrame/shadow-dom that I'm trying to interact with. I personally haven't figured out how to get-around this or get it to consistently load.
I have noticed opening dev tools inspecting an element, and then running the bookmarklet tends to work, though that's not a practical solution for using these in most scenarios.
# Helpful Tools
There's some helpful sites for creating bookmarklets.
[Bookmarklet Creator](https://caiorss.github.io/bookmarklet-maker/) is handy, but doesn't let you (super-easily) drag directly into your bookmarks bar to create
[Mr Cole's Bookmarklet Creator with Script Includer](https://mrcoles.com/bookmarklet/)
This one is also helpful, and more easily lets you drag and drop to your bookmarks bar. This also will automatically encode the string as a URL for you.