The Skord Menu is a powerful, all-in-one browser extension designed to enhance your browsing experience with a suite of developer tools, customization options, and utility features. This guide will walk you through its main functionalities.
Getting Started:
- Inject the Script: Follow the "How to Install a Script" guide to get the Skord Menu script running on any webpage.
- Open the Menu: A small orange dot will appear in the top-left corner of your browser window. Click this dot, or press the `~` (tilde) key on your keyboard, to open the Skord Menu.
- Minimize/Close: You can minimize the menu by clicking the yellow button in the titlebar, or close it by clicking the red button. Pressing `~` or `Escape` will also close/hide it.
- Fullscreen Mode: Click the green button in the titlebar to toggle fullscreen mode. This expands the menu to fill the entire screen and prevents the underlying page from scrolling.
Sidebar Navigation:
The left sidebar provides access to all of Skord's features:
- About: Information about the Skord Menu and its contributors.
- Features: A comprehensive list of all functionalities offered by Skord.
- Dev Tools: Access to developer utilities like Element Inspector, Console Viewer, and Network Interception controls.
- Performance: Monitor real-time performance metrics (FPS, JS Heap, CPU usage).
- Light Editor: Customize the visual appearance of the Skord Menu and the webpage (opacity, colors, font size, border radius).
- CSS Editor: (Requires Dev Tools to be ON) Write, save, and manage custom CSS styles for specific websites or all sites.
- Script Injector: (Requires Dev Tools to be ON) Write, save, and manage custom JavaScript scripts for specific websites or all sites.
- Script Library: Browse and download pre-made scripts.
- Theme Library: Browse and download pre-defined CSS themes.
- Cache: Manage Skord Menu's saved data (settings, scripts, styles) including backup and restore options.
- Logs: (Requires Dev Tools to be ON) View a real-time log of events and actions within Skord.
- Log Controls: (Requires Dev Tools to be ON) Configure which types of events are logged (keyboard, mouse, network, errors, page swaps).
- Documentation: This very guide you are reading!
Key Features Explained:
1. Dev Tools:
- Toggle Element Inspector: Activates a mode where clicking elements on the webpage logs their ID, classes, and basic styles to the "Console Output".
- Toggle Persistent Highlight: When ON, the last inspected element remains highlighted on the page.
- Console Output: Displays live `console.log`, `console.warn`, and `console.error` messages from the current webpage. Click "Clear Console Logs" to empty it.
- Network Interceptor:
- Toggle Network Blocking: Stops new network requests (e.g., images, scripts) from loading.
- Toggle Network Logging: Records all network requests and their status in the "Logs" tab.
- Toggle CSS Editor / Script Injector: These buttons enable/disable the respective tabs in the sidebar, making them visible or hidden.
2. Light Editor:
This section allows you to personalize Skord Menu's appearance and affect the current page's visuals.
- Page Opacity: Adjusts the transparency of the entire webpage. You can choose to apply this opacity to the Skord Menu button itself.
- Accent Color: Change the primary color used throughout the Skord Menu interface.
- Rainbow Mode: Toggles a dynamic rainbow animation for the accent color.
- Font Size: Adjust the text size within the Skord Menu for better readability.
- Border Radius: Modify the roundness of the menu's corners and internal elements.
- Background Color / Text Color: Customize the main background and text colors of the Skord Menu.
- Save Theme Settings: Saves all your theme customizations to local storage so they persist across browser sessions.
- Reset Buttons: Each setting has a "Reset" button to revert it to its default value. "Reset All Theme Settings" reverts everything.
3. CSS Editor:
A powerful tool for applying custom CSS to web pages. (Ensure "CSS Editor" is enabled in Dev Tools first).
- Editor Tab:
- Style Name: Give your custom CSS a name.
- Apply to: Choose whether your CSS applies to "All Sites", the "Current URL", the "Current Domain", or "Custom URLs/Domains" (comma-separated list).
- CSS Textarea: Write or paste your CSS code here.
- Apply: Applies the CSS from the textarea to the current page immediately (not saved).
- Clear Editor: Clears the name and code from the editor.
- Save Current Style: Saves the CSS with its name and target sites to your browser's storage.
- Files Sidebar: Lists your saved styles. Click a style name to load it into the editor.
- Saved Styles Tab: Lists all your saved CSS styles.
- Enable/Disable: Toggles whether a saved style is actively applied to its target sites.
- Load: Loads the style into the editor for modification.
- Delete: Permanently removes a saved style.
4. Script Injector:
Allows you to run and manage custom JavaScript code. (Ensure "Script Injector" is enabled in Dev Tools first).
- Editor Tab:
- Script Name: Give your custom script a name.
- Apply to: Choose whether your script applies to "All Sites", the "Current URL", the "Current Domain", or "Custom URLs/Domains".
- JavaScript Textarea: Write or paste your JavaScript code here.
- Execute: Runs the code from the textarea immediately on the current page.
- Clear: Clears the name and code from the editor.
- Save Current Script: Saves the script with its name and target sites to your browser's storage.
- Files Sidebar: Lists your saved scripts. Click a script name to load it into the editor.
- Saved Scripts Tab: Lists all your saved JavaScript scripts.
- Enable/Disable: Toggles whether a saved script will automatically run on page load for its target sites.
- Load: Loads the script into the editor for modification.
- Delete: Permanently removes a saved script.
5. Performance:
Provides real-time monitoring of your browser's performance metrics.
- Start/Stop Performance Monitor: Toggles the display of:
- FPS (Frames Per Second): How smoothly the page is rendering.
- JS Heap: Memory usage by JavaScript on the page.
- CPU Usage: An estimate of CPU resources consumed by the page.
- Graphs are displayed to visualize these metrics over time.
6. Cache:
Manages the data stored by the Skord Menu extension.
- Clear All Skord Data: Resets all settings, custom scripts, and custom styles to their defaults. This is a powerful action and requires confirmation.
- Clear Data for Specific URLs/Domains: Removes scripts and styles specifically targeted to a URL or domain you enter.
- Download All Skord Data (JSON): Creates a backup of all your Skord Menu data as a JSON file.
- Upload & Load Skord Data: Restores data from a previously downloaded JSON file, overwriting your current data.
Important Notes:
- Ethical Use: Skord Menu, especially its Dev Tools, CSS Editor, and Script Injector, are powerful tools. They are intended for educational and legitimate development/testing purposes. Always use them responsibly and ethically, and only on websites where you have explicit permission. Unauthorized use can have legal consequences.
- Persistence: Most settings, saved scripts, and styles are stored in your browser's local storage (or Chrome's extension storage) and will persist even after closing and reopening your browser.
- Browser Compatibility: Skord Menu is designed for modern web browsers.