docs: improve README documentation (#10)

Author: jevin98

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`.

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)

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)