# 🔖 Bookmarklet Gallery

[![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-live-222?logo=github&logoColor=white)](https://docs.github.com/pages)
[![JavaScript](https://img.shields.io/badge/JavaScript-vanilla-F7DF1E?logo=javascript&logoColor=black)](https://developer.mozilla.org/docs/Web/JavaScript)
[![No Build](https://img.shields.io/badge/build-none-brightgreen)](#-local-development)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)

> **Install by drag & drop** | **No extension** | **Works in every browser** | **Fully static, hosted on GitHub Pages**

---

<div align="center">

**言語 / Language / 语言 / 언어**

[日本語](./README.md) | **English**

</div>

---

A static gallery site that collects handy bookmarklets in one place. Just **drag a button** onto your bookmarks bar to install it — no extension review, no install step. They work as-is in every browser.

> **Note:** Japanese is the primary language of this project. The [Japanese README](./README.md) is the source of truth; this English version is a translation.

## ✨ Features

- **Drag & drop install** — just drag a button onto your bookmarks bar
- **Category gallery** — effect and use case at a glance
- **Copy source code** — customize for your own needs
- **Build-less** — plain HTML / CSS / JS, served straight from GitHub Pages

## 📦 Included Bookmarklets (28 total)

From well-known modern classics to original "nice to have" ideas — mostly built with browser-native APIs only.

### ✏️ Text & Editing

| Name | What it does |
|------|--------------|
| Copy Markdown Link | Copy the current page as `[title](URL)` |
| Character Count | Show the page's pure character count (spaces excluded) |
| Toggle Design Mode | Make the page's text directly editable |
| Reading Time & Word Count | Estimate reading time from the body text |
| Copy as Markdown Quote | Copy the selection with `> ...` prefix |

### 🚀 Browsing

| Name | What it does |
|------|--------------|
| Video Playback Speed | Change YouTube etc. playback to any rate |
| Reveal Password | Temporarily reveal passwords hidden behind `●●●` |
| Force Dark Mode | Force any site into dark mode (toggle) |
| Reader Mode | Hide ads and chrome, keep just the article |
| Unlock Copy & Right-Click | Re-enable selection on copy-protected sites |
| Focus Reading | Dim everything but the viewport center for focused reading |

### 🔍 Research

| Name | What it does |
|------|--------------|
| Translate Selection with DeepL | Open the selected text in DeepL in a new tab |
| Extract All Links | List every `href` on the page as text |
| Open in Wayback Machine | Open the current URL's archived version on archive.org |
| Read Aloud | Read the selected text using the browser's built-in voice |
| OGP Preview | Read `og:*` meta and render a social-card preview |
| Regex Highlight | Highlight matches of an entered regular expression |

### 🛠 Utility

| Name | What it does |
|------|--------------|
| Open on Phone (QR) | Generate a QR code of the current URL to send to your phone |
| Kill Fixed Bars | Hide sticky/fixed headers and footers that follow scrolling |
| X-Ray Mode | Outline every element to reveal layout issues |
| List All Images | Show page images in a grid and download in bulk |
| Disable All CSS | Strip styles to inspect raw HTML |
| Heading Outline | Show the `h1`–`h6` tree to grasp page structure |
| Flag Images Without alt | Red-outline images missing `alt` (a11y check) |
| Contrast Checker | Show the WCAG contrast ratio of a selected element |
| Fill Dummy Form Data | Bulk-fill name/email/tel fields with dummy values |
| Share Scroll Position | Encode the current scroll position into a shareable URL |
| Page Weight & DOM Count | Show resource count / transfer size / DOM node count |

## 🚀 Usage

1. Open the gallery site at <https://bookmarklet-kit.riumu.net>
2. **Drag & drop** the bookmarklet button onto your bookmarks bar
3. Press the bookmark on any page to run it

> ⚠️ Clicking the button does nothing. **Drag** it to your bookmarks to install.

### Install notes

- **Firefox 98+**: dragging a `javascript:` link shows a confirmation dialog (by design). Just confirm to add it.
- **Mobile (iOS / Android)**: dragging isn't possible — use each card's "Copy code", create a bookmark, and paste it into the URL field.
- **Some sites won't run it**: items tagged "external" may be blocked on strict-CSP sites like GitHub or X.

## 🌱 Continuously Growing

This gallery is a project meant to **grow over time** — handy ideas and "nice to have" features get added as they come up. Ideas are collected in the "Idea Pool" of [`docs/spec.md`](./docs/spec.md) and shipped to the gallery once implemented. Definitions are data-driven (append one object to one file), so adding new bookmarklets is cheap.

## 🛠 Local Development

There is no build step. Just serve the repo root with any static server.

```bash
# e.g. Python's built-in server
python3 -m http.server 8000
# → open http://localhost:8000
```

Adding or editing a bookmarklet only requires changing one definition file (`bookmarklets.js`); cards are generated automatically. See [`docs/spec.md`](./docs/spec.md) for details.

## 📄 License

[MIT](./LICENSE)