Skip to content

SELECTOR_HELPER_QUICKSTART.md

Latest commit

 

History

History
97 lines (69 loc) · 1.88 KB

SELECTOR_HELPER_QUICKSTART.md

File metadata and controls

97 lines (69 loc) · 1.88 KB

🚀 Selector Helper - Quick Start (5 Minutes)

Get started finding CSS selectors in just 5 minutes!

Step 1: Install (2 minutes)

1. Open Chrome
2. Go to: chrome://extensions/
3. Turn ON "Developer mode" (top right)
4. Click "Load unpacked"
5. Select folder: scripts/devtools/extension/
6. Done! ✅

Step 2: Use (1 minute)

1. Go to any novel website
2. Click the IReader icon in toolbar
3. Drag a box around what you want
4. Look for ✓ (green checkmark)
5. Click 📋 to copy
6. Done! ✅

Step 3: Understand (2 minutes)

What the symbols mean:

See This Means Use It?
✓ Green Perfect match! ✅ YES
~ Yellow OK match ⚠️ Maybe
• Gray Too many matches ❌ No

What the buttons do:

Button Does
👁 Shows what text it finds
🎯 Highlights elements on page
📋 Copies the selector

That's It! 🎉

You now know how to find CSS selectors.

For more details: Read SELECTOR_HELPER_GUIDE.md

Common Tasks

Find novel title selector:

  1. Go to a novel detail page
  2. Click extension → drag around the title
  3. Click "Title" hint button
  4. Copy the ✓ selector

Find chapter content selector:

  1. Go to a chapter page
  2. Click extension → drag around the text
  3. Click "Content" hint button
  4. Copy the ✓ selector

Find novel list selector:

  1. Go to a browse/latest page
  2. Click extension → drag around ONE novel card
  3. Copy the ✓ selector for the card container

Keyboard Shortcuts

Key Action
ESC Cancel/Close
Click icon Start selection

Troubleshooting

Problem Solution
Nothing happens Refresh page, try again
No selectors found Select a larger area
Wrong results Click "Select Again"