firefox-devtools-mcp 0.5.3 → 0.6.1

package/dist/index.js

@@ -23301,12 +23301,12 @@ ${attemptedPaths.map((p) => `  - ${p}`).join("\n")}`
        * Take a snapshot of the current page
        * Returns text and JSON with snapshotId, no DOM mutations
        */
-      async takeSnapshot() {
+      async takeSnapshot(options) {
         const snapshotId = ++this.currentSnapshotId;
         this.resolver.setSnapshotId(snapshotId);
         this.resolver.clear();
         logDebug(`Taking snapshot (ID: ${snapshotId})...`);
-        const result = await this.executeInjectedScript(snapshotId);
+        const result = await this.executeInjectedScript(snapshotId, options);
         logDebug(
           `Snapshot executeScript result: hasResult=${!!result}, hasTree=${!!result?.tree}, truncated=${result?.truncated || false}`
         );
@@ -23319,6 +23319,10 @@ ${attemptedPaths.map((p) => `  - ${p}`).join("\n")}`
             logDebug(`  ... and ${result.debugLog.length - 20} more`);
           }
         }
+        if (result?.selectorError) {
+          logDebug(`Snapshot generation failed: ${result.selectorError}`);
+          throw new Error(result.selectorError);
+        }
         if (!result?.tree) {
           const errorMsg = "Unknown error";
           logDebug(`Snapshot generation failed: ${errorMsg}`);
@@ -23362,7 +23366,7 @@ ${attemptedPaths.map((p) => `  - ${p}`).join("\n")}`
       /**
        * Execute bundled injected snapshot script
        */
-      async executeInjectedScript(snapshotId) {
+      async executeInjectedScript(snapshotId, options) {
         const scriptSource = this.getInjectedScript();
         const result = await this.driver.executeScript(
           `
@@ -23374,10 +23378,11 @@ ${attemptedPaths.map((p) => `  - ${p}`).join("\n")}`
           window.__createSnapshot = __SnapshotInjected.createSnapshot;
         }
       }
-      // Call it
-      return window.__createSnapshot(arguments[0]);
+      // Call it with options
+      return window.__createSnapshot(arguments[0], arguments[1]);
       `,
-          snapshotId
+          snapshotId,
+          options || {}
         );
         return result;
       }
