initial commit

from devtoolcss/devtoolcss@10c670f

Author: b10902118

.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Bill Tsui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,93 @@
+# Chrome Inspector
+
+A lightweight interface for Chrome Inspector, providing Elements and Styles Panel information via the Chrome DevTools Protocol (CDP). Supports Puppeteer, Playwright, Chrome Extensions, and other CDP clients.
+
+## Installation
+
+```bash
+npm i chrome-inspector
+```
+
+## Usage
+
+```ts
+import { Inspector } from "chrome-inspector";
+
+// Init backend...
+
+// Puppeteer
+const client = await page.createCDPSession();
+const inspector = Inspector.fromCDPClient(client);
+
+// Playwright
+const client = await page.context().newCDPSession(page);
+const inspector = Inspector.fromCDPClient(client);
+
+// Chrome Extension
+const target = { tabId: chrome.devtools.inspectedWindow.tabId };
+await chrome.debugger.attach(target, "1.3");
+const inspector = Inspector.fromChromeDebugger(chrome.debugger, target.tabId);
+
+// Load a page...
+
+// Inspect element by query selector
+const node = await inspector.inspect("body");
+
+console.log("Matched Rules:");
+console.log(JSON.stringify(node.styles, null, 2));
+
+console.log("Computed Styles:");
+for (const key of ["background-color", "width", "margin-left"]) {
+  console.log(`${key}:`, node.computed[key]);
+}
+```
+
+Full example:
+
+Sample output for [https://example.com](https://example.com) (formatted):
+
+```json
+Styles:
+{
+  "inherited": [],
+  "attributes": [],
+  "matched": [
+    {
+      "allSelectors": ["body"],
+      "matchedSelectors": ["body"],
+      "properties": [
+        {"name": "display","value": "block","important": false,"applied": true},
+        {"name": "margin","value": "8px","important": false,"applied": false}
+      ],
+      "origin": "user-agent"
+    },
+    {
+      "allSelectors": ["body"],
+      "matchedSelectors": ["body"],
+      "properties": [
+        {"name": "background","value": "#eee","important": false,"applied": true},
+        {"name": "width","value": "60vw","important": false,"applied": true},
+        {"name": "margin","value": "15vh auto","important": false,"applied": true},
+        {"name": "font-family","value": "system-ui,sans-serif","important": false,"applied": false}
+      ],
+      "origin": "regular",
+      "cssText": "background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif"
+    }
+  ],
+  "pseudoElements": [],
+  "inline": []
+}
+Computed:
+background-color: rgb(238, 238, 238)
+width: 480px
+margin-left: 160px
+
+```
+
+## APIs
+
+- The returned `Node` is a CDP [DOM.Node](https://chromedevtools.github.io/devtools-protocol/tot/DOM/#type-Node) object containing DOM information. Loosely typed for compatibility.
+
+- The rules are ordered by specificity from lowest to highest. `apply: true` marks final applied properties. For more details check `@devtoolcss/parser`
+
+- The Document is native DOM in browser and JSDOM in node. To use a specific document you can pass it in. It always returns a new document instance created from `document.implementation.createHTMLDocument()`.

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "chrome-inspector",
+  "version": "0.0.0",
+  "description": "A lightweight interface for Chrome Inspector, providing Elements and Styles Panel information via the Chrome DevTools Protocol (CDP). Supports Puppeteer, Playwright, Chrome Extensions, and other CDP clients.",
+  "license": "MIT",
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:devtoolcss/chrome-inspector.git"
+  },
+  "homepage": "https://github.com/devtoolcss/chrome-inspector#readme",
+  "keywords": [
+    "chrome",
+    "inspector",
+    "devtools",
+    "devtools-protocol",
+    "puppeteer",
+    "playwright",
+    "chrome-extension"
+  ],
+  "publishConfig": {
+    "provenance": true
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "pnpm build"
+  },
+  "dependencies": {
+    "@devtoolcss/parser": "^1.0.0",
+    "jsdom": "^27.0.1"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.1.24",
+    "@types/jsdom": "^21.1.7",
+    "devtools-protocol": "^0.0.1532728",
+    "puppeteer-core": "^24.25.0",
+    "typescript": "^5.9.3"
+  }
+}