https://github.com/jalalvandi/firefox-custom-css-injector
Firefox browser extension that allows you to inject your own custom CSS rules into any website
https://github.com/jalalvandi/firefox-custom-css-injector
css custom-css firefox firefox-addon firefox-extension
Last synced: about 2 months ago
JSON representation
Firefox browser extension that allows you to inject your own custom CSS rules into any website
- Host: GitHub
- URL: https://github.com/jalalvandi/firefox-custom-css-injector
- Owner: jalalvandi
- License: mit
- Created: 2025-04-01T12:17:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T12:52:08.000Z (about 1 year ago)
- Last Synced: 2025-04-01T13:25:00.104Z (about 1 year ago)
- Topics: css, custom-css, firefox, firefox-addon, firefox-extension
- Language: JavaScript
- Homepage: https://sinajalalvandi.ir
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Custom CSS Injector (Firefox Addon)
A simple Firefox browser extension that allows you to inject your own custom CSS rules into any website. Styles are saved per domain and applied automatically whenever you visit the site.
## Features
* **Inject Custom CSS:** Apply your own styles to modify the appearance of websites.
* **Domain-Specific Styles:** Save different CSS rules for different websites (based on their hostname).
* **Persistent Storage:** Your custom CSS rules are saved locally using `browser.storage.local` and persist across browser sessions.
* **Automatic Application:** Saved CSS is automatically applied every time you load a page on a configured domain.
* **Instant Application:** CSS changes made in the popup are applied immediately without needing to reload the page.
* **Simple Popup Interface:** Easily add or edit CSS via a popup accessed from the Firefox toolbar icon.
## How to Use
1. **Install the Extension:** Follow the installation steps below.
2. **Navigate:** Go to the website you wish to style.
3. **Open Popup:** Click the extension's icon (usually looks like the `icon-48.png` you created) in the Firefox toolbar.
4. **Verify Domain:** The popup will display the current website's domain.
5. **Enter CSS:** Type or paste your custom CSS rules into the text area.
6. **Save & Apply:** Click the "Save & Apply" button.
7. **See Changes:** Your CSS rules should immediately affect the page. They are now saved and will be automatically applied the next time you visit this domain.
8. **Edit/Remove:** To edit, open the popup again on the same domain, modify the CSS, and save. To remove styles for a domain, clear the text area and click "Save & Apply".
## Installation (for Development/Testing)
Since this is custom code, you need to load it as a temporary add-on:
1. **Get the Code:** Download or clone the extension's files to a local directory on your computer.
2. **Open Firefox.**
3. **Navigate to Add-ons Debugging:** Type `about:debugging#/runtime/this-firefox` into the address bar and press Enter.
4. **Load Temporary Add-on:** Click the "Load Temporary Add-on..." button.
5. **Select Manifest:** Browse to the directory where you saved the extension files and select the `manifest.json` file.
6. **Done:** The extension should now be loaded, and its icon should appear in the Firefox toolbar.
**Note:** Temporary add-ons are removed when you close Firefox. For a permanent installation, the extension would need to be packaged and potentially signed by Mozilla.
## File Structure
* `manifest.json`: The core configuration file detailing the extension's properties, permissions, scripts, and UI components.
* `icons/`: Contains the icons used for the toolbar button and extension listings.
* `popup/`: Holds the files for the user interface that appears when clicking the toolbar icon.
* `popup.html`: The structure of the popup window.
* `popup.css`: Styles for the popup window.
* `popup.js`: Handles user input, saving CSS to storage, and communicating with the content script.
* `content_scripts/`: Contains scripts injected directly into web pages.
* `injector.js`: Responsible for creating/updating the `` tag on the web page and applying the CSS rules. Listens for messages from the popup and background script.
* `background/`: Contains scripts that run in the background, independent of specific web pages.
* `background.js`: Listens for events (like page loads) and instructs the content script to apply the appropriate saved CSS for the loaded domain.
## Reporting Issues
Encounter a bug? Click "Report Issue" in the popup and send the URL along with a description to jalalvandi.sina@gmail.com.
## License
This project is open-source under the Apache-2.0 License ([License](LICENSE)).
## Credits
Developed by Sina Jalalvandi (mailto:jalalvandi.sina@gmail.com). Contributions and feedback are welcome!
```
Vaersion: 1.1.0
Sign: Custom CSS Injector-20250411-34b291c67838-27ee80d95aac2ee4c6d6cad04a14338d
```