@@ -23649,11 +23654,11 @@ var init_firefox = __esm({
       // ============================================================================
       // Snapshot
       // ============================================================================
-      async takeSnapshot() {
+      async takeSnapshot(options) {
         if (!this.snapshot) {
           throw new Error("Not connected");
         }
-        return await this.snapshot.takeSnapshot();
+        return await this.snapshot.takeSnapshot(options);
       }
       resolveUidToSelector(uid) {
         if (!this.snapshot) {
@@ -24506,13 +24511,24 @@ async function handleTakeSnapshot(args2) {
       maxLines: requestedMaxLines = DEFAULT_SNAPSHOT_LINES,
       includeAttributes = false,
       includeText = true,
-      maxDepth
+      maxDepth,
+      includeAll = false,
+      selector
     } = args2 || {};
     const maxLines = Math.min(Math.max(1, requestedMaxLines), TOKEN_LIMITS.MAX_SNAPSHOT_LINES_CAP);
     const wasCapped = requestedMaxLines > TOKEN_LIMITS.MAX_SNAPSHOT_LINES_CAP;
     const { getFirefox: getFirefox2 } = await init_index().then(() => index_exports);
     const firefox3 = await getFirefox2();
-    const snapshot = await firefox3.takeSnapshot();
+    const snapshotOptions = {};
+    if (includeAll) {
+      snapshotOptions.includeAll = includeAll;
+    }
+    if (selector) {
+      snapshotOptions.selector = selector;
+    }
+    const snapshot = await firefox3.takeSnapshot(
+      Object.keys(snapshotOptions).length > 0 ? snapshotOptions : void 0
+    );
     const { formatSnapshotTree: formatSnapshotTree2 } = await Promise.resolve().then(() => (init_formatter(), formatter_exports));
     const options = {
       includeAttributes,
@@ -24526,6 +24542,12 @@ async function handleTakeSnapshot(args2) {
     const truncated = lines.length > maxLines;
     const displayLines = truncated ? lines.slice(0, maxLines) : lines;
     let output = `\u{1F4F8} Snapshot (id=${snapshot.json.snapshotId})`;
+    if (selector) {
+      output += ` [selector: ${selector}]`;
+    }
+    if (includeAll) {
+      output += " [includeAll: true]";
+    }
     if (wasCapped) {
       output += ` [maxLines capped: ${TOKEN_LIMITS.MAX_SNAPSHOT_LINES_CAP}]`;
     }
@@ -24606,6 +24628,14 @@ var init_snapshot2 = __esm({
           maxDepth: {
             type: "number",
             description: "Max tree depth"
+          },
+          includeAll: {
+            type: "boolean",
+            description: "Include all visible elements without relevance filtering. Useful for Vue/Livewire apps (default: false)"
+          },
+          selector: {
+            type: "string",
+            description: 'CSS selector to scope snapshot to specific element (e.g., "#app")'
           }
         }
       }

package/dist/snapshot.injected.global.js

@@ -1 +1 @@
-"use strict";var __SnapshotInjected=(()=>{var h=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var q=(t,r)=>{for(var e in r)h(t,e,{get:r[e],enumerable:!0})},z=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of V(r))!U.call(t,o)&&o!==e&&h(t,o,{get:()=>r[o],enumerable:!(i=W(r,o))||i.enumerable});return t};var B=t=>z(h({},"__esModule",{value:!0}),t);var rt={};q(rt,{createSnapshot:()=>P});var v=["a","button","input","select","textarea","img","video","audio","iframe"],J=["nav","main","section","article","header","footer","form"],K=["div","span","p","li","ul","ol"];function L(t){if(!t||t.nodeType!==Node.ELEMENT_NODE)return!1;try{let e=window.getComputedStyle(t);if(e.display==="none"||e.visibility==="hidden"||e.opacity==="0")return!1}catch{return!1}let r=t.tagName.toLowerCase();if(v.indexOf(r)!==-1||t.hasAttribute("role")||t.hasAttribute("aria-label")||/^h[1-6]$/.test(r)||J.indexOf(r)!==-1)return!0;if(K.indexOf(r)!==-1){let e=(t.textContent||"").trim();if(e.length>0&&e.length<500||t.id||t.className)return!0}return!1}function M(t){if(t.tabIndex>=0)return!0;let e=t.tagName.toLowerCase();return["a","button","input","select","textarea"].indexOf(e)!==-1}function O(t){let r=t.tagName.toLowerCase();if(v.indexOf(r)!==-1)return!0;let e=t.getAttribute("role");return!!(e&&["button","link","menuitem","tab"].indexOf(e)!==-1||t.hasAttribute("onclick"))}var Q=100;function k(t){if(t.hasAttribute("aria-label"))return t.getAttribute("aria-label")||void 0;let e=t.id;if(e){let o=document.querySelector(`label[for="${e}"]`);if(o?.textContent)return o.textContent.trim()}if(t.hasAttribute("placeholder"))return t.getAttribute("placeholder")||void 0;if(t.hasAttribute("title"))return t.getAttribute("title")||void 0;if(t.hasAttribute("alt"))return t.getAttribute("alt")||void 0;let i=t.tagName.toLowerCase();if(["button","a","h1","h2","h3","h4","h5","h6"].indexOf(i)!==-1)return g(t)}function g(t){let r="";for(let i=0;i<t.childNodes.length;i++){let o=t.childNodes[i];o&&o.nodeType===Node.TEXT_NODE&&(r+=o.textContent||"")}let e=r.trim();if(e)return e.substring(0,Q)}function $(t){let r={},e=!1,i=["disabled","hidden","selected","expanded"];for(let a of i){let n=t.getAttribute(`aria-${a}`);n!==null&&(r[a]=n==="true",e=!0)}let o=["checked","pressed"];for(let a of o){let n=t.getAttribute(`aria-${a}`);n!==null&&(n==="mixed"?r[a]="mixed":r[a]=n==="true",e=!0)}let l=["autocomplete","haspopup","invalid","label","labelledby","describedby","controls"];for(let a of l){let n=t.getAttribute(`aria-${a}`);n&&(r[a]=n,e=!0)}let s=t.getAttribute("aria-level");if(s){let a=parseInt(s,10);isNaN(a)||(r.level=a,e=!0)}return e?r:void 0}function I(t){let r={};try{let e=window.getComputedStyle(t);r.visible=e.display!=="none"&&e.visibility!=="hidden"&&e.opacity!=="0"}catch{r.visible=!1}return r.accessible=r.visible&&!t.getAttribute("aria-hidden"),r.focusable=M(t),r.interactive=O(t),r}var Y=["id","data-testid","data-test-id"];function R(t){let r=[],e=t;for(;e&&e.nodeType===Node.ELEMENT_NODE;){let i=e.nodeName.toLowerCase(),o=!1;for(let n of Y){let u=e.getAttribute(n);if(u){n==="id"?i+="#"+CSS.escape(u):i+=`[${n}="${X(u)}"]`,r.unshift(i),o=!0;break}}if(o)break;let l=e.getAttribute("aria-label"),s=e.getAttribute("role");if(l&&s){i+=`[role="${s}"][aria-label="${X(l)}"]`,r.unshift(i),e=e.parentElement;continue}let a=e.parentElement?.children;if(a&&a.length>1){let n=1;for(let u=0;u<a.length;u++){let d=a[u];if(d){if(d===e)break;d.nodeName===e.nodeName&&n++}}(n>1||a.length>1&&a[0]!==e)&&(i+=`:nth-of-type(${n})`)}if(r.unshift(tt(i)),e=e.parentElement,e&&e.nodeName.toLowerCase()==="body"){r.unshift("body");break}}return r.join(" > ")}function G(t){let r=t.id;if(r)return`//*[@id="${Z(r)}"]`;let e=[],i=t;for(;i&&i.nodeType===Node.ELEMENT_NODE;){let o=i.nodeName.toLowerCase(),l=1,s=i.previousElementSibling;for(;s;)s.nodeName.toLowerCase()===o&&l++,s=s.previousElementSibling;let a=i.parentElement,n=!1;a&&(n=Array.from(a.children).filter(E=>E.nodeName.toLowerCase()===o).length>1);let u=n?`${o}[${l}]`:o;if(e.unshift(u),i=i.parentElement,i&&i.nodeName.toLowerCase()==="html"){e.unshift("html");break}}return"/"+e.join("/")}function X(t){return t.replace(/"/g,'\\"').substring(0,64)}function Z(t){return t.indexOf('"')===-1||t.indexOf("'")===-1?t:`concat(${t.split('"').map((e,i,o)=>i===o.length-1?e?`"${e}"`:"":e?`"${e}",'"'`:`"'"`).filter(e=>e).join(",")})`}function tt(t){return t.length<=64?t:t.substring(0,64)}var et=10,H=1e3;function D(t,r,e=!0){let i=0,o=[],l=!1;function s(n,u){if(u>et||i>=H)return l=!0,null;let d=n.tagName.toLowerCase();if(!(d==="body"||d==="html")&&!L(n))return null;let A=`${r}_${i++}`,j=R(n),F=G(n);o.push({uid:A,css:j,xpath:F});let b=n,N=n.getAttribute("role"),T=k(n),y=g(n),x=b.value,C=b.href,S=b.src,w=$(n),_=I(n),c={uid:A,tag:d,...N&&{role:N},...T&&{name:T},...x&&{value:x},...C&&{href:C},...S&&{src:S},...y&&{text:y},...w&&{aria:w},..._&&{computed:_},children:[]};if(d==="iframe"&&e){try{let f=n,p=f.contentDocument||f.contentWindow?.document;if(p?.body){let m=s(p.body,u+1);m&&(m.isIframe=!0,m.frameSrc=f.src,c.children.push(m))}else c.isIframe=!0,c.frameSrc=f.src,c.crossOrigin=!0}catch{c.isIframe=!0,c.frameSrc=n.src,c.crossOrigin=!0}return c}for(let f=0;f<n.children.length;f++){if(i>=H){l=!0;break}let p=n.children[f];if(!p)continue;let m=s(p,u+1);m&&c.children.push(m)}return c}return{tree:s(t,0),uidMap:o,truncated:l}}function P(t){try{let r=D(document.body,t,!0);if(!r.tree)throw new Error("Failed to generate tree");return r}catch{return{tree:null,uidMap:[],truncated:!1}}}typeof window<"u"&&(window.__createSnapshot=P);return B(rt);})();
+"use strict";var __SnapshotInjected=(()=>{var N=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var Q=(e,n)=>{for(var t in n)N(e,t,{get:n[t],enumerable:!0})},Y=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of J(n))!K.call(e,i)&&i!==t&&N(e,i,{get:()=>n[i],enumerable:!(r=B(n,i))||r.enumerable});return e};var Z=e=>Y(N({},"__esModule",{value:!0}),e);var ue={};Q(ue,{createSnapshot:()=>U});var T=["a","button","input","select","textarea","img","video","audio","iframe"],ee=["nav","main","section","article","header","footer","form"],te=["div","span","p","li","ul","ol"];function y(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)return!1;let n=e;for(;n&&n!==document.documentElement;){try{let t=window.getComputedStyle(n),r=parseFloat(t.opacity);if(t.display==="none"||t.visibility==="hidden"||r===0||isNaN(r))return!1}catch{return!1}n=n.parentElement}return!0}function ne(e){let n="";for(let t=0;t<e.childNodes.length;t++){let r=e.childNodes[t];r&&r.nodeType===Node.TEXT_NODE&&(n+=r.textContent||"")}return n.trim()}function re(e){for(let n=0;n<e.children.length;n++){let t=e.children[n];if(t){let r=t.tagName.toLowerCase();if(T.indexOf(r)!==-1||t.hasAttribute("role"))return!0}}return!1}function R(e){if(!e||e.nodeType!==Node.ELEMENT_NODE||!y(e))return!1;let n=e.tagName.toLowerCase();if(T.indexOf(n)!==-1||e.hasAttribute("role")||e.hasAttribute("aria-label")||/^h[1-6]$/.test(n)||ee.indexOf(n)!==-1)return!0;if(te.indexOf(n)!==-1){let t=ne(e);if(t.length>0&&t.length<500||e.id||e.className||re(e))return!0}return!1}function $(e){if(e.tabIndex>=0)return!0;let t=e.tagName.toLowerCase();return["a","button","input","select","textarea"].indexOf(t)!==-1}function D(e){let n=e.tagName.toLowerCase();if(T.indexOf(n)!==-1)return!0;let t=e.getAttribute("role");return!!(t&&["button","link","menuitem","tab"].indexOf(t)!==-1||e.hasAttribute("onclick"))}var ie=100;function X(e){if(e.hasAttribute("aria-label"))return e.getAttribute("aria-label")||void 0;let t=e.id;if(t){let i=document.querySelector(`label[for="${t}"]`);if(i?.textContent)return i.textContent.trim()}if(e.hasAttribute("placeholder"))return e.getAttribute("placeholder")||void 0;if(e.hasAttribute("title"))return e.getAttribute("title")||void 0;if(e.hasAttribute("alt"))return e.getAttribute("alt")||void 0;let r=e.tagName.toLowerCase();if(["button","a","h1","h2","h3","h4","h5","h6"].indexOf(r)!==-1)return x(e)}function x(e){let n="";for(let r=0;r<e.childNodes.length;r++){let i=e.childNodes[r];i&&i.nodeType===Node.TEXT_NODE&&(n+=i.textContent||"")}let t=n.trim();if(t)return t.substring(0,ie)}function W(e){let n={},t=!1,r=["disabled","hidden","selected","expanded"];for(let o of r){let a=e.getAttribute(`aria-${o}`);a!==null&&(n[o]=a==="true",t=!0)}let i=["checked","pressed"];for(let o of i){let a=e.getAttribute(`aria-${o}`);a!==null&&(a==="mixed"?n[o]="mixed":n[o]=a==="true",t=!0)}let l=["autocomplete","haspopup","invalid","label","labelledby","describedby","controls"];for(let o of l){let a=e.getAttribute(`aria-${o}`);a&&(n[o]=a,t=!0)}let u=e.getAttribute("aria-level");if(u){let o=parseInt(u,10);isNaN(o)||(n.level=o,t=!0)}return t?n:void 0}function G(e){let n={};try{let t=window.getComputedStyle(e),r=parseFloat(t.opacity);n.visible=t.display!=="none"&&t.visibility!=="hidden"&&r!==0&&!isNaN(r)}catch{n.visible=!1}return n.accessible=n.visible&&!e.getAttribute("aria-hidden"),n.focusable=$(e),n.interactive=D(e),n}var oe=["id","data-testid","data-test-id"];function P(e){let n=[],t=e;for(;t&&t.nodeType===Node.ELEMENT_NODE;){let r=t.nodeName.toLowerCase(),i=!1;for(let a of oe){let d=t.getAttribute(a);if(d){a==="id"?r+="#"+CSS.escape(d):r+=`[${a}="${H(d)}"]`,n.unshift(r),i=!0;break}}if(i)break;let l=t.getAttribute("aria-label"),u=t.getAttribute("role");if(l&&u){r+=`[role="${u}"][aria-label="${H(l)}"]`,n.unshift(r),t=t.parentElement;continue}let o=t.parentElement?.children;if(o&&o.length>1){let a=1;for(let d=0;d<o.length;d++){let s=o[d];if(s){if(s===t)break;s.nodeName===t.nodeName&&a++}}(a>1||o.length>1&&o[0]!==t)&&(r+=`:nth-of-type(${a})`)}if(n.unshift(se(r)),t=t.parentElement,t&&t.nodeName.toLowerCase()==="body"){n.unshift("body");break}}return n.join(" > ")}function F(e){let n=e.id;if(n)return`//*[@id="${ae(n)}"]`;let t=[],r=e;for(;r&&r.nodeType===Node.ELEMENT_NODE;){let i=r.nodeName.toLowerCase(),l=1,u=r.previousElementSibling;for(;u;)u.nodeName.toLowerCase()===i&&l++,u=u.previousElementSibling;let o=r.parentElement,a=!1;o&&(a=Array.from(o.children).filter(h=>h.nodeName.toLowerCase()===i).length>1);let d=a?`${i}[${l}]`:i;if(t.unshift(d),r=r.parentElement,r&&r.nodeName.toLowerCase()==="html"){t.unshift("html");break}}return"/"+t.join("/")}function H(e){return e.replace(/"/g,'\\"').substring(0,64)}function ae(e){return e.indexOf('"')===-1||e.indexOf("'")===-1?e:`concat(${e.split('"').map((t,r,i)=>r===i.length-1?t?`"${t}"`:"":t?`"${t}",'"'`:`"'"`).filter(t=>t).join(",")})`}function se(e){return e.length<=64?e:e.substring(0,64)}var le=10,j=1e3;function V(e,n,t={}){let{includeAll:r=!1,includeIframes:i=!0}=t,l=0,u=[],o=!1;function a(s,h){if(h>le)return o=!0,{node:null,relevantChildren:[]};if(l>=j)return o=!0,{node:null,relevantChildren:[]};let b=s.tagName.toLowerCase(),C=b==="body"||b==="html",g;r?g=C||y(s):g=C||R(s);let E=[];if(b==="iframe"&&i&&g)try{let c=s,p=c.contentDocument||c.contentWindow?.document;if(p?.body){let f=a(p.body,h+1);f.node&&(f.node.isIframe=!0,f.node.frameSrc=c.src,E.push(f.node))}}catch{}else for(let c=0;c<s.children.length;c++){if(l>=j){o=!0;break}let p=s.children[c];if(!p)continue;let f=a(p,h+1);f.node?E.push(f.node):f.relevantChildren.length>0&&E.push(...f.relevantChildren)}if(!g)return{node:null,relevantChildren:E};let S=`${n}_${l++}`,q=P(s),z=F(s);u.push({uid:S,css:q,xpath:z});let A=s,v=s.getAttribute("role"),O=X(s),_=x(s),w=A.value,M=A.href,L=A.src,I=W(s),k=G(s),m={uid:S,tag:b,...v&&{role:v},...O&&{name:O},...w&&{value:w},...M&&{href:M},...L&&{src:L},..._&&{text:_},...I&&{aria:I},...k&&{computed:k},children:E};if(b==="iframe"&&i)try{let c=s;(c.contentDocument||c.contentWindow?.document)?.body||(m.isIframe=!0,m.frameSrc=c.src,m.crossOrigin=!0)}catch{m.isIframe=!0,m.frameSrc=s.src,m.crossOrigin=!0}return{node:m,relevantChildren:[]}}return{tree:a(e,0).node,uidMap:u,truncated:o}}function U(e,n){try{let t=document.body;if(n?.selector)try{let l=document.querySelector(n.selector);if(!l)return{tree:null,uidMap:[],truncated:!1,selectorError:`Selector "${n.selector}" not found`};t=l}catch{return{tree:null,uidMap:[],truncated:!1,selectorError:`Invalid selector syntax: "${n.selector}"`}}let r={includeIframes:n?.includeIframes??!0};n?.includeAll!==void 0&&(r.includeAll=n.includeAll);let i=V(t,e,r);if(!i.tree)throw new Error("Failed to generate tree");return i}catch{return{tree:null,uidMap:[],truncated:!1}}}typeof window<"u"&&(window.__createSnapshot=U);return Z(ue);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firefox-devtools-mcp",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Model Context Protocol (MCP) server for Firefox DevTools automation",
   "author": "freema",
   "license": "MIT",
@@ -88,7 +88,8 @@
     "dist",
     "README.md",
     "LICENSE",
-    "scripts"
+    "scripts",
+    "plugins"
   ],
   "repository": {
     "type": "git",

package/plugins/claude/firefox-devtools/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+  "name": "firefox-devtools",
+  "description": "Firefox browser automation via WebDriver BiDi. Automate Firefox for testing, scraping, form filling, screenshots, and debugging.",
+  "version": "0.6.0",
+  "author": {
+    "name": "Tomáš Grasl",
+    "url": "https://www.tomasgrasl.cz/"
+  },
+  "repository": "https://github.com/freema/firefox-devtools-mcp",
+  "license": "MIT"
+}

package/plugins/claude/firefox-devtools/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "firefox-devtools": {
+      "command": "npx",
+      "args": ["-y", "firefox-devtools-mcp@latest"]
+    }
+  }
+}

package/plugins/claude/firefox-devtools/README.md

@@ -0,0 +1,82 @@
+# Firefox DevTools Plugin for Claude Code
+
+Firefox browser automation via WebDriver BiDi. Navigate pages, fill forms, click elements, take screenshots, and monitor console/network activity.
+
+## What's Included
+
+This plugin provides:
+
+- **MCP Server** - Connects Claude Code to Firefox automation
+- **Skills** - Auto-triggers for browser automation, testing, and scraping tasks
+- **Agents** - Dedicated `e2e-tester` and `web-scraper` agents for focused tasks
+- **Commands** - `/firefox:navigate`, `/firefox:screenshot`, `/firefox:debug`
+
+## Installation
+
+```bash
+claude plugin install firefox-devtools
+```
+
+## Commands
+
+### /firefox:navigate
+
+Navigate to a URL and take a DOM snapshot:
+
+```
+/firefox:navigate https://example.com
+/firefox:navigate https://github.com/login
+```
+
+### /firefox:screenshot
+
+Capture the current page or a specific element:
+
+```
+/firefox:screenshot
+/firefox:screenshot e15
+```
+
+### /firefox:debug
+
+Show console errors and failed network requests:
+
+```
+/firefox:debug
+/firefox:debug console
+/firefox:debug network
+```
+
+## Agents
+
+Spawn agents to keep your main context clean:
+
+```
+spawn e2e-tester to test the login flow on https://app.example.com
+spawn web-scraper to extract product prices from https://shop.example.com
+```
+
+## Usage Examples
+
+The plugin works automatically when you ask about browser tasks:
+
+- "Navigate to example.com and take a screenshot"
+- "Fill out the login form and submit"
+- "Check for JavaScript errors on this page"
+- "Scrape all product prices from this page"
+
+## Key Workflow
+
+1. `take_snapshot` - Creates DOM snapshot with UIDs (e.g., `e42`)
+2. Interact using UIDs - `click_by_uid`, `fill_by_uid`, etc.
+3. Re-snapshot after DOM changes
+
+## Requirements
+
+- Firefox 120+
+- Node.js 20.19.0+
+
+## Links
+
+- [Repository](https://github.com/freema/firefox-devtools-mcp)
+- [npm](https://www.npmjs.com/package/firefox-devtools-mcp)

package/plugins/claude/firefox-devtools/agents/e2e-tester.md

@@ -0,0 +1,36 @@
+---
+name: e2e-tester
+description: Agent for running E2E tests on web applications. Navigates pages, fills forms, clicks buttons, and verifies results.
+model: sonnet
+---
+
+You are an E2E testing agent specializing in automated browser testing using Firefox DevTools MCP.
+
+## Your Task
+
+When given a test scenario, execute it step-by-step using Firefox automation tools, verify the results, and report pass/fail status.
+
+## Process
+
+1. **Navigate to the target**: Use `navigate_page` to open the URL
+2. **Take snapshot**: Always call `take_snapshot` before interacting
+3. **Execute test steps**: Use `fill_by_uid`, `click_by_uid`, etc.
+4. **Re-snapshot after changes**: DOM updates require fresh snapshots
+5. **Verify results**: Check for expected elements, text, or states
+6. **Report outcome**: Clear pass/fail with evidence (screenshots if needed)
+
+## Available Tools
+
+- `navigate_page` - Go to URL
+- `take_snapshot` - Get DOM with UIDs
+- `fill_by_uid` / `fill_form_by_uid` - Enter text
+- `click_by_uid` - Click elements
+- `screenshot_page` - Capture evidence
+- `list_console_messages` - Check for JS errors
+
+## Guidelines
+
+- Always snapshot before AND after interactions
+- Take screenshots at key checkpoints
+- Report console errors as test failures
+- Be specific about what passed or failed

package/plugins/claude/firefox-devtools/agents/web-scraper.md

@@ -0,0 +1,35 @@
+---
+name: web-scraper
+description: Agent for extracting structured data from web pages. Navigates, handles pagination, and extracts content.
+model: sonnet
+---
+
+You are a web scraping agent specializing in data extraction using Firefox DevTools MCP.
+
+## Your Task
+
+When given a scraping task, navigate to pages, extract the requested data, handle pagination if needed, and return structured results.
+
+## Process
+
+1. **Navigate to source**: Use `navigate_page` to open the URL
+2. **Take snapshot**: Call `take_snapshot` to see page structure
+3. **Identify data elements**: Find UIDs for elements containing target data
+4. **Extract content**: The snapshot contains text content of elements
+5. **Handle pagination**: Click "next" buttons, re-snapshot, repeat
+6. **Structure output**: Return data in requested format (JSON, table, etc.)
+
+## Available Tools
+
+- `navigate_page` - Go to URL
+- `take_snapshot` - Get DOM with content and UIDs
+- `click_by_uid` - Navigate pagination
+- `list_network_requests` - Monitor API calls (sometimes easier to scrape)
+
+## Guidelines
+
+- Snapshots contain element text - no need for separate "get text" calls
+- Check network requests for API endpoints (often cleaner than DOM scraping)
+- Respect rate limits - don't hammer the server
+- Handle "load more" buttons and infinite scroll patterns
+- Return structured data, not raw HTML

package/plugins/claude/firefox-devtools/commands/debug.md

@@ -0,0 +1,32 @@
+---
+description: Show console errors and failed network requests
+argument-hint: [console|network|all]
+---
+
+# /firefox:debug
+
+Displays debugging information from the current page.
+
+## Usage
+
+```
+/firefox:debug              # Show all (console errors + failed requests)
+/firefox:debug console      # Console messages only
+/firefox:debug network      # Network requests only
+```
+
+## Examples
+
+```
+/firefox:debug
+/firefox:debug console
+/firefox:debug network
+```
+
+## What Happens
+
+- `console`: Calls `list_console_messages` with `level="error"`
+- `network`: Calls `list_network_requests` with `status="failed"`
+- `all` (default): Shows both console errors and failed network requests
+
+Useful for debugging page issues, JavaScript errors, and API failures.

package/plugins/claude/firefox-devtools/commands/navigate.md

@@ -0,0 +1,31 @@
+---
+description: Navigate Firefox to a URL and take a snapshot
+argument-hint: <url>
+---
+
+# /firefox:navigate
+
+Opens a URL in Firefox and takes a DOM snapshot for interaction.
+
+## Usage
+
+```
+/firefox:navigate <url>
+```
+
+## Examples
+
+```
+/firefox:navigate https://example.com
+/firefox:navigate https://github.com/login
+/firefox:navigate file:///path/to/local.html
+```
+
+## What Happens
+
+1. Calls `navigate_page` with the URL
+2. Waits for page load
+3. Calls `take_snapshot` to create UID mappings
+4. Returns the DOM snapshot with interactive elements marked
+
+After navigating, you can interact with elements using their UIDs (e.g., `e42`).

package/plugins/claude/firefox-devtools/commands/screenshot.md

@@ -0,0 +1,30 @@
+---
+description: Take a screenshot of the current page or element
+argument-hint: [uid]
+---
+
+# /firefox:screenshot
+
+Captures a screenshot of the page or a specific element.
+
+## Usage
+
+```
+/firefox:screenshot          # Full page
+/firefox:screenshot <uid>    # Specific element
+```
+
+## Examples
+
+```
+/firefox:screenshot
+/firefox:screenshot e15
+/firefox:screenshot e42
+```
+
+## What Happens
+
+- Without UID: Calls `screenshot_page` for full page capture
+- With UID: Calls `screenshot_by_uid` for element-specific capture
+
+Screenshots are saved and displayed in the conversation.

package/plugins/claude/firefox-devtools/skills/browser-automation/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: browser-automation
+description: This skill should be used when the user asks about browser automation, testing web pages, scraping content, filling forms, taking screenshots, or monitoring console/network activity. Activates for E2E testing, web scraping, form automation, or debugging web applications.
+---
+
+When the user asks about browser automation, use Firefox DevTools MCP to control a real Firefox browser.
+
+## When to Use This Skill
+
+Activate this skill when the user:
+
+- Wants to automate browser interactions ("Fill out this form", "Click the login button")
+- Needs E2E testing ("Test the checkout flow", "Verify the login works")
+- Requests web scraping ("Extract prices from this page", "Get all links")
+- Needs screenshots ("Screenshot this page", "Capture the error state")
+- Wants to debug ("Check for JS errors", "Show failed network requests")
+
+## Core Workflow
+
+### Step 1: Navigate and Snapshot
+
+```
+navigate_page url="https://example.com"
+take_snapshot
+```
+
+The snapshot returns a DOM representation with UIDs (e.g., `e42`) for each interactive element.
+
+### Step 2: Interact with Elements
+
+Use UIDs from the snapshot:
+
+```
+fill_by_uid uid="e5" text="user@example.com"
+click_by_uid uid="e8"
+```
+
+### Step 3: Re-snapshot After Changes
+
+DOM changes invalidate UIDs. Always re-snapshot after:
+- Page navigation
+- Form submissions
+- Dynamic content loads
+
+```
+take_snapshot  # Get fresh UIDs
+```
+
+## Quick Reference
+
+| Task | Tools |
+|------|-------|
+| Navigate | `navigate_page` |
+| See DOM | `take_snapshot` |
+| Click | `click_by_uid` |
+| Type | `fill_by_uid`, `fill_form_by_uid` |
+| Screenshot | `screenshot_page`, `screenshot_by_uid` |
+| Debug | `list_console_messages`, `list_network_requests` |
+
+## Guidelines
+
+- **Always snapshot first**: UIDs only exist after `take_snapshot`
+- **Re-snapshot after DOM changes**: UIDs become stale after interactions
+- **Check for errors**: Use `list_console_messages level="error"` to catch JS issues
+- **Firefox only**: This MCP controls Firefox, not Chrome or Safari