Net Ninja - Sidebar Toggler

Introduction

Net Ninja - Sidebar Toggler is a Chrome extension designed to enhance your browsing experience on The Net Ninja website by allowing you to easily hide or show the sidebar. This extension is built using modern web technologies, including Vue.js and Vite, and leverages CRXJS to simplify the development of Chrome extensions.

Table of Contents

• Features

• Installation

• Usage

• Development

• Dependencies

• Configuration

• Contributing

• License

Features

• Toggle Sidebar: Quickly hide or show the sidebar on The Net Ninja website with a single click.

• Lightweight and Fast: Built with modern web technologies to ensure a smooth user experience.

Installation

From the Chrome Web Store

(Include this section if you plan to publish the extension on the Chrome Web Store)

1. Go to the Chrome Web Store.

2. Search for "Net Ninja - Sidebar Toggler".

3. Click "Add to Chrome".

Manual Installation

1. Clone this repository or download the ZIP file.

2. Open Chrome and go to chrome://extensions/.

3. Enable "Developer mode" by toggling the switch in the top right.

4. Click "Load unpacked" and select the directory where the extension files are located.

5. The extension should now be installed and active.

Usage

1. Once installed, click on the Net Ninja Sidebar Toggler icon in the Chrome toolbar.

2. Use the toggle button to hide or show the sidebar on The Net Ninja website.

3. The sidebar's visibility will change immediately according to your preference.

Development

If you'd like to contribute or modify the extension, follow these steps to set up the development environment:

Prerequisites

• Node.js (version 14.x or higher)

• Bun (version 1.x or higher)

Setup

1. Clone the repository

   git clone https://github.com/xaypanya/net-ninja-sidebar-toggle.git

2. Install dependencies

   bun install

3. Start the development server

   bun run dev

4. Load the extension in Chrome

• Open Chrome and go to chrome://extensions/.

• Enable "Developer mode".

• Click "Load unpacked" and select the dist folder generated by the development server.

Building for Production

bun run build

The build output will be located in the dist directory. This folder can be loaded as an unpacked extension in Chrome or packaged for distribution.

Dependencies

This project relies on the following dependencies:

• Vue.js: A progressive JavaScript framework for building user interfaces.

• Tailwind CSS: A utility-first CSS framework.

• Vite: A build tool that provides a fast development server and optimized build process.

• CRXJS: A plugin for Vite to simplify Chrome extension development.

Configuration

The extension can be customized by modifying the following files:

• Fork this repository.

• Make your changes and commit them: git commit -m 'Add some feature'.

• Push to the branch: git push origin feature-name.

• Open a pull request.

Contributing

Contributions are welcome! If you have any ideas, issues, or suggestions, please open an issue or submit a pull request.

Steps to Contribute

1. Fork this repository.

2. Create a new branch: git checkout -b feature-name.

3. Make your changes and commit them: git commit -m 'Add some feature'.

4. Push to the branch: git push origin feature-name.

5. Open a pull request.

License

This project is licensed under the MIT License.