Skip to content

Commit 300c2d6

Browse files
JOHNJOHN
JOHN
authored and
JOHN
committed
Fix annotations defaulting to enabled and ensure proper initialization
- Fix annotation setting to default to true if never set - Initialize storage with true if annotationsEnabled is undefined - Respect explicit false but default to enabled for new installs - Add documentation for enabling annotations Fixes issue where annotations were disabled and button didn't appear
1 parent e33ee73 commit 300c2d6

17 files changed

+720
-3
lines changed

‎CURSOR_MCP_CONFIG.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Cursor MCP Configuration for chrome-devtools-mcp
2+
3+
## Where to Find the Config
4+
5+
In Cursor, the MCP configuration is typically in one of these locations:
6+
7+
1. **Cursor Settings → MCP** (GUI)
8+
2. **Config file**: Usually at `~/.cursor/mcp.json` or in your workspace settings
9+
10+
## How to Add the Extension Auto-Load
11+
12+
### Method 1: Via Cursor Settings GUI
13+
14+
1. Open **Cursor Settings** (Cmd+, or Ctrl+,)
15+
2. Search for "MCP" or go to **MCP** section
16+
3. Find your `chrome-devtools` server configuration
17+
4. Edit the `args` array to add the extension loading arguments
18+
19+
### Method 2: Edit Config File Directly
20+
21+
The config should look like this:
22+
23+
```json
24+
{
25+
"mcpServers": {
26+
"chrome-devtools": {
27+
"command": "npx",
28+
"args": [
29+
"chrome-devtools-mcp@latest",
30+
"--chromeArg=--load-extension=/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist",
31+
"--chromeArg=--disable-extensions-except=/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist"
32+
]
33+
}
34+
}
35+
}
36+
```
37+
38+
**Important:** The path has spaces, so you might need to:
39+
- Use quotes around the path
40+
- Or escape spaces
41+
- Or use a shorter path with a symlink
42+
43+
### Method 3: Use Absolute Path with Quotes
44+
45+
If spaces cause issues, try:
46+
47+
```json
48+
{
49+
"mcpServers": {
50+
"chrome-devtools": {
51+
"command": "npx",
52+
"args": [
53+
"chrome-devtools-mcp@latest",
54+
"--chromeArg=--load-extension=/Users/john/Library/Mobile\\ Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist",
55+
"--chromeArg=--disable-extensions-except=/Users/john/Library/Mobile\\ Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist"
56+
]
57+
}
58+
}
59+
}
60+
```
61+
62+
### Method 4: Create a Symlink (Easier Path)
63+
64+
Create a symlink without spaces:
65+
66+
```bash
67+
ln -s "/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist" ~/graphiti-extension
68+
```
69+
70+
Then use:
71+
```json
72+
"--chromeArg=--load-extension=$HOME/graphiti-extension"
73+
```
74+
75+
## After Updating Config
76+
77+
1. **Restart Cursor** (or reload MCP servers)
78+
2. The extension should auto-load when chrome-devtools-mcp starts
79+
3. I can then test it immediately!
80+
81+
## Alternative: Load Manually
82+
83+
If config editing is tricky, you can also:
84+
1. Let chrome-devtools-mcp start Chrome
85+
2. Manually go to `chrome://extensions/` in that Chrome window
86+
3. Load the extension from there
87+
4. Then I can test it
88+
89+
Let me know which method you prefer!

‎DEBUG_EXTENSION_LOAD.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Debugging Extension Load Issue
2+
3+
## Problem
4+
Extension says it's loaded but doesn't appear in chrome://extensions/ and content script doesn't run.
5+
6+
## Possible Causes
7+
8+
1. **Different Chrome Profile**: chrome-devtools-mcp might be using a different user data directory than your regular Chrome
9+
2. **Extension Failed to Load**: Extension loaded but immediately failed due to an error
10+
3. **Manifest Error**: There's a subtle error in manifest.json preventing load
11+
4. **File Permissions**: Extension files might not be readable
12+
13+
## Verification Steps
14+
15+
### Check Extension Files
16+
```bash
17+
ls -la /Users/john/graphiti-extension/
18+
# Should show: manifest.json, content.js, background.js, icons/
19+
```
20+
21+
### Check Manifest
22+
```bash
23+
cat /Users/john/graphiti-extension/manifest.json | python3 -m json.tool
24+
# Should be valid JSON
25+
```
26+
27+
### Manual Test
28+
1. Open Chrome (regular, not MCP-controlled)
29+
2. Go to chrome://extensions/
30+
3. Enable Developer mode
31+
4. Click "Load unpacked"
32+
5. Select `/Users/john/graphiti-extension`
33+
6. Check if it appears and if there are any error messages
34+
35+
### Check for Errors
36+
- Look for red error badges on extension card
37+
- Click "Errors" button if visible
38+
- Check browser console for extension errors
39+
40+
## Next Steps
41+
42+
If extension loads in regular Chrome but not MCP Chrome:
43+
- MCP Chrome uses a different profile
44+
- Need to load extension in MCP's Chrome window specifically
45+
46+
If extension doesn't load in either:
47+
- Check manifest.json for errors
48+
- Verify all files are present
49+
- Check file permissions

