https://github.com/muhammad-noraeii/cryptobase
CryptoBase: A tool to encode and decode text in Base64, with a Dark Mode toggle and a Copy Result button for easy copying.
https://github.com/muhammad-noraeii/cryptobase
base64 base64-decoding base64-encoding chrome-extension css extension firefox-extension html javascript
Last synced: 2 months ago
JSON representation
CryptoBase: A tool to encode and decode text in Base64, with a Dark Mode toggle and a Copy Result button for easy copying.
- Host: GitHub
- URL: https://github.com/muhammad-noraeii/cryptobase
- Owner: Muhammad-Noraeii
- Created: 2025-01-21T18:38:41.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T19:22:56.000Z (4 months ago)
- Last Synced: 2025-02-08T20:25:44.217Z (4 months ago)
- Topics: base64, base64-decoding, base64-encoding, chrome-extension, css, extension, firefox-extension, html, javascript
- Language: CSS
- Homepage:
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## **CryptoBase - Base64 Encoder & Decoder**
**CryptoBase** is a simple Chrome extension that allows users to encode and decode text using the Base64 encoding scheme. The tool is designed with a user-friendly interface for quick and easy encoding and decoding tasks.
---
### **Table of Contents**
1. [Overview](#overview)
2. [Features](#features)
3. [Installation](#installation)
4. [How to Use](#how-to-use)
5. [File Structure](#file-structure)
6. [Code Explanation](#code-explanation)
7. [Contributing](#contributing)
---
### **Overview**
CryptoBase is a lightweight Base64 encoder and decoder that allows users to:
- Encode text into Base64.
- Decode Base64 encoded text back to its original form.
The extension works by providing a clean, intuitive interface with a text input area and two buttons: "Encode" and "Decode". The results are shown in an output text area, making it quick and easy for users to encode or decode any string of text.
---
### **Features**
- **Base64 Encoding**: Convert regular text into Base64 encoding.
- **Base64 Decoding**: Convert Base64-encoded strings back to readable text.
- **Responsive Design**: Fully responsive layout for smooth usage across devices.
- **User-Friendly Interface**: Simple and clean design for easy interaction.
---
### **Installation**
To use **CryptoBase** as a Chrome extension:
1. **Clone or download the repository**:
- You can clone the repository using Git or simply download it as a ZIP file.
```bash
git clone https://github.com/Muhammad-Noraeii/CryptoBase.git
```
2. **Load the extension in Chrome**:
- Open Google Chrome.
- Go to `chrome://extensions/`.
- Enable **Developer mode** in the top-right corner.
- Click on **Load unpacked**.
- Select the folder where you saved the project.
3. **Start using CryptoBase**:
- After installing the extension, you will see the CryptoBase icon in the browser's extension bar.
- Click on the icon to open the extension popup.
---
### **How to Use**
1. **Enter the text** you want to encode or decode in the "Enter text here" textarea.
2. **Click on the "Encode" button** to encode the entered text to Base64. The result will appear in the output field.
3. **Click on the "Decode" button** to decode a Base64-encoded string back into its original form.
4. **Results** will be displayed in the "Result will appear here" textarea.
---
### **File Structure**
```plaintext
CryptoBase/
│
├── popup.html # HTML file that contains structure and styling
├── popup.js # JavaScript file with the logic for encoding/decoding
├── icons/ # Folder containing the icon images
│ ├── icon16.png # 16x16 pixel icon
│ ├── icon48.png # 48x48 pixel icon
│ └── icon128.png # 128x128 pixel icon
├── manifest.json # Manifest file required for Chrome extensions
└── README.md # Documentation file (this one!)
```
---
### **Code Explanation**
#### **popup.html**
The `popup.html` file contains the structure of the extension. It includes:
- **Textareas** for input and output.
- **Buttons** for triggering encoding and decoding.
- **Embedded CSS** for styling the page.
The `popup.html` file is the visual component that the user interacts with when using the extension.
#### **popup.js**
The `popup.js` file contains the JavaScript code responsible for the functionality of encoding and decoding text:
- The `encodeBase64()` function encodes input text to Base64 using `btoa()`.
- The `decodeBase64()` function decodes a Base64 string to its original form using `atob()`.
Event listeners are attached to the buttons so that when a user clicks "Encode" or "Decode", the respective function is called.
yling for buttons, textareas, and other UI elements.
#### **manifest.json**
The `manifest.json` file is a required configuration for any Chrome extension. It contains metadata about the extension, including:
- Name, version, description, etc.
- Permissions required (such as the ability to run in the background).
- The extension's popup HTML file and icons.
---
### **Contributing**
Contributions to CryptoBase are welcome! If you'd like to contribute, please follow these steps:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-name`).
3. Make your changes.
4. Commit your changes (`git commit -m 'Add new feature'`).
5. Push to the branch (`git push origin feature-name`).
6. Create a new pull request.
If you have any questions or suggestions, feel free to open an issue or submit a pull request.
---
### **License**
CryptoBase is licensed under the [MIT License](LICENSE).
---