rw4lll · blazery · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,13 @@
 node_modules
 .DS_Store
+dist
 build
+release
 *.zip
 *.xpi
 tests_output
 selenium-debug.log
 TODOs.md
 .idea
 .web-extension-id
+*.tsbuildinfo
diff --git a/LICENSE b/LICENSE
@@ -2,6 +2,7 @@ The MIT License (MIT)
 
 Copyright (c) 2020 Marcel Pociot
 Copyright (c) 2014-2020 Evan You
+Copyright (c) 2026 Jordi vd Broek, Dolphiq, Claude (For the extra 10%)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,72 +1,72 @@
-# Livewire Devtools
-
-Debug your Livewire component state from within your browser.
-
-**Upd.: there was added support for Livewire v3. Please, report any issues you may have.**
-
-<p align="center"><img src="https://raw.githubusercontent.com/rw4lll/livewire-devtools/master/media/screenshot-shadow.png" alt="screenshot"></p>
-
-### Roadmap
-
-- ~~Chrome Manifest V3 support~~
-- ~~Check FF extension~~
-- ~~Add Livewire v3 support~~
-- Rewrite tool from scratch with modern stuff (ts, vite, vue3 etc.)
-
-### Installation
-
-- For Chromium-based browsers (Chrome, Edge, Chromium etc.): https://chrome.google.com/webstore/detail/livewire-devtools/dnociedgpnpfnbkafoiilldfhpcjmikd
-- For Firefox: https://addons.mozilla.org/ru/firefox/addon/livewire-devtools/
-
-### Manual Installation (Chrome)
-
-1. Clone this repo
-2. `npm install` (Or `yarn install` if you are using yarn as the package manager)
-3. `npm run build`
-4. Open Chrome extension page (chrome://extensions)
-5. Check "developer mode"
-6. Click "load unpacked extension", and choose `shells/chrome`.
-
-### Hacking
-
-1. Clone this repo
-2. `npm install`
-3. `npm run dev`
-4. A plain shell with a test app will be available at `localhost:8100`.
-
-### Manual Installation (Firefox)
-
-1.  Install `web-ext`
-
-    ```
-    $ npm install --global web-ext
-    ```
-
-    Or, for Yarn:
-
-    ```
-    $ yarn global add web-ext
-    ```
-
-    Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:
-
-    ```
-    $ PATH=$PATH:$(yarn global bin)
-    ```
-
-2.  Build and run in Firefox
-
-    ```
-    $ npm run build:ff
-    $ npm run zip:ff
-    ```
-
-    When using Yarn, just replace `npm` with `yarn`.
-
-3.  Open "about:addons" in Firefox browser, then click "Install from file" and select built zip-folder.
-
-### License
-
-Thanks goes out to Vue devtools, which were used as a starting point for this.
-
-[MIT](http://opensource.org/licenses/MIT)
+# Livewire DevTools
+
+Chrome DevTools extension for debugging Livewire applications. Supports **Livewire 3 and Livewire 4** (Laravel 13+). Shows an Alpine.js version badge when Alpine 3.15+ is present.
+
+## Features
+
+- **Components tab** — hierarchical component tree, filterable, with an editable state inspector. Edit a public property in the panel and the change is pushed back via `$wire.set`.
+- **Events tab** — logs every `Livewire.dispatch(...)` call. Pause / clear, drill into payloads.
+- **Timeline tab** — records a row on every component commit; pick a past row and click _Travel to state_ to restore that snapshot.
+- **Hover highlight** — hover a node in the tree, the matching element is highlighted on the page.
+- **Right-click inspect** — right-click any Livewire element on the page and pick _Inspect Livewire component_.
+- **Version badges** — header shows detected Livewire version and Alpine version.
+- **Dark mode** — follows the Chrome DevTools theme.
+
+## Install (unpacked, for development)
+
+```bash
+npm install
+npm run build
+```
+
+Then in Chrome:
+
+1. Open `chrome://extensions`
+2. Enable **Developer mode**
+3. Click **Load unpacked** and select the `dist/` folder
+
+Open any Livewire page, then open DevTools and switch to the **Livewire** panel.
+
+## Scripts
+
+| Command             | What it does                                           |
+| ------------------- | ------------------------------------------------------ |
+| `npm run dev`       | Vite dev server with HMR for the panel                 |
+| `npm run build`     | Type-check + production build into `dist/`             |
+| `npm run typecheck` | `vue-tsc --noEmit` only                                |
+| `npm run zip`       | Zip `dist/` into `release/livewire-devtools-…-chrome.zip` |
+| `npm run release`   | `build` + `zip`                                        |
+
+## Project layout
+
+```
+src/
+  manifest.ts            typed MV3 manifest
+  background/            service worker (message router + context menu)
+  content/               content scripts (hook loader, proxy)
+  injected/              page-world scripts
+    hook.ts              global event bus on window
+    detector.ts          polls for window.Livewire
+    backend.ts           main orchestrator (driven by adapter)
+    backend/             highlighter + right-click selector
+  adapter/               Livewire abstraction
+    detect.ts            feature-probe version detection
+    v3.ts                Livewire 3 impl
+    v4.ts                Livewire 4 impl (uses interceptMessage)
+    shared.ts            normalize + dispatch-wrap helpers
+  shared/                bridge, typed message union, devalue transfer
+  panel/                 Vue 3 DevTools panel (Pinia stores, tab views)
+  popup/                 action popups
+```
+
+## How the pieces talk
+
+1. `hook-loader.ts` runs at `document_start`, injects `hook.ts` into the page main world. This creates `window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__`.
+2. `proxy.ts` runs at `document_idle`, injects `detector.ts`. The detector polls for `window.Livewire`; on success it posts `livewire:detected` to the service worker, which colors the toolbar icon.
+3. When DevTools is opened, `panel/devtools.ts` registers the Livewire panel. The panel (`panel/main.ts`) opens a long-lived `chrome.runtime.connect` port to the service worker, keyed by tab id.
+4. The panel sends `init`. The proxy content script sees it and injects `backend.ts` into the page main world (once). The backend announces itself via `ready` and begins emitting `flush`, `event:triggered`, and `timeline:mutation` messages.
+5. The Livewire adapter (v3 or v4) is selected by feature probe: `interceptMessage` → v4, `.hook()` + `.all()` → v3. All version-specific logic is confined to `src/adapter/v3.ts` and `src/adapter/v4.ts`.
+
+## License
+
+MIT. This tool started life as a fork of [rw4lll/livewire-devtools](https://github.com/rw4lll/livewire-devtools), which in turn drew from [vuejs/vue-devtools](https://github.com/vuejs/vue-devtools).