‎ENABLE_ANNOTATIONS.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Enable Annotations - Quick Fix
2+
3+
## The Problem
4+
5+
Your annotations are **disabled** in the extension. The toggle in the popup is OFF.
6+
7+
## Quick Fix
8+
9+
**Option 1: Toggle in Extension Popup**
10+
1. Open the Graphiti extension popup
11+
2. Find the "Annotations" toggle
12+
3. **Turn it ON** (toggle to the right/enabled)
13+
14+
**Option 2: Reset via Console**
15+
1. Open any webpage
16+
2. Open DevTools Console (F12)
17+
3. Run:
18+
```javascript
19+
chrome.storage.local.set({ annotationsEnabled: true }, () => {
20+
console.log('Annotations enabled!');
21+
location.reload();
22+
});
23+
```
24+
25+
**Option 3: Keyboard Shortcut**
26+
- Press `Alt+Shift+A` (Mac: `Option+Shift+A`) to toggle annotations on/off
27+
28+
## After Enabling
29+
30+
1. **Reload the webpage** you're testing on
31+
2. **Select some text**
32+
3. **Annotation button should appear** near your selection
33+
34+
## Why This Happened
35+
36+
The extension saves your preference. If you toggled it off before, it stays off. The code now defaults to enabled if never set, but if you explicitly disabled it, it remembers that.
37+
38+
## Verify It's Working
39+
40+
After enabling:
41+
1. Select text on any webpage
42+
2. Purple "Add Annotation" button should appear
43+
3. Click it to create annotation

‎LOAD_EXTENSION_FOR_MCP.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Loading Extension for chrome-devtools-mcp Testing
2+
3+
## Current Status
4+
5+
I can see chrome-devtools-mcp is working! However, the extension isn't loaded in the Chrome instance that MCP is controlling.
6+
7+
## How to Load Extension for Testing
8+
9+
### Option 1: Load Extension Manually in MCP's Chrome
10+
11+
1. **Find the Chrome window** that chrome-devtools-mcp opened
12+
2. **Go to** `chrome://extensions/`
13+
3. **Enable Developer mode** (toggle in top-right)
14+
4. **Click "Load unpacked"**
15+
5. **Select your extension folder**: `/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist`
16+
6. **Extension should load!**
17+
18+
### Option 2: Configure MCP to Auto-Load Extension
19+
20+
Update your Cursor MCP config to automatically load the extension:
21+
22+
```json
23+
{
24+
"mcpServers": {
25+
"chrome-devtools": {
26+
"command": "npx",
27+
"args": [
28+
"chrome-devtools-mcp@latest",
29+
"--chromeArg=--load-extension=/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist",
30+
"--chromeArg=--disable-extensions-except=/Users/john/Library/Mobile Documents/com~apple~CloudDocs/vibes/graphiti-standalone/dist"
31+
]
32+
}
33+
}
34+
}
35+
```
36+
37+
**Note:** You may need to escape spaces in the path or use the absolute path.
38+
39+
## Once Extension is Loaded
40+
41+
I can then:
42+
1. ✅ Navigate to webpages
43+
2. ✅ Select text
44+
3. ✅ Verify annotation button appears
45+
4. ✅ Take screenshots
46+
5. ✅ Check console for errors
47+
6. ✅ Test the full flow
48+
49+
## Test It Now
50+
51+
After loading the extension, I can test it by:
52+
- Navigating to example.com
53+
- Selecting text
54+
- Checking if the button appears
55+
- Taking a screenshot to show you
56+
57+
Let me know when the extension is loaded and I'll test it!

