From 807f111f1b1b41213aaa0dbf4edb72f98234b6b0 Mon Sep 17 00:00:00 2001 From: Jevin Date: Thu, 14 May 2026 17:44:16 +0800 Subject: [PATCH] docs: improve README documentation --- AGENTS.md | 4 ++ README.md | 94 +++++++++++++++++++++++++++++++++++++++++------ README.zh-CN.md | 97 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 README.zh-CN.md diff --git a/AGENTS.md b/AGENTS.md index a87096d..5e2119c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -73,6 +73,10 @@ There is no dedicated `lint` or `format` script in `package.json`; use ESLint di - Use Tailwind utility classes for layout and small style adjustments. - The existing code relies on WXT/browser extension globals such as `browser`; do not replace them with unrelated APIs without a compatibility reason. +## README Documentation + +- 生成 README 时，需要保持各语种 README 都包含并同步更新。 + ## Extension Behavior Notes - The DevTools sidebar is created with `browser.devtools.panels.elements.createSidebarPane`. diff --git a/README.md b/README.md index 7b0da8c..25fdbdf 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,97 @@ # CSS-Diff -A browser extension that compares different CSS. +English | [简体中文](./README.zh-CN.md) + +CSS-Diff is a DevTools sidebar extension for comparing the computed CSS of two DOM elements. It is built for frontend debugging: select two elements in the Elements panel, then inspect what changed, search for a property, and copy a CSS declaration with one click. ![Screenshot](https://github.com/Jevin0/css-diff-devtools/blob/main/img/screenshot.png?raw=true) -# Support +## Why CSS-Diff? + +Browser DevTools is excellent at inspecting one element, but finding why two similar elements render differently can still mean switching back and forth between style panes. CSS-Diff puts both computed style results in one table, highlights the differences first, and keeps the workflow inside DevTools. + +## Features -- Supports comparison of selected elements between different windows/tabs -- Click on different styles to automatically copy +- **DevTools Elements sidebar**: adds a `CSS-Diff` pane directly to the Elements panel. +- **Two-element comparison**: select two DOM elements and compare their normalized computed CSS properties. +- **Difference-first table**: changed properties are shown by default, with a `Show all` toggle for the full computed style list. +- **Property search**: filter CSS properties by name while reviewing the comparison. +- **One-click copy**: click a value cell to copy `property: value;`. +- **Cross-window/tab sync**: selected element data is broadcast to other open windows/tabs, which helps compare page states side by side. +- **Localized UI**: includes English and Simplified Chinese browser i18n messages. -# Usage +## Installation > [!WARNING] -> This extension is not available in the extension store. +> CSS-Diff is not currently available in a browser extension store. + +Download the packaged zip from [Releases](https://github.com/Jevin0/css-diff-devtools/releases), then install or load it manually from your browser's extensions page. + +## Usage + +1. Open the page you want to inspect. +2. Open DevTools and switch to the Elements panel. +3. Open the `CSS-Diff` sidebar. +4. Select the first DOM element, then select the second DOM element. +5. Review the highlighted differences, search for a property, or enable `Show all`. +6. Click a left/right value cell to copy the CSS declaration. +7. Click `Clear Selection` to start another comparison. + +## Local Development + +Install dependencies: + +```sh +pnpm install --frozen-lockfile +``` + +Start a development build: + +```sh +pnpm dev +``` + +Other browser targets: + +```sh +pnpm dev:firefox +pnpm dev:edge +``` + +## Build + +Build all supported targets: + +```sh +pnpm build +``` + +Build one target: + +```sh +pnpm build:chrome +pnpm build:firefox +pnpm build:edge +``` + +Package extensions: + +```sh +pnpm zip +``` + +## Tech Stack -You need to download the zip file from my release and manually drag it into your browser's extensions folder. +- [WXT](https://wxt.dev/) for browser extension development +- [Vue 3](https://vuejs.org/) for the DevTools panel UI +- [Element Plus](https://element-plus.org/) and [Tailwind CSS](https://tailwindcss.com/) for interface components and styling +- TypeScript and `vue-tsc` for type checking +- WXT/browser `i18n` for localized messages -## Specific operations +## Inspiration -- Select two elements in the Elements tab of the DevTools panel. +- https://github.com/kdzwinel/CSS-Diff -# Inspiration +## License -+ https://github.com/kdzwinel/CSS-Diff +[MIT](./LICENSE.md) diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..d7f7385 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,97 @@ +# CSS-Diff + +[English](./README.md) | 简体中文 + +CSS-Diff 是一个用于比较两个 DOM 元素计算后 CSS 的 DevTools 侧边栏扩展。它面向前端调试场景：在 Elements 面板中选择两个元素，即可查看哪些样式发生了变化、搜索指定属性，并一键复制 CSS 声明。 + +![Screenshot](https://github.com/Jevin0/css-diff-devtools/blob/main/img/screenshot.png?raw=true) + +## 为什么使用 CSS-Diff？ + +浏览器 DevTools 很适合检查单个元素，但当两个相似元素渲染结果不一致时，仍然经常需要在样式面板之间来回切换。CSS-Diff 会把两个元素的 computed style 放在同一张表中，优先展示差异，并让整个排查流程停留在 DevTools 内完成。 + +## 功能特点 + +- **DevTools Elements 侧边栏**：在 Elements 面板中直接添加 `CSS-Diff` 面板。 +- **双元素比较**：选择两个 DOM 元素后，比较它们标准化后的计算 CSS 属性。 +- **差异优先展示**：默认只展示有差异的属性，也可以通过 `显示全部` 查看完整 computed style 列表。 +- **属性搜索**：按 CSS 属性名过滤对比结果。 +- **一键复制**：点击任意左右侧样式值单元格，即可复制 `property: value;`。 +- **跨窗口/标签页同步**：选中的元素数据会同步广播到其他已打开的窗口/标签页，便于并排比较不同页面状态。 +- **本地化界面**：内置英文和简体中文浏览器 i18n 文案。 + +## 安装 + +> [!WARNING] +> CSS-Diff 目前暂未上架浏览器扩展商店。 + +从 [Releases](https://github.com/Jevin0/css-diff-devtools/releases) 下载打包后的 zip 文件，然后在浏览器扩展程序页面中手动安装或加载。 + +## 使用方法 + +1. 打开需要检查的页面。 +2. 打开 DevTools，并切换到 Elements 面板。 +3. 打开 `CSS-Diff` 侧边栏。 +4. 先选择第一个 DOM 元素，再选择第二个 DOM 元素。 +5. 查看高亮的样式差异、搜索属性，或启用 `显示全部`。 +6. 点击左侧或右侧的样式值单元格，复制对应 CSS 声明。 +7. 点击 `清除选择` 开始新的比较。 + +## 本地开发 + +安装依赖： + +```sh +pnpm install --frozen-lockfile +``` + +启动开发构建： + +```sh +pnpm dev +``` + +其他浏览器目标： + +```sh +pnpm dev:firefox +pnpm dev:edge +``` + +## 构建 + +构建全部支持目标： + +```sh +pnpm build +``` + +构建单个目标： + +```sh +pnpm build:chrome +pnpm build:firefox +pnpm build:edge +``` + +打包扩展： + +```sh +pnpm zip +``` + +## 技术栈 + +- [WXT](https://wxt.dev/) 用于浏览器扩展开发 +- [Vue 3](https://vuejs.org/) 用于 DevTools 面板 UI +- [Element Plus](https://element-plus.org/) 和 [Tailwind CSS](https://tailwindcss.com/) 用于界面组件与样式 +- TypeScript 和 `vue-tsc` 用于类型检查 +- WXT/browser `i18n` 用于本地化文案 + +## 灵感来源 + +- https://github.com/kdzwinel/CSS-Diff + +## 许可证 + +[MIT](./LICENSE.md)