Initial commit

code/bookmarklets/README.md

@@ -0,0 +1,142 @@
+# 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/)