‎MCP_MANUAL_LOAD.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# MCP Testing - Manual Extension Load
2+
3+
## Current Situation
4+
5+
Chrome 137+ removed `--load-extension` flag, and CDP `Extensions.loadUnpacked` requires special setup that chrome-devtools-mcp doesn't easily support.
6+
7+
## Working Solution: Manual Load + MCP Testing
8+
9+
1. **Start MCP Chrome:**
10+
- Restart Cursor (MCP will start Chrome automatically)
11+
- Chrome window opens via chrome-devtools-mcp
12+
13+
2. **Manually Load Extension:**
14+
- In the MCP Chrome window, go to `chrome://extensions/`
15+
- Enable "Developer mode"
16+
- Click "Load unpacked"
17+
- Select `/tmp/graphiti-test`
18+
19+
3. **I Test It:**
20+
- Once loaded, I can navigate pages
21+
- Select text
22+
- Verify annotation button appears
23+
- Take screenshots
24+
25+
## Why This Works
26+
27+
- MCP tools work for testing (navigate, evaluate, screenshot)
28+
- Extension just needs to be loaded once manually
29+
- After that, I can test everything programmatically
30+
31+
## Quick Test After Load
32+
33+
Once you load it, tell me and I'll:
34+
1. Navigate to example.com
35+
2. Select text
36+
3. Check if button appears
37+
4. Take screenshot showing it works
38+
39+
This is the most reliable approach until chrome-devtools-mcp adds better extension loading support.

‎MCP_SETUP_FIXED.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Fixed MCP Configuration for Extension Testing
2+
3+
## The Problem
4+
5+
Chrome 137+ **removed the `--load-extension` flag** for security reasons. This is why the extension wasn't loading automatically.
6+
7+
## Solution Options
8+
9+
### Option 1: Use Chrome Canary (Recommended)
10+
11+
Chrome Canary still supports `--load-extension`. Updated config:
12+
13+
```json
14+
{
15+
"mcpServers": {
16+
"chrome-devtools": {
17+
"command": "npx",
18+
"args": [
19+
"chrome-devtools-mcp@latest",
20+
"--channel=canary",
21+
"--chromeArg=--load-extension=/tmp/graphiti-test",
22+
"--chromeArg=--disable-extensions-except=/tmp/graphiti-test"
23+
]
24+
}
25+
}
26+
}
27+
```
28+
29+
**After updating:**
30+
1. Restart Cursor
31+
2. Extension should auto-load in Chrome Canary
32+
3. I can then test it
33+
34+
### Option 2: Use CDP Extensions.loadUnpacked
35+
36+
If Canary doesn't work, we can load the extension programmatically via Chrome DevTools Protocol after Chrome starts.
37+
38+
### Option 3: Manual Load (Current Workaround)
39+
40+
1. Let chrome-devtools-mcp start Chrome
41+
2. Manually go to `chrome://extensions/` in that Chrome window
42+
3. Load `/tmp/graphiti-test`
43+
4. Then I can test it
44+
45+
## Current Status
46+
47+
- ✅ Config updated to use Chrome Canary
48+
- ✅ Extension files ready at `/tmp/graphiti-test`
49+
- ⏳ Waiting for Cursor restart to test
50+
51+
## Next Steps
52+
53+
After restart, I'll:
54+
1. Check if extension loads automatically
55+
2. Navigate to test page
56+
3. Select text and verify annotation button
57+
4. Take screenshot showing it works

‎MCP_VS_PLAYWRIGHT.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# MCP vs Playwright for Extension Testing
2+
3+
## The Reality
4+
5+
After extensive testing, here's what we've learned:
6+
7+
### chrome-devtools-mcp Limitations
8+
9+
1. **Extension Loading:**
10+
- Chrome 137+ removed `--load-extension` flag
11+
- CDP `Extensions.loadUnpacked` requires `--remote-debugging-pipe` (not just port)
12+
- chrome-devtools-mcp doesn't easily support this
13+
- Manual loading doesn't persist or work reliably
14+
15+
2. **Content Script Testing:**
16+
- Even when extension loads, content scripts may not run properly
17+
- MCP evaluates scripts in page context, not content script context
18+
- Can't easily verify content script execution
19+
20+
### Playwright Works Better
21+
22+
Our Playwright tests **actually work**:
23+
- ✅ Extension loads correctly
24+
- ✅ Content script runs
25+
- ✅ Annotation button appears
26+
- ✅ We can take screenshots
27+
- ✅ Tests are automated and reliable
28+
29+
## Recommendation
30+
31+
**Use Playwright for extension testing**, not chrome-devtools-mcp.
32+
33+
Playwright:
34+
- Properly loads extensions via `--load-extension` (uses Chromium)
35+
- Content scripts run correctly
36+
- Can test full user flows
37+
- Automated and repeatable
38+
39+
chrome-devtools-mcp:
40+
- Better for general web testing
41+
- Not designed for extension testing
42+
- Extension loading is problematic
43+
- Content script verification is difficult
44+
45+
## Current Working Solution
46+
47+
We have working Playwright tests that:
48+
1. Load the extension
49+
2. Test annotation button
50+
3. Take screenshots
51+
4. Verify functionality
52+
53+
This is more reliable than trying to force chrome-devtools-mcp to work with extensions.

0 commit comments

Comments
 (0)