Skip to content

Commit 963a131

Browse files
Tim-MaesTim-Maes
committed
Init BlazorSnap
0 parents  commit 963a131

File tree

14 files changed

+664
-0
lines changed

14 files changed

+664
-0
lines changed

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Browser extension package files
2+
*.crx
3+
*.zip
4+
*.pem
5+
6+
# Development files
7+
.DS_Store
8+
Thumbs.db
9+
*.log
10+
*.tmp
11+
12+
# Editor files
13+
.vscode/
14+
.idea/
15+
*.swp
16+
*.swo
17+
*~
18+
19+
# Node.js (if you add build tools later)
20+
node_modules/
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# Temporary files
26+
*.temp
27+
*.cache

‎CHANGELOG.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Changelog
2+
3+
## [0.0.1] - 2025-08-07
4+
5+
### Added
6+
- Initial release of BlazorSnap browser extension
7+
- Right-click context menu to capture HTML elements
8+
- Automatic popup opening after element selection
9+
- HTML to Blazor component conversion
10+
- Utility class to semantic CSS conversion
11+
- Support for Facebook and Google utility classes
12+
- Inline style extraction and conversion
13+
- Clean, formatted Razor component output
14+
- Companion CSS file generation
15+
- Smart HTML simplification and cleanup
16+
- Event handler stub generation
17+
- Parameter property generation for meaningful attributes
18+
19+
### Features
20+
- Context menu integration for easy element selection
21+
- Automatic coordinate tracking for precise element capture
22+
- Real-time conversion with live preview
23+
- Copy to clipboard functionality
24+
- Support for nested HTML structures
25+
- Framework-agnostic utility class mapping
26+
- Semantic class name generation
27+
28+
### Technical
29+
- Manifest V3 compliance
30+
- Content script for coordinate tracking
31+
- Service worker for background processing
32+
- Modern JavaScript with proper error handling
33+
- Clean separation of concerns

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Tim Maes
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# BlazorSnap 🔥
2+
3+
Convert any HTML element into a reusable Blazor component stub with just a right-click!
4+
5+
## 🚀 Features
6+
7+
- **Right-click to convert**: Simply right-click any HTML element and select "Convert Element to Blazor Component"
8+
- **Automatic popup**: The extension automatically opens with the captured HTML ready to convert
9+
- **Clean Blazor components**: Generates properly formatted .razor components with semantic class names
10+
- **Companion CSS**: Creates matching CSS files with converted utility classes
11+
- **Smart simplification**: Removes unnecessary attributes and limits complexity for maintainable code
12+
13+
## 📦 Installation
14+
15+
### From Source (Development)
16+
1. Clone this repository
17+
2. Open Chrome/Edge and go to `chrome://extensions/` or `edge://extensions/`
18+
3. Enable "Developer mode"
19+
4. Click "Load unpacked" and select the `src` folder
20+
5. The BlazorSnap extension should now appear in your extensions
21+
22+
## 🎯 How to Use
23+
24+
1. **Navigate to any website** with HTML elements you want to convert
25+
2. **Right-click** on the element you want to capture
26+
3. **Select "Convert Element to Blazor Component"** from the context menu
27+
4. **The popup opens automatically** with the HTML loaded
28+
5. **Click "Generate .razor"** to convert to a Blazor component
29+
6. **Click "Copy to Clipboard"** to copy both the .razor component and CSS file
30+
31+
## 🔧 What It Generates
32+
33+
### Input (HTML Element):
34+
```html
35+
<div class="flex items-center p-4 bg-white rounded-lg">
36+
<span>Hello World</span>
37+
</div>
38+
```
39+
40+
### Output (Blazor Component):
41+
```razor
42+
@* Generated Blazor Component *@
43+
<div class="mycomponent-div-1">
44+
<span>Hello World</span>
45+
</div>
46+
47+
@code {
48+
[Parameter] public RenderFragment? ChildContent { get; set; }
49+
50+
private void HandleClick()
51+
{
52+
// TODO: Implement click handler
53+
}
54+
}
55+
```
56+
57+
### CSS File (MyComponent.razor.css):
58+
```css
59+
.mycomponent-div-1 {
60+
display: flex;
61+
align-items: center;
62+
padding: 16px;
63+
background-color: white;
64+
border-radius: 8px;
65+
}
66+
```
67+
## 🎨 Features in Detail
68+
69+
### Smart Class Conversion
70+
- Converts utility classes (like Tailwind, Bootstrap) to semantic CSS
71+
- Maps framework-specific classes (Facebook's `x1`, `x2` classes, Google's utility classes)
72+
- Generates clean, maintainable CSS rules
73+
74+
### HTML Simplification
75+
- Removes unnecessary attributes (`data-*`, `aria-*`, etc.)
76+
- Limits nesting depth to prevent overly complex components
77+
- Strips inline `<style>` tags and converts them to external CSS
78+
79+
### Blazor Best Practices
80+
- Generates proper `[Parameter]` properties for meaningful attributes
81+
- Includes event handler stubs (`HandleClick`, `HandleChange`)
82+
- Supports `ChildContent` for nested content
83+
- Uses proper Blazor syntax (`@onclick`, `@onchange`)
84+
85+
## 📝 License
86+
87+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎assets/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Extension Assets
2+
3+
This directory contains the icon files for the BlazorSnap browser extension.
4+
5+
## Icon Files
6+
7+
- **`icon16.png`** - 16x16 pixels - Used in the extension management page
8+
- **`icon48.png`** - 48x48 pixels - Used in the extensions management page
9+
- **`icon128.png`** - 128x128 pixels - Used during installation and in the Chrome Web Store
10+
11+
## Icon Guidelines
12+
13+
The icons should:
14+
- Be clear and recognizable at small sizes
15+
- Follow the Blazor/fire theme (🔥)
16+
- Have proper transparency for overlay on different backgrounds
17+
- Be optimized for web use (small file sizes)
18+
19+
## Updating Icons
20+
21+
If you need to update the icons:
22+
1. Ensure all three sizes are available
23+
2. Update the references in `manifest.json` if needed
24+
3. Test the extension to ensure icons display correctly

