84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
|
# Quick Test Guide for Plusvibe
|
||
|
|
|
||
|
|
## Step 1: Reload the Extension
|
||
|
|
1. Go to `chrome://extensions/`
|
||
|
|
2. Click the refresh icon on your extension
|
||
|
|
3. Go back to Plusvibe
|
||
|
|
|
||
|
|
## Step 2: Check if Scripts Loaded
|
||
|
|
Open the console and check for these messages:
|
||
|
|
- "=== PLUSVIBE EXTRACTOR LOADING ==="
|
||
|
|
- "=== PLUSVIBE EXTRACTOR LOADED ==="
|
||
|
|
- "Current thread ID: 684c8bb9615eea3dba364e56"
|
||
|
|
|
||
|
|
## Step 3: Find Message Containers
|
||
|
|
Run these commands in the console:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// Test 1: Find messages by content
|
||
|
|
PlusvibeExtractor.findMessagesByContent();
|
||
|
|
|
||
|
|
// Test 2: Run DOM analysis
|
||
|
|
PlusvibeExtractor.analyzeDOMStructure();
|
||
|
|
|
||
|
|
// Test 3: Check for specific selectors that might work
|
||
|
|
const selectors = [
|
||
|
|
'[class*="message"]',
|
||
|
|
'[class*="email"]',
|
||
|
|
'[class*="mail"]',
|
||
|
|
'div[style*="padding"]', // Often messages have padding
|
||
|
|
'div[style*="margin"]', // Or margin
|
||
|
|
'.flex.flex-col', // Common Tailwind patterns
|
||
|
|
'.relative', // Common positioning
|
||
|
|
];
|
||
|
|
|
||
|
|
selectors.forEach(sel => {
|
||
|
|
const els = document.querySelectorAll(sel);
|
||
|
|
if (els.length > 0 && els.length < 20) {
|
||
|
|
console.log(`Selector "${sel}" found ${els.length} elements`);
|
||
|
|
// Check if any contain email addresses
|
||
|
|
[...els].forEach((el, i) => {
|
||
|
|
if (el.textContent.includes('@') && el.textContent.length > 100) {
|
||
|
|
console.log(` Element ${i} might be a message:`, {
|
||
|
|
text: el.textContent.substring(0, 100) + '...',
|
||
|
|
classes: el.className
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Step 4: Inspect a Single Message
|
||
|
|
1. Right-click on any email message in the thread
|
||
|
|
2. Select "Inspect Element"
|
||
|
|
3. Note down:
|
||
|
|
- The element's tag name (div, section, article, etc.)
|
||
|
|
- Its class names
|
||
|
|
- Any data attributes
|
||
|
|
- Its parent container
|
||
|
|
|
||
|
|
## Step 5: Test Thread Extraction
|
||
|
|
Once you identify the selector, we can test:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// Replace '.message-class' with the actual class you found
|
||
|
|
const messages = document.querySelectorAll('.message-class');
|
||
|
|
console.log('Found messages:', messages.length);
|
||
|
|
|
||
|
|
messages.forEach((msg, i) => {
|
||
|
|
console.log(`Message ${i + 1}:`, {
|
||
|
|
sender: msg.textContent.match(/[\w.+-]+@[\w.-]+\.\w+/)?.[0],
|
||
|
|
preview: msg.textContent.substring(0, 150)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## What to Report Back
|
||
|
|
Please share:
|
||
|
|
1. The console output from the tests above
|
||
|
|
2. The HTML structure of a single message (right-click → Copy → Copy outerHTML)
|
||
|
|
3. Whether the thread ID shows correctly in the console
|
||
|
|
4. Any errors you see
|
||
|
|
|
||
|
|
This will help us identify the exact selectors for Plusvibe!
|