# 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/)