‎src/assets/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Extension Assets
2+
3+
This directory contains the icon files for the BlazorSnap browser extension.
4+
5+
## Icon Files
6+
7+
- **`icon16.png`** - 16x16 pixels - Used in the extension management page
8+
- **`icon48.png`** - 48x48 pixels - Used in the extensions management page
9+
- **`icon128.png`** - 128x128 pixels - Used during installation and in the Chrome Web Store
10+
11+
## Icon Guidelines
12+
13+
The icons should:
14+
- Be clear and recognizable at small sizes
15+
- Follow the Blazor/fire theme (🔥)
16+
- Have proper transparency for overlay on different backgrounds
17+
- Be optimized for web use (small file sizes)
18+
19+
## Updating Icons
20+
21+
If you need to update the icons:
22+
1. Ensure all three sizes are available
23+
2. Update the references in `manifest.json` if needed
24+
3. Test the extension to ensure icons display correctly

‎src/assets/icon128.png‎

14 KB
Loading

‎src/assets/icon16.png‎

604 Bytes
Loading

‎src/assets/icon48.png‎

2.36 KB
Loading

‎src/background.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
chrome.runtime.onInstalled.addListener(() => {
2+
chrome.contextMenus.create({
3+
id: "to-blazor",
4+
title: "Convert Element to Blazor Component",
5+
contexts: ["all"]
6+
});
7+
});
8+
9+
// Listen for messages from injected scripts
10+
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
11+
if (message.type === "BLAZOR_SNAP_HTML") {
12+
console.log('BlazorSnap: Received HTML message, storing...', message.html.substring(0, 100) + '...');
13+
chrome.storage.local.set({ blazorSnapHtml: message.html }, () => {
14+
console.log('BlazorSnap: HTML stored in background script');
15+
// Automatically open the popup after storing the HTML
16+
chrome.action.openPopup().catch(err => {
17+
console.log('BlazorSnap: Could not open popup automatically:', err);
18+
});
19+
});
20+
}
21+
});
22+
23+
chrome.contextMenus.onClicked.addListener((info, tab) => {
24+
if (info.menuItemId === "to-blazor") {
25+
console.log('BlazorSnap: Context menu clicked');
26+
chrome.scripting.executeScript({
27+
target: { tabId: tab.id },
28+
func: () => {
29+
const coords = window.blazorSnapCoords || { x: 0, y: 0 };
30+
const el = document.elementFromPoint(coords.x, coords.y);
31+
const html = el?.outerHTML ?? "";
32+
console.log('BlazorSnap: Found element', el, 'HTML length:', html.length);
33+
chrome.runtime.sendMessage({ type: "BLAZOR_SNAP_HTML", html });
34+
}
35+
});
36+
}
37+
});

0 commit comments

Comments
 (0)