Repository navigation
Add Vercel-style developer tools browser toolbar - #6
Merged
Merged
Conversation
Reviewer's GuideThe PR redesigns the extension toolbar as a compact Vercel-style developer interface, generates a searchable categorized tool menu, and modernizes actions, keyboard controls, drag positioning, and browser-storage persistence across both source and built extension assets. Sequence diagram for toolbar actions and tool discoverysequenceDiagram
actor User
participant Toolbar
participant Storage as BrowserStorage
participant Runtime as ExtensionRuntime
participant Tools as DevToolsSite
User->>Toolbar: click menuBtn
Toolbar->>Toolbar: renderTools(query)
User->>Toolbar: enter search query
Toolbar->>Toolbar: renderTools(query)
User->>Toolbar: select tool item
Toolbar->>Tools: openTool(path)
User->>Toolbar: click inspectBtn or screenshotBtn
Toolbar->>Runtime: sendMessage(action)
User->>Toolbar: click hideBtn or press Escape
Toolbar->>Storage: set(toolbarHidden: true)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configuration
📒 Files selected for processing (4)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 4 security issues, and 15 other issues
Security issues:
- User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
toolSections.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
toolSections.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link)
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="extension/toolbar.html" line_range="45" />
<code_context>
+ <aside class="it-toolbar" id="toolbar" aria-label="DevTools toolbar">
+ <span class="status-indicator" id="statusIndicator" aria-label="Toolbar active"></span>
+ <span class="drag-handle" id="dragHandle" aria-hidden="true"></span>
+ <button class="toolbar-btn" id="menuBtn" type="button" aria-label="Open DevTools menu" aria-expanded="false">
+ <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></svg><span class="tooltip">Tools</span>
</button>
</code_context>
<issue_to_address>
**Toolbar controls never receive clicks**
The content script sets the containing iframe’s `pointer-events` to `none` in `extension/content-script.js:177-185`, so clicks pass through the iframe instead of reaching these buttons. The toolbar appears, but its menu, search, inspect, screenshot, and hide controls cannot be used.
Allow pointer events on the toolbar iframe while keeping the iframe document background transparent or otherwise preventing it from blocking the page.
</issue_to_address>
### Comment 2
<location path="extension/toolbar.js" line_range="48" />
<code_context>
+function sendMessage(action) { browserAPI.runtime.sendMessage({ action }).catch(() => {}); }
+function openMenu(focus = false) { isMenuOpen = true; menuPanel.classList.add('open'); menuBtn.classList.add('active'); menuBtn.setAttribute('aria-expanded', 'true'); if (focus) menuSearch.focus(); }
+function closeMenu() { isMenuOpen = false; menuPanel.classList.remove('open'); menuBtn.classList.remove('active'); menuBtn.setAttribute('aria-expanded', 'false'); menuSearch.value = ''; renderTools(); }
+function hideToolbar() { toolbar.style.display = 'none'; browserAPI.storage.local.set({ toolbarHidden: true }); }
+function wakeUp() { isSleeping = false; toolbar.classList.remove('sleeping'); statusIndicator.classList.remove('sleeping'); }
+function sleep() { isSleeping = true; toolbar.classList.add('sleeping'); statusIndicator.classList.add('sleeping'); }
</code_context>
<issue_to_address>
**Toolbar stays hidden everywhere**
When the user hides the toolbar, `hideToolbar()` persists `toolbarHidden: true`, and startup hides every later toolbar instance when it reads that value. Nothing clears the flag or restores the toolbar, so it remains unavailable on subsequent pages.
Scope the hidden state to the current page or provide a restore action that clears the stored flag and shows the toolbar again.
Also at `extension/toolbar.js:27`, `extension/toolbar.js:86-87`.
</issue_to_address>
### Comment 3
<location path="extension/toolbar.js" line_range="85-86" />
<code_context>
+document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; const rect = toolbar.getBoundingClientRect(); browserAPI.storage.local.set({ toolbarPosition: { x: rect.left, y: rect.top } }); });
+
+browserAPI.storage.local.get(['toolbarPosition', 'toolbarHidden'], (result) => {
+ if (result.toolbarPosition) { toolbar.style.right = 'auto'; toolbar.style.transform = 'none'; toolbar.style.left = `${result.toolbarPosition.x}px`; toolbar.style.top = `${result.toolbarPosition.y}px`; }
+ if (result.toolbarHidden) toolbar.style.display = 'none';
+});
</code_context>
<issue_to_address>
**Saved state fails in Firefox**
When the toolbar runs in Firefox, `browserAPI.storage.local.get` receives a callback, but Firefox’s native `browser.*` storage API is promise-based and rejects that argument. The saved position and hidden state are not applied.
Read the storage result using the promise-based API supported by Firefox.
Also at `extension/toolbar.js:87`.
</issue_to_address>
### Comment 4
<location path="extension/toolbar.js" line_range="56" />
<code_context>
+renderTools();
+menuBtn.addEventListener('click', () => (isMenuOpen ? closeMenu() : openMenu()));
+document.getElementById('searchBtn').addEventListener('click', () => openMenu(true));
+document.getElementById('inspectBtn').addEventListener('click', () => sendMessage('inspectElement'));
+document.getElementById('screenshotBtn').addEventListener('click', () => sendMessage('takeScreenshot'));
+document.getElementById('hideBtn').addEventListener('click', hideToolbar);
</code_context>
<issue_to_address>
**Inspect never activates**
When the user selects Inspect from the toolbar, `sendMessage('inspectElement')` sends to extension runtime listeners, not the page’s content script, and the background does not forward the action. The content script’s inspection handler never runs, so the user cannot inspect elements.
Forward the inspect action to the page’s content script and handle it there.
Also at `extension/toolbar.js:66`.
</issue_to_address>
### Comment 5
<location path="extension/toolbar.js" line_range="57" />
<code_context>
+menuBtn.addEventListener('click', () => (isMenuOpen ? closeMenu() : openMenu()));
+document.getElementById('searchBtn').addEventListener('click', () => openMenu(true));
+document.getElementById('inspectBtn').addEventListener('click', () => sendMessage('inspectElement'));
+document.getElementById('screenshotBtn').addEventListener('click', () => sendMessage('takeScreenshot'));
+document.getElementById('hideBtn').addEventListener('click', hideToolbar);
+menuSearch.addEventListener('input', (event) => renderTools(event.target.value));
</code_context>
<issue_to_address>
**Screenshot is never delivered**
When the user activates the screenshot action and capture succeeds, `sendMessage('takeScreenshot')` discards the response containing the screenshot data URL. The toolbar does not download or display the image, so the user gets no screenshot.
Handle the screenshot response and download or display its data URL.
Also at `extension/toolbar.js:56`, `extension/toolbar.js:58`.
</issue_to_address>
### Comment 6
<location path="extension/toolbar.js" line_range="68" />
<code_context>
+ if (id === 'inspect') return sendMessage('inspectElement');
+ if (id === 'screenshot') return sendMessage('takeScreenshot');
+ if (id === 'hide') return hideToolbar();
+ if (id === 'preferences') return browserAPI.runtime.sendMessage({ action: 'openOptions' });
+ if (item.dataset.path !== '') openTool(item.dataset.path);
+ else openTool('');
</code_context>
<issue_to_address>
**Preferences never open**
When the user selects Preferences, the toolbar sends `openOptions`, but no background handler opens the options page, and the manifest does not register one. The user remains on the current page instead of reaching settings.
Register the options page and open it through a supported options-page path.
</issue_to_address>
### Comment 7
<location path="extension/toolbar.js" line_range="75-77" />
<code_context>
+document.addEventListener('click', (event) => { if (!toolbar.contains(event.target)) closeMenu(); });
+document.addEventListener('keydown', (event) => {
+ const key = event.key.toLowerCase();
+ if ((event.ctrlKey || event.metaKey) && key === 'k') { event.preventDefault(); openMenu(true); }
+ else if (key === '/' && document.activeElement !== menuSearch) { event.preventDefault(); openMenu(true); }
+ else if (key === 'escape') { if (isMenuOpen) closeMenu(); else hideToolbar(); }
+});
+
</code_context>
<issue_to_address>
**Saved shortcuts do not work**
When the user changes shortcuts in Options, the key handler recognizes only hard-coded Ctrl/Meta+K, `/`, and Escape, and does not load the saved shortcut map or handle configured tool shortcuts. The menu also shows fixed shortcut labels, so custom bindings do not work and hints can be wrong.
Load the saved shortcut map and use it both to handle toolbar actions and render shortcut labels.
Also at `extension/toolbar.js:11-27`.
</issue_to_address>
### Comment 8
<location path="extension/toolbar.js" line_range="66" />
<code_context>
+ const id = item.dataset.id;
+ if (id === 'search') return openMenu(true);
+ if (id === 'inspect') return sendMessage('inspectElement');
+ if (id === 'screenshot') return sendMessage('takeScreenshot');
+ if (id === 'hide') return hideToolbar();
+ if (id === 'preferences') return browserAPI.runtime.sendMessage({ action: 'openOptions' });
</code_context>
<issue_to_address>
**Menu screenshot includes the open menu**
When a user chooses Capture screenshot from the open menu, the screenshot menu action sends `takeScreenshot` without closing the menu, and the background captures the current visible tab. The captured image therefore includes the toolbar menu covering the page instead of just the unobstructed view.
Close the menu before sending the screenshot request.
</issue_to_address>
### Comment 9
<location path="extension/toolbar.js" line_range="85" />
<code_context>
+document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; const rect = toolbar.getBoundingClientRect(); browserAPI.storage.local.set({ toolbarPosition: { x: rect.left, y: rect.top } }); });
+
+browserAPI.storage.local.get(['toolbarPosition', 'toolbarHidden'], (result) => {
+ if (result.toolbarPosition) { toolbar.style.right = 'auto'; toolbar.style.transform = 'none'; toolbar.style.left = `${result.toolbarPosition.x}px`; toolbar.style.top = `${result.toolbarPosition.y}px`; }
+ if (result.toolbarHidden) toolbar.style.display = 'none';
+});
</code_context>
<issue_to_address>
**Toolbar can be offscreen**
When a saved toolbar position is restored in a smaller viewport, startup applies saved coordinates without checking the current viewport. The toolbar can end up partly or entirely offscreen, leaving the user unable to reach or drag it back.
Clamp the restored coordinates to the current viewport before applying them.
Also at `extension/toolbar.js:82`.
</issue_to_address>
### Comment 10
<location path="extension/toolbar.js" line_range="85" />
<code_context>
+document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; const rect = toolbar.getBoundingClientRect(); browserAPI.storage.local.set({ toolbarPosition: { x: rect.left, y: rect.top } }); });
+
+browserAPI.storage.local.get(['toolbarPosition', 'toolbarHidden'], (result) => {
+ if (result.toolbarPosition) { toolbar.style.right = 'auto'; toolbar.style.transform = 'none'; toolbar.style.left = `${result.toolbarPosition.x}px`; toolbar.style.top = `${result.toolbarPosition.y}px`; }
+ if (result.toolbarHidden) toolbar.style.display = 'none';
+});
</code_context>
<issue_to_address>
**Startup overrides a new position**
When the user drags the toolbar before the initial storage read completes, the storage callback applies the older saved coordinates after the drag has saved and displayed a new position. The toolbar jumps back to the stale coordinates.
Prevent the initial position read from overriding a position changed by a drag.
Also at `extension/toolbar.js:82`.
</issue_to_address>
### Comment 11
<location path="extension/toolbar.js" line_range="85" />
<code_context>
+document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; const rect = toolbar.getBoundingClientRect(); browserAPI.storage.local.set({ toolbarPosition: { x: rect.left, y: rect.top } }); });
+
+browserAPI.storage.local.get(['toolbarPosition', 'toolbarHidden'], (result) => {
+ if (result.toolbarPosition) { toolbar.style.right = 'auto'; toolbar.style.transform = 'none'; toolbar.style.left = `${result.toolbarPosition.x}px`; toolbar.style.top = `${result.toolbarPosition.y}px`; }
+ if (result.toolbarHidden) toolbar.style.display = 'none';
+});
</code_context>
<issue_to_address>
**Saved placement resets**
When an upgraded installation has a saved `it-toolbar-position` value, initialization reads `toolbarPosition` from extension storage instead of the legacy `it-toolbar-position` local-storage key. Existing users’ saved coordinates are not migrated, so the toolbar returns to its default position.
Read and migrate the legacy saved position when no extension-storage position exists.
</issue_to_address>
### Comment 12
<location path="extension/toolbar.js" line_range="20" />
<code_context>
+ { label: 'Base64 Converter', description: 'Encode and decode Base64', icon: '64', path: 'base64-string-converter' },
+ { label: 'Regex Tester', description: 'Build and test regular expressions', icon: '.*', path: 'regex-tester' },
+ { label: 'Color Converter', description: 'Convert colors between formats', icon: '◉', path: 'color-converter' },
+ { label: 'JWT Decoder', description: 'Inspect JSON Web Tokens', icon: 'jwt', path: 'jwt-decoder' },
+ ]},
+ { category: 'All tools', items: [
</code_context>
<issue_to_address>
**JWT link opens missing page**
When the user selects JWT Decoder, the JWT entry uses the `jwt-decoder` path, but the application registers the tool at `/jwt-parser` and has no redirect for `/jwt-decoder`. The user opens a missing route instead of the JWT tool.
Change the entry’s path to the registered `/jwt-parser` route.
</issue_to_address>
### Comment 13
<location path="extension/toolbar.html" line_range="22" />
<code_context>
+ .menu-panel { position: absolute; right: calc(100% + 9px); top: -1px; width: 318px; max-height: min(560px, calc(100vh - 32px)); overflow: hidden auto; padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.36); opacity: 0; visibility: hidden; transform: translateX(7px); transition: opacity .16s, transform .16s, visibility .16s; }
</code_context>
<issue_to_address>
**Menu bottom is clipped**
When the menu opens on a viewport too short to fit the panel below the toolbar, the menu is positioned beside a toolbar centered vertically, but its height limit is based on the whole viewport rather than the space below the menu’s top edge. On shorter viewports, the panel extends beyond the iframe’s clipped viewport, leaving its lower entries inaccessible even when the panel is scrolled.
Position the menu above the toolbar when needed, or constrain its height to the available space between its top edge and the viewport bottom.
</issue_to_address>
### Comment 14
<location path="extension/toolbar.js" line_range="11-25" />
<code_context>
+ { id: 'search', label: 'Search all tools', description: 'Find a utility by name', icon: '⌕', shortcut: '/' },
</code_context>
<issue_to_address>
**Search omits most tools**
`renderTools` filters only the hard-coded `tools` array, which contains five utility links and a link to the site rather than the full tool library. Searching for tools outside that subset returns no match despite the “Search all tools” label.
Populate the search menu from the full tool catalog or change the UI to accurately describe the limited list.
</issue_to_address>
### Comment 15
<location path="extension/toolbar.js" line_range="11-25" />
<code_context>
+ { id: 'search', label: 'Search all tools', description: 'Find a utility by name', icon: '⌕', shortcut: '/' },
</code_context>
<issue_to_address>
**Environment information is absent**
The toolbar renders only quick actions, tool links, and settings; it exposes no page or environment information. Users get utility links but not the environment information promised in the description.
Add a toolbar section that gathers and displays the promised page or environment information.
</issue_to_address>
### Comment 16
<location path="dist-extension/toolbar.js" line_range="42" />
<code_context>
toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>';
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 17
<location path="dist-extension/toolbar.js" line_range="42" />
<code_context>
toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>';
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `toolSections.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 18
<location path="extension/toolbar.js" line_range="42" />
<code_context>
toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>';
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 19
<location path="extension/toolbar.js" line_range="42" />
<code_context>
toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>';
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `toolSections.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>Sourcery assessment
Approval pending. 19 findings to address first.
Blocking findings: extension/toolbar.html:45, extension/toolbar.js:48, extension/toolbar.js:86, extension/toolbar.js:56, extension/toolbar.js:57, and 14 more
| <aside class="it-toolbar" id="toolbar" aria-label="DevTools toolbar"> | ||
| <span class="status-indicator" id="statusIndicator" aria-label="Toolbar active"></span> | ||
| <span class="drag-handle" id="dragHandle" aria-hidden="true"></span> | ||
| <button class="toolbar-btn" id="menuBtn" type="button" aria-label="Open DevTools menu" aria-expanded="false"> |
There was a problem hiding this comment.
🟠 High · Toolbar controls never receive clicks
The content script sets the containing iframe’s pointer-events to none in extension/content-script.js:177-185, so clicks pass through the iframe instead of reaching these buttons. The toolbar appears, but its menu, search, inspect, screenshot, and hide controls cannot be used.
Allow pointer events on the toolbar iframe while keeping the iframe document background transparent or otherwise preventing it from blocking the page.
Prompt for AI agents
In `extension/toolbar.html` at line 45:
**Toolbar controls never receive clicks**
The content script sets the containing iframe’s `pointer-events` to `none` in `extension/content-script.js:177-185`, so clicks pass through the iframe instead of reaching these buttons. The toolbar appears, but its menu, search, inspect, screenshot, and hide controls cannot be used.
Allow pointer events on the toolbar iframe while keeping the iframe document background transparent or otherwise preventing it from blocking the page.| function sendMessage(action) { browserAPI.runtime.sendMessage({ action }).catch(() => {}); } | ||
| function openMenu(focus = false) { isMenuOpen = true; menuPanel.classList.add('open'); menuBtn.classList.add('active'); menuBtn.setAttribute('aria-expanded', 'true'); if (focus) menuSearch.focus(); } | ||
| function closeMenu() { isMenuOpen = false; menuPanel.classList.remove('open'); menuBtn.classList.remove('active'); menuBtn.setAttribute('aria-expanded', 'false'); menuSearch.value = ''; renderTools(); } | ||
| function hideToolbar() { toolbar.style.display = 'none'; browserAPI.storage.local.set({ toolbarHidden: true }); } |
There was a problem hiding this comment.
🟠 High · Toolbar stays hidden everywhere
When the user hides the toolbar, hideToolbar() persists toolbarHidden: true, and startup hides every later toolbar instance when it reads that value. Nothing clears the flag or restores the toolbar, so it remains unavailable on subsequent pages.
Scope the hidden state to the current page or provide a restore action that clears the stored flag and shows the toolbar again.
Also at extension/toolbar.js:27, extension/toolbar.js:86-87.
Prompt for AI agents
In `extension/toolbar.js` at line 48:
**Toolbar stays hidden everywhere**
When the user hides the toolbar, `hideToolbar()` persists `toolbarHidden: true`, and startup hides every later toolbar instance when it reads that value. Nothing clears the flag or restores the toolbar, so it remains unavailable on subsequent pages.
Scope the hidden state to the current page or provide a restore action that clears the stored flag and shows the toolbar again.
Also at `extension/toolbar.js:27`, `extension/toolbar.js:86-87`.
Comment on lines
+85
to
+86
| if (result.toolbarPosition) { toolbar.style.right = 'auto'; toolbar.style.transform = 'none'; toolbar.style.left = `${result.toolbarPosition.x}px`; toolbar.style.top = `${result.toolbarPosition.y}px`; } | ||
| if (result.toolbarHidden) toolbar.style.display = 'none'; |
There was a problem hiding this comment.
🟡 Medium · Saved state fails in Firefox
When the toolbar runs in Firefox, browserAPI.storage.local.get receives a callback, but Firefox’s native browser.* storage API is promise-based and rejects that argument. The saved position and hidden state are not applied.
Read the storage result using the promise-based API supported by Firefox.
Also at extension/toolbar.js:87.
Prompt for AI agents
In `extension/toolbar.js` at lines 85-86:
**Saved state fails in Firefox**
When the toolbar runs in Firefox, `browserAPI.storage.local.get` receives a callback, but Firefox’s native `browser.*` storage API is promise-based and rejects that argument. The saved position and hidden state are not applied.
Read the storage result using the promise-based API supported by Firefox.
Also at `extension/toolbar.js:87`.| renderTools(); | ||
| menuBtn.addEventListener('click', () => (isMenuOpen ? closeMenu() : openMenu())); | ||
| document.getElementById('searchBtn').addEventListener('click', () => openMenu(true)); | ||
| document.getElementById('inspectBtn').addEventListener('click', () => sendMessage('inspectElement')); |
There was a problem hiding this comment.
🟠 High · Inspect never activates
When the user selects Inspect from the toolbar, sendMessage('inspectElement') sends to extension runtime listeners, not the page’s content script, and the background does not forward the action. The content script’s inspection handler never runs, so the user cannot inspect elements.
Forward the inspect action to the page’s content script and handle it there.
Also at extension/toolbar.js:66.
Prompt for AI agents
In `extension/toolbar.js` at line 56:
**Inspect never activates**
When the user selects Inspect from the toolbar, `sendMessage('inspectElement')` sends to extension runtime listeners, not the page’s content script, and the background does not forward the action. The content script’s inspection handler never runs, so the user cannot inspect elements.
Forward the inspect action to the page’s content script and handle it there.
Also at `extension/toolbar.js:66`.| menuBtn.addEventListener('click', () => (isMenuOpen ? closeMenu() : openMenu())); | ||
| document.getElementById('searchBtn').addEventListener('click', () => openMenu(true)); | ||
| document.getElementById('inspectBtn').addEventListener('click', () => sendMessage('inspectElement')); | ||
| document.getElementById('screenshotBtn').addEventListener('click', () => sendMessage('takeScreenshot')); |
There was a problem hiding this comment.
🟠 High · Screenshot is never delivered
When the user activates the screenshot action and capture succeeds, sendMessage('takeScreenshot') discards the response containing the screenshot data URL. The toolbar does not download or display the image, so the user gets no screenshot.
Handle the screenshot response and download or display its data URL.
Also at extension/toolbar.js:56, extension/toolbar.js:58.
Prompt for AI agents
In `extension/toolbar.js` at line 57:
**Screenshot is never delivered**
When the user activates the screenshot action and capture succeeds, `sendMessage('takeScreenshot')` discards the response containing the screenshot data URL. The toolbar does not download or display the image, so the user gets no screenshot.
Handle the screenshot response and download or display its data URL.
Also at `extension/toolbar.js:56`, `extension/toolbar.js:58`.
Comment on lines
+11
to
+25
| { id: 'search', label: 'Search all tools', description: 'Find a utility by name', icon: '⌕', shortcut: '/' }, | ||
| { id: 'inspect', label: 'Inspect element', description: 'Pick an element on this page', icon: '↗' }, | ||
| { id: 'screenshot', label: 'Capture screenshot', description: 'Save the current page view', icon: '▣' }, | ||
| ]}, | ||
| { category: 'Popular tools', items: [ | ||
| { label: 'JSON Viewer', description: 'Format and explore JSON', icon: '{}' , path: 'json-viewer' }, | ||
| { label: 'Base64 Converter', description: 'Encode and decode Base64', icon: '64', path: 'base64-string-converter' }, | ||
| { label: 'Regex Tester', description: 'Build and test regular expressions', icon: '.*', path: 'regex-tester' }, | ||
| { label: 'Color Converter', description: 'Convert colors between formats', icon: '◉', path: 'color-converter' }, | ||
| { label: 'JWT Decoder', description: 'Inspect JSON Web Tokens', icon: 'jwt', path: 'jwt-decoder' }, | ||
| ]}, | ||
| { category: 'All tools', items: [ | ||
| { label: 'Open DevTools', description: 'Browse the complete tool library', icon: '↗', path: '' }, | ||
| ]}, | ||
| { category: 'Settings', items: [ |
There was a problem hiding this comment.
🟡 Medium · Environment information is absent
The toolbar renders only quick actions, tool links, and settings; it exposes no page or environment information. Users get utility links but not the environment information promised in the description.
Add a toolbar section that gathers and displays the promised page or environment information.
Prompt for AI agents
In `extension/toolbar.js` at lines 11-25:
**Environment information is absent**
The toolbar renders only quick actions, tool links, and settings; it exposes no page or environment information. Users get utility links but not the environment information promised in the description.
Add a toolbar section that gathers and displays the promised page or environment information.| if (!items.length) return ''; | ||
| return `<div class="menu-section"><div class="menu-section-title">${section.category}</div>${items.map((item) => `<button class="menu-item" type="button" data-id="${item.id || ''}" data-path="${item.path || ''}"><span class="menu-item-icon">${item.icon}</span><span class="menu-item-text">${item.label}<span class="menu-item-description">${item.description}</span></span>${item.shortcut ? `<span class="menu-item-shortcut">${item.shortcut}</span>` : ''}</button>`).join('')}</div>`; | ||
| }).join('<div class="menu-divider"></div>'); | ||
| toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>'; |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| if (!items.length) return ''; | ||
| return `<div class="menu-section"><div class="menu-section-title">${section.category}</div>${items.map((item) => `<button class="menu-item" type="button" data-id="${item.id || ''}" data-path="${item.path || ''}"><span class="menu-item-icon">${item.icon}</span><span class="menu-item-text">${item.label}<span class="menu-item-description">${item.description}</span></span>${item.shortcut ? `<span class="menu-item-shortcut">${item.shortcut}</span>` : ''}</button>`).join('')}</div>`; | ||
| }).join('<div class="menu-divider"></div>'); | ||
| toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>'; |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): User controlled data in a toolSections.innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| if (!items.length) return ''; | ||
| return `<div class="menu-section"><div class="menu-section-title">${section.category}</div>${items.map((item) => `<button class="menu-item" type="button" data-id="${item.id || ''}" data-path="${item.path || ''}"><span class="menu-item-icon">${item.icon}</span><span class="menu-item-text">${item.label}<span class="menu-item-description">${item.description}</span></span>${item.shortcut ? `<span class="menu-item-shortcut">${item.shortcut}</span>` : ''}</button>`).join('')}</div>`; | ||
| }).join('<div class="menu-divider"></div>'); | ||
| toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>'; |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| if (!items.length) return ''; | ||
| return `<div class="menu-section"><div class="menu-section-title">${section.category}</div>${items.map((item) => `<button class="menu-item" type="button" data-id="${item.id || ''}" data-path="${item.path || ''}"><span class="menu-item-icon">${item.icon}</span><span class="menu-item-text">${item.label}<span class="menu-item-description">${item.description}</span></span>${item.shortcut ? `<span class="menu-item-shortcut">${item.shortcut}</span>` : ''}</button>`).join('')}</div>`; | ||
| }).join('<div class="menu-divider"></div>'); | ||
| toolSections.innerHTML = html || '<div class="empty">No tools match your search.</div>'; |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): User controlled data in a toolSections.innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
This branch had an error being deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
v0 Session
Summary by Sourcery
Redesign the browser developer toolbar to provide a polished, searchable, and persistent developer utility experience.
New Features:
Enhancements: