Clean repo/README.md, add option to disable extension and bump version to 2.
This commit is contained in:
parent
96c36561e3
commit
9dc35139d6
7 changed files with 123 additions and 57 deletions
23
README.MD
23
README.MD
|
|
@ -1,19 +1,20 @@
|
||||||
# Mango
|
# Mango
|
||||||
Obliterates rounded corners... BECAUSE I HATE THEM
|
I declare war to rouded corners!
|
||||||
|
|
||||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/mangocorners/"><img src="Firefox-badges.jpg" alt="Firefox Addon Store Icon" width="200"/></a>
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/mangocorners/"><img src="./img/Firefox-badges.jpg" alt="Firefox Addon Store Icon" width="200"/></a>
|
||||||
|
|
||||||
<img src="https://addons.mozilla.org/user-media/previews/full/307/307501.png?modified=1729803414" alt="Mango configuration UI" width="200"/>
|
## Example
|
||||||
<img src="https://addons.mozilla.org/user-media/previews/full/307/307505.png?modified=1729803420" alt="Mango VS YouTube default design" width="400"/>
|
<img src="https://addons.mozilla.org/user-media/previews/full/307/307505.png?modified=1729803420" alt="Mango VS YouTube default design"/>
|
||||||
|
|
||||||
## How it works
|
## How it works
|
||||||
``* {
|
```css
|
||||||
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}``
|
}
|
||||||
That's everything we inject into your page, feel free to check the source code to be sure we're not doing anything malicious.
|
```
|
||||||
|
This CSS tells your browser that everything (`*`) should have the property `border-radius` (amount of rounded corner) to 0.
|
||||||
|
|
||||||
## Why 'Mango'
|
The extension just injects this into your page after checking if the page is whitelisted. This extension is so tiny that you can review `mango.js` and `main.js` by yourself or with help of AI.
|
||||||
Mango is the codename of the first Windows Phone OS to have a codename (Windows Phone 7.5). I had a WP as a child and I always loved the "minimalist square" design of Windows Phone.
|
|
||||||
|
|
||||||
## Contributing
|
## Why Mango
|
||||||
Just do a pull request
|
Mango is the codename of _Windows Phone 7.5_, the first version to adopt Microslop's "Metro UI". I grew up as a kid using Windows Phone and that shaped the way I see rounded corners—and I absolutely hate them.
|
||||||
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
15
mango.html
15
mango.html
|
|
@ -1,17 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Mango</title>
|
<title>Mango</title>
|
||||||
<script src="mangoui.js" defer></script>
|
<script src="menu/main.js" defer></script>
|
||||||
<link rel="stylesheet" href="mangoUI.css">
|
<link rel="stylesheet" href="menu/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="title">mango</h1>
|
<h1 id="title">mango</h1>
|
||||||
<h2 id="source">whitelist</h2>
|
<h2 id="source">whitelist</h2>
|
||||||
<textarea placeholder="Domain only, separated by new line, see the example:
|
<textarea placeholder="Domain only, separated by new line, see the example:
|
||||||
example.com
|
example.com
|
||||||
example2.com" id="whitelist" rows="10" cols="30"></textarea><br>
|
example2.com" id="whitelist" rows="10" cols="30"></textarea><br>
|
||||||
<button id="whitelistSave">save</button>
|
<button id="whitelistSave">save</button>
|
||||||
<p><a href="https://git.disroot.org/adrianvictor/mango">source-code</a></p>
|
<button id="toggle">enabled</button>
|
||||||
|
<footer>
|
||||||
|
<p><span id="version">v2</span> Adrian Victor <a href="https://github.com/adrianvic/mango">(source-code)</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
47
mango.js
47
mango.js
|
|
@ -1,26 +1,31 @@
|
||||||
console.log("[Mango] Let's get the business done.")
|
const currentHostname = location.hostname;
|
||||||
|
let enabled = true;
|
||||||
|
|
||||||
|
browser.storage.local.get("enabled").then((result) => {
|
||||||
|
enabled = result.enabled ?? true;
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error("Error retrieving enabled state:", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
function checkWhitelist(url) {
|
function checkWhitelist(url) {
|
||||||
return browser.storage.local.get("whitelist").then((result) => {
|
return browser.storage.local.get("whitelist").then((result) => {
|
||||||
const whitelist = result.whitelist || [];
|
const whitelist = result.whitelist || [];
|
||||||
return whitelist.includes(url);
|
return whitelist.includes(url);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentHostname = location.hostname;
|
checkWhitelist(currentHostname).then((isWhitelisted) => {
|
||||||
|
if (!isWhitelisted && enabled) {
|
||||||
checkWhitelist(currentHostname).then((isWhitelisted) => {
|
const styles = `
|
||||||
if (!isWhitelisted) {
|
|
||||||
const styles = `
|
|
||||||
* {
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const injectedStyle = document.createElement("style");
|
const injectedStyle = document.createElement("style");
|
||||||
injectedStyle.type = "text/css";
|
injectedStyle.type = "text/css";
|
||||||
injectedStyle.innerText = styles;
|
injectedStyle.id = "mangoInjectedStyle";
|
||||||
document.head.appendChild(injectedStyle);
|
injectedStyle.innerText = styles;
|
||||||
} else {
|
document.head.appendChild(injectedStyle);
|
||||||
console.log("[Mango] Mercy! This page is whitelisted.")
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
|
|
||||||
14
mangoui.js
14
mangoui.js
|
|
@ -1,14 +0,0 @@
|
||||||
document.getElementById('whitelistSave').addEventListener('click', () => {
|
|
||||||
const whitelist = document.getElementById('whitelist').value.split('\n').map(line => line.trim()).filter(line => line);
|
|
||||||
browser.storage.local.set({ whitelist: whitelist });
|
|
||||||
console.log('Whitelist saved!');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
browser.storage.local.get("whitelist").then((result) => {
|
|
||||||
const whitelist = result.whitelist || [];
|
|
||||||
document.getElementById('whitelist').value = whitelist.join('\n');
|
|
||||||
}).catch((error) => {
|
|
||||||
console.error("Error retrieving the whitelist:", error);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
@ -1,11 +1,22 @@
|
||||||
|
:root {
|
||||||
|
--accent: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: orangered;
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -26,26 +37,53 @@ body::before {
|
||||||
opacity: .25;
|
opacity: .25;
|
||||||
}
|
}
|
||||||
|
|
||||||
#whitelist {
|
textarea {
|
||||||
|
outline: medium solid transparent;
|
||||||
|
transition: .4s;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
color: white;
|
color: white;
|
||||||
|
border: thin solid white;
|
||||||
|
padding: .4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#title {
|
textarea:focus {
|
||||||
|
outline-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 50px;
|
font-size: 3em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#whitelistSave {
|
h2 {
|
||||||
|
margin-bottom: .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: .2s;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
|
padding: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#version {
|
||||||
|
opacity: .6;
|
||||||
}
|
}
|
||||||
33
menu/main.js
Normal file
33
menu/main.js
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
let enabled = true;
|
||||||
|
|
||||||
|
const toggleButton = document.getElementById("toggle");
|
||||||
|
updateButtonText();
|
||||||
|
|
||||||
|
function updateButtonText() {
|
||||||
|
toggleButton.textContent = enabled ? "disable" : "enable";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('whitelistSave').addEventListener('click', () => {
|
||||||
|
const whitelist = document.getElementById('whitelist').value.split('\n').map(line => line.trim()).filter(line => line);
|
||||||
|
browser.storage.local.set({ whitelist: whitelist });
|
||||||
|
});
|
||||||
|
|
||||||
|
browser.storage.local.get("enabled").then((result) => {
|
||||||
|
enabled = result.enabled ?? true;
|
||||||
|
updateButtonText();
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error("Error retrieving enabled state:", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
browser.storage.local.get("whitelist").then((result) => {
|
||||||
|
const whitelist = result.whitelist || [];
|
||||||
|
document.getElementById('whitelist').value = whitelist.join('\n');
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error("Error retrieving the whitelist:", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
toggleButton.addEventListener('click', () => {
|
||||||
|
enabled = !enabled;
|
||||||
|
updateButtonText();
|
||||||
|
browser.storage.local.set({enabled: enabled});
|
||||||
|
})
|
||||||
Loading…
Add table
Add a link
Reference in a new issue