webpack-plugin-hover

Webpack 5 plugin for Hover — the floating chat widget that lets an AI agent drive your real Chrome via CDP + Playwright MCP.

Compatibility

Hover ships separate packages per bundler because each one has its own HTML pipeline. This package targets every host that runs the webpack 5 compiler API:

| Stack | Status | |---|---| | vanilla webpack-dev-server | ✅ canonical target | | Rspack / Rsbuild | ✅ API-compatible, HtmlRspackPlugin works out of the box | | Create React App (legacy) | ✅ via craco or react-app-rewired (CRA is in maintenance mode but still uses webpack 5 + HtmlWebpackPlugin) | | Vue CLI (legacy) | ✅ via vue.config.js's configureWebpack (Vue CLI is in maintenance mode) | | Next.js with --webpack | ✅ but requires the --webpack flag (Next.js 16 ships Turbopack as the default; webpack plugins do not load under Turbopack) | | Next.js default (Turbopack) | ❌ not supported by webpack plugins. Turbopack-native integration is on the roadmap |

For Vite-based projects use vite-plugin-hover; for Astro use @hover-dev/astro; for Nuxt use @hover-dev/nuxt.

Install

pnpm add -D webpack-plugin-hover

html-webpack-plugin is an optional peer dep — if your setup already has it (CRA, Vue CLI, Rspack, vanilla wds with HtmlWebpackPlugin all do), it's used. Otherwise the plugin falls back to a processAssets HTML splice.

Usage

// webpack.config.js
import { HoverPlugin } from 'webpack-plugin-hover';

export default {
  mode: 'development',
  // ... your config ...
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new HoverPlugin({ autoLaunchChrome: true }),
  ],
  devServer: { port: 8080 },
};

Run webpack serve, click the floating ✨ in the bottom-right.

Rspack / Rsbuild

Identical — Rspack's HtmlRspackPlugin exposes the same alterAssetTagGroups hook used by HtmlWebpackPlugin.

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { HoverPlugin } from 'webpack-plugin-hover';

export default defineConfig({
  tools: { rspack: { plugins: [new HoverPlugin({ autoLaunchChrome: true })] } },
});

Next.js (with --webpack)

next dev --webpack

Plus in next.config.js:

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      const { HoverPlugin } = require('webpack-plugin-hover');
      config.plugins.push(new HoverPlugin({ autoLaunchChrome: true }));
    }
    return config;
  },
};

Pure Turbopack (the Next 16 default) does not load webpack plugins; a dedicated @hover-dev/next package is on the roadmap.

Options

Same shape as the other Hover integrations:

| Option | Type | Default | Notes | |---|---|---|---| | port | number | 51789 | Auto-bumps up to 9 times if busy | | enabled | boolean \| ({ mode, watch }) => boolean | mode === 'development' && watch | webpack serve sets watch=true | | chromeDebugPort | number | 9222 | CDP port of the debug Chrome | | autoLaunchChrome | boolean | false | Pre-spawn a debug Chrome | | devUrl | string | derived from devServer.port | Override the URL Chrome opens to | | devRoot | string | compiler.context | Override the project root for skill saves | | agentId | string | 'claude' | One of @hover-dev/core's registered agents | | model | string | 'sonnet' | Default model | | maxBudgetUsd | number | none | Hard $ ceiling per command |

How it composes

webpack-plugin-hover  (this package)
   ├─ @hover-dev/core              · startService(), launchDebugChrome()
   └─ @hover-dev/widget-bootstrap  · buildWidgetBundle()

The widget bytes are byte-identical to what vite-plugin-hover, @hover-dev/astro, and @hover-dev/nuxt ship — all four consume @hover-dev/widget-bootstrap's mid-level API.

License

Apache-2.0 — same as the rest of Hover.