TweakSync lets you style web elements in real-time from Chrome and sync changes with VS Code for a smooth development experience.

Latest Version

Version
0.0.5
Update
September 30, 2024
Size
245KiB
Developer
tweaksync.dev
Category
Users
6
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
SidePanel
ActiveTab
Scripting
Storage
See more

TweakSync Extension

TweakSync is a powerful tool designed for front-end developers and web designers who want to streamline their styling workflow. This Chrome extension enables real-time styling of web elements directly within Chrome, allowing you to see changes instantly as you tweak styles.

Key Features:

Real-Time Styling: Easily select any element on a webpage and adjust its styles on the fly. With live previews, you can see the impact of your changes immediately, making the styling process more efficient and intuitive.

Seamless Integration with VS Code: TweakSync syncs your style changes directly with your VS Code environment. This integration allows you to apply and save your CSS changes effortlessly, ensuring that your development process remains smooth and uninterrupted.

Efficient Workflow: By bridging the gap between your browser and your code editor, TweakSync eliminates the need to switch back and forth between tools. This results in a more streamlined workflow, saving you time and effort.

Why Install TweakSync?

Boost Your Efficiency: Save time with instant style updates and seamless integration with VS Code. TweakSync helps you make changes faster and more accurately.

Improve Your Design Process: Experience a smoother design workflow with live previews and direct synchronization between Chrome and VS Code.

Streamline Your Development: Minimize context-switching and keep your development process focused with TweakSync is real-time styling and VS Code integration.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "TweakSync", "version": "0.0.5", "description": "TweakSync lets you style web elements in real-time from Chrome and sync changes with VS Code for a smooth development experience.", "action": { "default_title": "TweakSync" }, "background": { "service_worker": "scripts/serviceworker.js" }, "icons": { "16": "icon16.png", "32": "icon32.png", "48": "icon48.png", "128": "icon128.png" }, "host_permissions": [""], "permissions": ["sidePanel", "activeTab", "scripting", "storage"], "commands": { "open": { "suggested_key": { "default": "Ctrl+Shift+S", "mac": "Command+Shift+S" }, "description": "Open TweakSync" }, "connect": { "suggested_key": { "default": "Ctrl+Shift+Z", "mac": "Command+Shift+Z" }, "description": "Connect to VS Code" }, "start_edit": { "suggested_key": { "default": "Ctrl+Shift+E", "mac": "Command+Shift+E" }, "description": "Start editing" }, "stop_edit": { "suggested_key": { "default": "Ctrl+Shift+X", "mac": "Command+Shift+X" }, "description": "Stop editing" } }}
Read more

Similar Extensions

icon

Show All Padding & Margins Extension · Developer Tools 6 1 ★ 23.17KiB

icon

React code finder Extension · Developer Tools 6 5 ★ 2.95MiB

icon

Chrome Extension Builder Extension · Developer Tools 6 14 ★ 512KiB

icon

UI Inspector - Live Style Editor Extension · Developer Tools 6 2 ★ 90.41KiB

icon

View CSS Extension · Developer Tools 6 1 ★ 5.89KiB

icon

Extension Sync Extension · Productivity 6 7 ★ 569KiB

icon

Responsive viewer For Chrome Extension · Productivity 6 8 ★ 25.34KiB

icon

Tab Group Manager Extension · Productivity 6 30 ★ 102KiB

icon

Easy Extension Manager Extension · Productivity 6 6 ★ 100KiB

icon

Relume Chrome Extension for Webflow Extension · Developer Tools 6 37 ★ 2.28MiB

icon

HTFLOW Inline HTML CSS Extractor Extension · Developer Tools 6 5 ★ 206KiB

icon

LeetSync - Leetcode to Github Synchronizer Extension · Developer Tools 6 51 ★ 5.57MiB

icon

CSS Debugger Extension · Developer Tools 6 9 ★ 13.27KiB

icon

Chrome Extension Source Viewer Extension · Developer Tools 6 3 ★ 580KiB

icon

xSync by xAtom Extension · Developer Tools 6 13 ★ 11.6KiB

icon

Inven Extension · Productivity 6 4 ★ 52.05MiB

icon

Highlight Focus Extension · Developer Tools 6 2 ★ 13.45KiB

icon

LeetCode Tracker Extension · Developer Tools 6 2 ★ 1.33MiB

icon

Website Customizer: Add Custom Style and CSS Extension · Productivity 6 2 ★ 1.45MiB

icon

CSS Scanly - Copy CSS | Tailwind & Bootstrap Extension · Productivity 6 5 ★ 35.52KiB

icon

Quick Image Saving via CSS Selector Extension · Productivity 6 1 ★ 9.33MiB

icon

Notepad for Chrome Extension · Productivity 6 3 ★ 43.57KiB

icon

Simple User Scripts Extension · Productivity 6 0 ★ 94.92KiB

icon

JSON & Code Viewer Extension · Developer Tools 6 2 ★ 1.66MiB