Skip to content

Commit bafc071

Browse files
SysAdminDocSysAdminDoc
authored
Add files via upload
1 parent b6d4a57 commit bafc071

14 files changed

Lines changed: 3021 additions & 2 deletions

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2026 Matthew Parker
3+
Copyright (c) 2026 SysAdminDoc
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 135 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,135 @@
1-
# StyleCraft
1+
# StyleCraft
2+
3+
![Version](https://img.shields.io/badge/version-1.0.0-blue)
4+
![License](https://img.shields.io/badge/license-MIT-green)
5+
![Platform](https://img.shields.io/badge/platform-Chrome%20%7C%20Edge%20%7C%20Brave-0078D4)
6+
![Manifest](https://img.shields.io/badge/Manifest-V3-4285F4?logo=googlechrome&logoColor=white)
7+
8+
> A visual CSS editor for Chrome that lets you pick elements, tweak styles, and install community themes — all from a premium dark-themed interface.
9+
10+
![Screenshot](screenshot.png)
11+
12+
## Installation
13+
14+
1. Download or clone this repository
15+
2. Open `chrome://extensions` in Chrome, Edge, or Brave
16+
3. Enable **Developer mode** (top right)
17+
4. Click **Load unpacked** and select the `stylecraft` folder
18+
19+
## Features
20+
21+
| Feature | Description |
22+
|---------|-------------|
23+
| **Element Picker** | uBlock-style selector with depth navigation (parent/child/sibling traversal) and adjustable specificity |
24+
| **Visual Editor** | Point-and-click CSS property editing across 10 categories with live preview |
25+
| **Code Editor** | Raw CSS textarea with line numbers, undo/redo, and real-time injection |
26+
| **Box Model Visualizer** | Stylebot-style interactive box model — click any margin/border/padding/content value to edit inline with arrow key increment and live CSS preview |
27+
| **Theme Browser** | Search and install community themes from [UserStyles.world](https://userstyles.world) directly in the editor |
28+
| **Dual CSS Layers** | Theme CSS and custom CSS applied as separate layers — custom always wins |
29+
| **Stylus Compatibility** | Full `@-moz-document` / `@document` directive parsing (domain, url, url-prefix, regexp) |
30+
| **3 UI Themes** | Catppuccin Mocha (default), Dark (OLED), and Light — synced across popup, editor, and options |
31+
| **Context Menus** | Right-click → "Style this element" or "Hide this element" |
32+
| **Import / Export** | Full data backup and restore as JSON |
33+
| **Global CSS** | Write CSS that applies across every site |
34+
35+
### Editor Property Categories
36+
37+
Typography, Colors & Background, Spacing, Size & Layout, Flexbox, Position, Border & Outline, Shadows & Effects, Transform & Animation, Cursor & Misc
38+
39+
### Box Model Editing
40+
41+
Click any value in the box model diagram to edit it inline. While focused:
42+
43+
- **Up/Down** arrows increment/decrement by 1px
44+
- **Shift+Up/Down** increment/decrement by 10px
45+
- Negative values are fully supported (useful for negative margins)
46+
- CSS updates live as you press arrow keys — no need to commit first
47+
- **Enter** commits, **Escape** reverts to original value
48+
- Click the content area (W × H) to edit width and height with **Tab** to switch fields
49+
50+
### Options Page Tabs
51+
52+
| Tab | Purpose |
53+
|-----|---------|
54+
| Custom CSS | View and edit per-domain custom CSS rules |
55+
| Installed Themes | Manage installed UserStyles.world themes per domain |
56+
| Browse Themes | Search and install themes from UserStyles.world |
57+
| Global CSS | CSS applied to all websites |
58+
| Shortcuts | Quick-reference for keyboard shortcuts |
59+
| Settings | UI theme, accent color, injection timing, export/import |
60+
61+
## Keyboard Shortcuts
62+
63+
| Shortcut | Action |
64+
|----------|--------|
65+
| `Alt+S` | Open StyleCraft popup |
66+
| `Alt+Shift+S` | Toggle editor on current page |
67+
68+
## How It Works
69+
70+
```
71+
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
72+
│ inject-styles │────>│ chrome.storage │<────│ background │
73+
│ (document_start)│ │ .local │ │ (service worker)│
74+
│ │ │ │ │ │
75+
│ Reads storage │ │ stylecraft_data │ │ Handles messages│
76+
│ directly, no SW │ │ per-domain CSS │ │ USw API proxy │
77+
│ dependency │ │ + settings │ │ Tab broadcasts │
78+
└─────────────────┘ └────────┬────────┘ └─────────────────┘
79+
│
80+
┌────────────┴────────────┐
81+
│ │
82+
┌─────┴─────┐ ┌───────┴───────┐
83+
│ content │ │ popup / │
84+
│ (editor) │ │ options │
85+
│ │ │ │
86+
│ Shadow DOM │ │ Theme mgmt │
87+
│ Visual CSS │ │ USw browser │
88+
│ Box model │ │ Import/Export │
89+
└────────────┘ └───────────────┘
90+
```
91+
92+
**Style persistence** — `inject-styles.js` runs at `document_start` and reads directly from `chrome.storage.local`, bypassing the service worker entirely. This guarantees styles load even when the MV3 service worker is asleep. A DOMContentLoaded re-apply ensures styles survive late `<head>` creation.
93+
94+
**Dual layer system** — Each domain stores two independent layers: theme CSS (from installed UserStyles.world themes) and custom CSS (from the visual/code editor). Theme CSS injects first, custom CSS always overlays on top. Both layers are managed through separate `<style>` elements with fixed IDs.
95+
96+
**Shadow DOM isolation** — The editor panel injects into the page inside a Shadow DOM container, preventing host page styles from affecting the editor UI and vice versa.
97+
98+
## File Structure
99+
100+
```
101+
stylecraft/
102+
├── manifest.json # MV3 manifest
103+
├── background.js # Service worker — message router, USw API, storage
104+
├── inject-styles.js # Content script (document_start) — reads storage, injects CSS
105+
├── content.js # Editor UI — shadow DOM panel, visual editor, box model
106+
├── popup.html/js # Extension popup — domain toggle, USw search, quick tools
107+
├── options.html/js # Full options page — 6 tabs, theme management, settings
108+
├── theme.js # Shared theme engine — auto-loads and syncs across all UIs
109+
├── icons/ # Extension icons (16, 48, 128)
110+
├── LICENSE # MIT
111+
└── README.md
112+
```
113+
114+
## Prerequisites
115+
116+
- Chrome 110+, Edge 110+, or Brave (any Chromium-based browser with MV3 support)
117+
- No build step required — plain JS, no bundler, no dependencies
118+
119+
## FAQ
120+
121+
**Styles disappear after refresh?**
122+
Fixed in v1.0.0. The injector now reads directly from `chrome.storage.local` at `document_start` instead of messaging the service worker, which may be asleep in MV3.
123+
124+
**Can I use Stylus themes?**
125+
Yes. StyleCraft parses `@-moz-document` and `@document` directives (domain, url, url-prefix, regexp) — the same format Stylus/UserStyles.world uses.
126+
127+
**Does the editor affect the page?**
128+
No. The editor runs inside a Shadow DOM container. Its styles and DOM are completely isolated from the page.
129+
130+
**Can I use negative margins?**
131+
Yes. The box model editor accepts any integer value including negatives. Arrow keys work in both directions with no floor.
132+
133+
## License
134+
135+
[MIT](LICENSE) — Issues and PRs welcome.

0 commit comments

Comments
 (0)