Skip to content

Commit 5977ee0

Browse files
moefqymoefqy
committed
release init
1 parent 3c48377 commit 5977ee0

File tree

10 files changed

+808
-0
lines changed

10 files changed

+808
-0
lines changed

‎README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# CleansingX: Twitter X Filter
2+
3+
## Introduction
4+
5+
CleansingX is a Firefox extension that helps filter and hide unwanted content on [X.com](https://x.com) (formerly Twitter) to enhance your browsing experience.
6+
7+
## Features
8+
9+
- **Word Filtering**: Hide posts containing specific words or phrases
10+
- **URL Filtering**: Block content from specific domains or URLs
11+
- **Username Filtering**: Hide posts from specific usernames
12+
- **Wildcard Support**: Use * for flexible pattern matching
13+
- **Dark/Light Theme**: Toggle between dark and light interface modes
14+
- **Real-time Filtering**: Updates content filtering as you scroll
15+
- **Persistent Settings**: Your filters and preferences are saved across sessions
16+
17+
## Installation
18+
19+
1. Go to the [Firefox Add-ons page](https://addons.mozilla.org/en-US/firefox/addon/cleansingx-twitter-x-filter).
20+
2. Click on **Add to Firefox** to install the extension.
21+
3. A popup will appear. Click **Add** to confirm and complete the installation.
22+
23+
## Usage
24+
25+
1. Click the CleansingX icon in your browser toolbar
26+
2. Use the tabs to navigate between:
27+
- **Home**: Quick enable/disable filters
28+
- **Settings**: Configure filter rules
29+
- **Info**: View extension information and support
30+
31+
### Adding Filters
32+
33+
- **Words**: Enter comma-separated words or phrases to block
34+
- **URLs**: Enter comma-separated domain names (e.g., example.com)
35+
- **Usernames**: Enter comma-separated usernames with @ prefix
36+
37+
### Wildcard Patterns
38+
39+
- `word*` - Matches anything starting with "word"
40+
- `*word` - Matches anything ending with "word"
41+
- `*word*` - Matches anything containing "word"
42+
43+
## Contact
44+
For any inquiries or feedback, you can reach me at moefqy@rocketmail.com.

‎assets/css/popup.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
/* Root Variables */
2+
:root {
3+
/* Dark mode base colors */
4+
--bg-color: #1a1a1a;
5+
--text-color: #ffffff;
6+
--secondary-bg: #2a2a2a;
7+
--accent-color: #808080;
8+
--btn-bg-color: #f3d25a;
9+
--separator-color: rgba(255, 255, 255, 0.2);
10+
11+
/* Light mode base colors */
12+
--light-bg-color: #f5f5f5;
13+
--light-text-color: #000000;
14+
--light-secondary-bg: #f1f1f1;
15+
--light-accent-color: #ddd;
16+
--light-btn-bg-color: #000000;
17+
--light-separator-color: rgba(0, 0, 0, 0.2);
18+
19+
/* Common colors */
20+
--inactive-color: #ccc;
21+
--hover-color: #000000;
22+
--header-color: #000000;
23+
--header-text-color: #f3d25a;
24+
25+
/* Font sizes */
26+
--font-size-xlarge: 1.2em;
27+
--font-size-large: 1em;
28+
--font-size-small: 0.9em;
29+
}
30+
31+
/* Base Styles */
32+
body {
33+
font-family: Arial, sans-serif;
34+
font-size: var(--font-size-small);
35+
margin: 0;
36+
padding: 0;
37+
width: 300px;
38+
box-sizing: border-box;
39+
background-color: var(--light-bg-color);
40+
color: var(--light-text-color);
41+
}
42+
43+
body.dark-theme {
44+
background-color: var(--bg-color);
45+
color: var(--text-color);
46+
}
47+
48+
/* Header Styles */
49+
.header {
50+
display: flex;
51+
justify-content: space-between;
52+
align-items: center;
53+
padding: 10px;
54+
background-color: var(--header-color);
55+
border-bottom: 1px solid var(--light-separator-color);
56+
color: var(--light-bg-color);
57+
}
58+
59+
.logo {
60+
height: 30px;
61+
}
62+
63+
.header-text {
64+
font-size: var(--font-size-xlarge);
65+
font-weight: bold;
66+
color: var(--header-text-color);
67+
flex-grow: 1;
68+
margin-left: 8px;
69+
}
70+
71+
.theme-toggle {
72+
background: none;
73+
border: none;
74+
font-size: var(--font-size-large);
75+
cursor: pointer;
76+
color: inherit;
77+
}
78+
79+
/* Navigation Styles */
80+
.navbar {
81+
display: flex;
82+
background-color: var(--light-secondary-bg);
83+
border-bottom: 1px solid var(--light-separator-color);
84+
}
85+
86+
.tab-btn {
87+
flex: 1;
88+
padding: 10px;
89+
text-align: center;
90+
background: none;
91+
border: none;
92+
cursor: pointer;
93+
font-size: var(--font-size-small);
94+
color: inherit;
95+
}
96+
97+
.tab-btn:hover {
98+
font-weight: bold;
99+
}
100+
101+
.tab-btn.active {
102+
background-color: var(--light-accent-color);
103+
border-bottom: 3px solid var(--hover-color);
104+
font-weight: bold;
105+
}
106+
107+
/* Content Styles */
108+
.tab-content {
109+
display: none;
110+
padding: 10px;
111+
}
112+
113+
.tab-content.active {
114+
display: block;
115+
}
116+
117+
/* Form Elements */
118+
input {
119+
width: 90%;
120+
padding: 10px;
121+
margin: 2px 0;
122+
border: 1px solid var(--inactive-color);
123+
border-radius: 4px;
124+
background-color: var(--light-bg-color);
125+
color: var(--light-text-color);
126+
}
127+
128+
input:focus {
129+
outline: none;
130+
border: 2px solid var(--hover-color);
131+
}
132+
133+
input[type="checkbox"] {
134+
appearance: none;
135+
width: 20px;
136+
height: 20px;
137+
margin-right: 5px;
138+
border: 1px solid var(--inactive-color);
139+
background-color: var(--light-bg-color);
140+
cursor: pointer;
141+
vertical-align: middle;
142+
}
143+
144+
input[type="checkbox"]:checked {
145+
background-color: var(--light-btn-bg-color);
146+
border-color: var(--inactive-color);
147+
}
148+
149+
/* Info Section Styles */
150+
.info-section {
151+
padding: 8px;
152+
margin-bottom: 8px;
153+
border-bottom: 1px solid var(--light-separator-color);
154+
}
155+
156+
.info-section:last-child {
157+
border-bottom: none !important;
158+
margin-bottom: 0;
159+
}
160+
161+
.info-section h3 {
162+
margin: 0 0 4px 0;
163+
font-size: var(--font-size-large);
164+
color: var(--light-text-color);
165+
}
166+
167+
.info-section p {
168+
margin: 4px 0;
169+
font-size: var(--font-size-small);
170+
}
171+
172+
.info-section a {
173+
display: inline-block;
174+
margin-right: 8px;
175+
color: var(--accent-color);
176+
text-decoration: none;
177+
font-size: var(--font-size-small);
178+
}
179+
180+
.social-links {
181+
margin-top: 4px;
182+
}
183+
184+
/* Dark Theme */
185+
body.dark-theme .header {
186+
background-color: var(--header-color);
187+
border-bottom: 1px solid var(--separator-color);
188+
color: var(--bg-color);
189+
}
190+
191+
body.dark-theme .navbar {
192+
background-color: var(--secondary-bg);
193+
border-bottom: 1px solid var(--separator-color);
194+
}
195+
196+
body.dark-theme .tab-btn.active {
197+
background-color: var(--accent-color);
198+
border-bottom: 3px solid var(--light-accent-color);
199+
}
200+
201+
body.dark-theme input {
202+
background-color: var(--secondary-bg);
203+
color: var(--text-color);
204+
border: 1px solid var(--separator-color);
205+
}
206+
207+
body.dark-theme [type="checkbox"]:checked {
208+
background-color: var(--btn-bg-color);
209+
border-color: var(--inactive-color);
210+
}
211+
212+
body.dark-theme .info-section h3 {
213+
color: var(--text-color);
214+
}
215+
216+
body.dark-theme .info-section {
217+
border-bottom: 1px solid var(--separator-color);
218+
}

‎assets/html/popup.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CleansingX</title>
7+
<link rel="stylesheet" href="../css/popup.css">
8+
</head>
9+
<body>
10+
<!-- Header -->
11+
<header class="header">
12+
<img class="logo" src="../img/icon-128.png" alt="Logo">
13+
<span class="header-text">CleansingX</span>
14+
<button id="themeToggle" class="theme-toggle">🌙</button>
15+
</header>
16+
17+
<!-- Navbar -->
18+
<nav class="navbar">
19+
<button class="tab-btn active" data-tab="home">Home</button>
20+
<button class="tab-btn" data-tab="settings">Settings</button>
21+
<button class="tab-btn" data-tab="info">More Info</button>
22+
</nav>
23+
24+
<!-- Tab Content -->
25+
<main>
26+
<section id="home" class="tab-content active">
27+
<label><input type="checkbox" id="hideWords"> Hide Words</label><br>
28+
<label><input type="checkbox" id="hideURL"> Hide URL</label><br>
29+
<label><input type="checkbox" id="hideUsername"> Hide Username</label>
30+
</section>
31+
32+
<section id="settings" class="tab-content">
33+
<label>
34+
Block Words (comma-separated):<br>
35+
<input type="text" id="blockWords" placeholder="e.g., word1,word2">
36+
</label><br><br>
37+
<label>
38+
Block URLs (comma-separated):<br>
39+
<input type="text" id="blockURL" placeholder="e.g., url1.com,url2.com">
40+
</label><br><br>
41+
<label>
42+
Block Usernames (comma-separated):<br>
43+
<input type="text" id="blockUsername" placeholder="e.g., @abc,@def">
44+
</label><br><br>
45+
</section>
46+
47+
<section id="info" class="tab-content">
48+
<div class="info-section">
49+
<h3>About CleansingX</h3>
50+
<p>A content filtering extension for X.com (formerly Twitter) to enhance your browsing experience.</p>
51+
<p>Version 1.0</p>
52+
</div>
53+
54+
<div class="info-section">
55+
<h3>Developer</h3>
56+
<p>A Muh Mufqi Zuhudi</p>
57+
<div class="social-links">
58+
<a href="https://moefqy.engineer" target="_blank">Website</a>
59+
<a href="https://github.com/moefqy" target="_blank">GitHub</a>
60+
<a href="https://linkedin.com/in/moefqy" target="_blank">LinkedIn</a>
61+
</div>
62+
</div>
63+
64+
<div class="info-section">
65+
<h3>Documentation</h3>
66+
<a href="https://github.com/moefqy/CleansingX" target="_blank">Source Code</a>
67+
<a href="https://github.com/moefqy/CleansingX/issues" target="_blank">Report Issues</a>
68+
</div>
69+
70+
<div class="info-section">
71+
<h3>Support</h3>
72+
<p>Questions or suggestions?</p>
73+
<a href="mailto:mail@moefqy.engineer">Contact Developer</a>
74+
</div>
75+
</section>
76+
</main>
77+
78+
<script src="../js/popup.js"></script>
79+
</body>
80+
</html>

‎assets/img/icon-128.png‎

5.21 KB
Loading

‎assets/img/icon-16.png‎

545 Bytes
Loading

‎assets/img/icon-48.png‎

1.72 KB
Loading

0 commit comments

Comments
 (0)