143 lines
3.2 KiB
Markdown
143 lines
3.2 KiB
Markdown
# Bookmarklets
|
|
|
|
Browser-based JavaScript utilities that run with a single click from your bookmarks bar.
|
|
|
|
## 🚀 Creating a Bookmarklet
|
|
|
|
### 1. Write Your JavaScript
|
|
|
|
Create a new `.js` file in this directory with regular, readable JavaScript:
|
|
|
|
```javascript
|
|
/**
|
|
* My Awesome Bookmarklet
|
|
* Does something cool on any webpage
|
|
*/
|
|
|
|
// Your code here
|
|
const elements = document.querySelectorAll(".some-class");
|
|
elements.forEach((el) => {
|
|
// Do something
|
|
});
|
|
|
|
alert("Done!");
|
|
```
|
|
|
|
### 2. Generate the Bookmarklet
|
|
|
|
Run the generator:
|
|
|
|
```bash
|
|
npm run bookmarklet -- code/bookmarklets/your-file.js
|
|
```
|
|
|
|
The generator will:
|
|
|
|
- ✂️ Remove all comments
|
|
- 🗜️ Minify the code
|
|
- 📦 Wrap in bookmarklet format
|
|
- 📋 Copy to your clipboard
|
|
|
|
### 3. Install in Browser
|
|
|
|
1. Create a new bookmark (Cmd+D or Ctrl+D)
|
|
2. Paste the clipboard content as the URL
|
|
3. Name it and save
|
|
4. Click to use!
|
|
|
|
## 📚 Available Bookmarklets
|
|
|
|
### [highlight-links.js](highlight-links.js)
|
|
|
|
Highlights all links on a page in yellow and shows count.
|
|
|
|
**Generate:** `npm run bookmarklet -- code/bookmarklets/highlight-links.js`
|
|
|
|
### [example-bookmarklet.js](example-bookmarklet.js)
|
|
|
|
Example template showing basic structure.
|
|
|
|
## 💡 Tips
|
|
|
|
- **Test first**: Try your logic in the browser console before creating bookmarklet
|
|
- **Be browser-safe**: Stick to vanilla JS, avoid ES6+ features in production if supporting old browsers
|
|
- **Keep it simple**: Bookmarklets should be quick utilities, not full apps
|
|
- **Comment generously**: Comments are stripped out, so explain your code
|
|
- **Use descriptive names**: Variables and functions will be minified
|
|
|
|
## 🔧 Bookmarklet Generator
|
|
|
|
The generator ([code/utils/bookmarkletMaker.js](../utils/bookmarkletMaker.js)) handles:
|
|
|
|
- Comment removal (single-line `//` and multi-line `/* */`)
|
|
- Code minification (whitespace removal, single-line conversion)
|
|
- IIFE wrapping with `javascript:` protocol
|
|
- Clipboard copying
|
|
|
|
## 📝 Common Patterns
|
|
|
|
### Getting Page Info
|
|
|
|
```javascript
|
|
// Current URL
|
|
const url = window.location.href;
|
|
|
|
// Page title
|
|
const title = document.title;
|
|
|
|
// Selected text
|
|
const selected = window.getSelection().toString();
|
|
```
|
|
|
|
### Modifying the Page
|
|
|
|
```javascript
|
|
// Find elements
|
|
const elements = document.querySelectorAll(".selector");
|
|
|
|
// Style them
|
|
elements.forEach((el) => {
|
|
el.style.backgroundColor = "yellow";
|
|
});
|
|
|
|
// Add content
|
|
const div = document.createElement("div");
|
|
div.textContent = "Hello!";
|
|
document.body.appendChild(div);
|
|
```
|
|
|
|
### Opening New Windows
|
|
|
|
```javascript
|
|
// Open in new tab
|
|
window.open("https://example.com", "_blank");
|
|
|
|
// With specific size
|
|
window.open("https://example.com", "_blank", "width=800,height=600");
|
|
```
|
|
|
|
### Copying to Clipboard
|
|
|
|
```javascript
|
|
navigator.clipboard
|
|
.writeText("text to copy")
|
|
.then(() => alert("Copied!"))
|
|
.catch((err) => alert("Failed: " + err));
|
|
```
|
|
|
|
## 🐛 Debugging
|
|
|
|
If your bookmarklet doesn't work:
|
|
|
|
1. Open browser console (F12)
|
|
2. Paste your original code (without `javascript:` wrapper)
|
|
3. Debug errors
|
|
4. Update the source file
|
|
5. Regenerate bookmarklet
|
|
|
|
## 🔗 Resources
|
|
|
|
- [Bookmarklet Best Practices](https://en.wikipedia.org/wiki/Bookmarklet)
|
|
- [MDN: DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
|
|
- [Browser Compatibility](https://caniuse.com/)
|