mirror of
https://github.com/SolninjaA/Chhoto-URL-Extension.git
synced 2026-10-28 16:18:30 +10:00
v1.2.0 - Add manual URL generation
This commit is contained in:
Solninja A committed
1 parent
888138e93b
commit
ebe07d8f8b
7 files changed
+387
-39
No files matched your search
@@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
height: 300px;
|
||||
font-size: 20px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
border: black 1px solid;
|
||||
border-radius: 7px;
|
||||
background-color: white;
|
||||
min-height: 30px;
|
||||
min-width: 75px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#generate {
|
||||
border: black 1px solid;
|
||||
border-radius: 7px;
|
||||
background-color: white;
|
||||
min-height: 50px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#close:hover,
|
||||
#generate:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.generate {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0 10px;
|
||||
align-items: baseline;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 150px;
|
||||
min-height: 17px;
|
||||
padding: 5px;
|
||||
border: 2px solid black;
|
||||
border-radius: 7px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#message,
|
||||
#message2,
|
||||
#message3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: red;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.shown {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<img src="/icons/chhoto-url-48.png"></img>
|
||||
<h1>Generate a Chhoto URL</h1>
|
||||
</div>
|
||||
|
||||
<button id="close" type="button">✖ Close</button>
|
||||
|
||||
<div class="generate">
|
||||
<label>
|
||||
Short URL
|
||||
<input required type="text" id="shorturl" placeholder="interesting-short-url">
|
||||
<p id="message"></p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="generate">
|
||||
<label>
|
||||
Long URL
|
||||
<input required type="text" id="longurl" placeholder="https://example.com">
|
||||
<p id="message2">The provided URL is invalid.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="generate">
|
||||
<label>
|
||||
<input id="generate" type="button" value="Shorten!">
|
||||
<p id="message3">Error: Required fields are missing.</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="application/javascript" src="/lib/browser-polyfill.min.js"></script>
|
||||
<script type="application/javascript" src="/popup/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
/*
|
||||
* An unofficial extension for easy link shortening using the Chhoto URL API.
|
||||
* Copyright (C) 2025 Solomon Tech
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* File Overview
|
||||
* @file This file handles the logic behind the popup page. This script will call a "background.js" function to generate a shortened URL.
|
||||
* @copyright Solomon Tech 2025
|
||||
*/
|
||||
|
||||
|
||||
// Use JavaScript's "strict" mode
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
|
||||
"use strict";
|
||||
|
||||
// Get elements
|
||||
const closeEle = document.querySelector("#close");
|
||||
const shortURLEle = document.querySelector("#shorturl");
|
||||
const longURLEle = document.querySelector("#longurl");
|
||||
const messageEle = document.querySelector("#message");
|
||||
const message2Ele = document.querySelector("#message2");
|
||||
const message3Ele = document.querySelector("#message3");
|
||||
const generateEle = document.querySelector("#generate");
|
||||
|
||||
// Define values
|
||||
let shorturl;
|
||||
let longurl;
|
||||
|
||||
async function close() {
|
||||
try {
|
||||
const windowId = (await browser.windows.getCurrent()).id;
|
||||
await browser.windows.remove(windowId);
|
||||
} catch (error) {
|
||||
console.log("Closing failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// If the close button is clicked, close the window
|
||||
closeEle.addEventListener('click', () => {
|
||||
close();
|
||||
});
|
||||
|
||||
// When the short URL is inputted
|
||||
shortURLEle.oninput = (event) => {
|
||||
if (event.type === "click") {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
// If the short URL value is greater than 0 (i.e. not an empty string)
|
||||
if (shortURLEle.value.length > 0) {
|
||||
// Get the browser storage
|
||||
browser.storage.local.get().then((data) => {
|
||||
// Set the word limit
|
||||
const wordLimit = data.titleWordLimit;
|
||||
|
||||
// Get the configured host
|
||||
const chhotoHost = data.chhotoHost;
|
||||
|
||||
// Format the short URL
|
||||
// Replace all occurences of ' - ' to '-'
|
||||
// Replace all occurences of ' ' to '-'
|
||||
// Replace all characters except for 'a-z', '0-9', '-' and '_' with ''
|
||||
let shortURLText = shortURLEle.value.toLowerCase().replace(/ - /g, '-').replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '');
|
||||
|
||||
// If the wordLimit is not 0, and thus limited
|
||||
// And if the configured host is not undefined
|
||||
if (chhotoHost !== undefined) {
|
||||
// Inform the user
|
||||
messageEle.innerHTML = `The short URL will be generated as: ${chhotoHost}/${shortURLText}.`;
|
||||
} else {
|
||||
// If the configured host is undefined
|
||||
messageEle.innerHTML = "The Chhoto URL host has not been configured. Cannot generate shortened URL.";
|
||||
}
|
||||
|
||||
// Set the short URL
|
||||
shorturl = shortURLText;
|
||||
|
||||
// Show the message
|
||||
messageEle.classList.add("shown");
|
||||
});
|
||||
} else {
|
||||
// If the short URL is an empty string, hide the message
|
||||
messageEle.classList.remove("shown");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// When the long URL is inputted
|
||||
longURLEle.oninput = (event) => {
|
||||
if (event.type === "click") {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
// If the long URL value is greater than 0 (i.e. not an empty string)
|
||||
if (longURLEle.value.length > 0) {
|
||||
// Get the allowed protocols
|
||||
browser.storage.local.get("allowedProtocols").then(({ allowedProtocols }) => {
|
||||
// Initialize a list of protocols that are allowed if unset.
|
||||
if (allowedProtocols === undefined) {
|
||||
allowedProtocols = new Set();
|
||||
allowedProtocols.add("http:");
|
||||
allowedProtocols.add("https:");
|
||||
allowedProtocols.add("ftp:");
|
||||
allowedProtocols.add("file:");
|
||||
browser.storage.local.set({ allowedProtocols: Array(...allowedProtocols) });
|
||||
} else {
|
||||
allowedProtocols = new Set(allowedProtocols);
|
||||
}
|
||||
|
||||
// Try and catch structure
|
||||
try {
|
||||
// Define the URL
|
||||
const url = new URL(longURLEle.value);
|
||||
|
||||
// Ensure the URL has a valid protocol
|
||||
if (allowedProtocols.size > 0 && !allowedProtocols.has(url.protocol)) {
|
||||
throw new Error("The URL is invalid");
|
||||
};
|
||||
|
||||
////// If anything beyond this point is trigerred, the URL protocol is valid. //////
|
||||
|
||||
// Reassign the long url
|
||||
longurl = url;
|
||||
|
||||
// Remove any warning styles which may be active
|
||||
message2Ele.classList.remove("warning");
|
||||
longURLEle.style.color = "black";
|
||||
} catch {
|
||||
// If the URL is invalid, add warning styles
|
||||
message2Ele.classList.add("warning");
|
||||
longURLEle.style.color = "red";
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
} else {
|
||||
// If the long URL is an empty string, hide the warning styling
|
||||
message2Ele.classList.remove("warning");
|
||||
longURLEle.style.color = "black";
|
||||
}
|
||||
};
|
||||
|
||||
// Define the sendRequest function (which calls a background.js function to generate a shortened link)
|
||||
function sendRequest(page) {
|
||||
page.popupGenerateChhoto(longurl, shorturl);
|
||||
close();
|
||||
}
|
||||
|
||||
// If the generate button was clicked
|
||||
generateEle.addEventListener("click", () => {
|
||||
// Ensure both fields have been filled out, and the long URL is valid
|
||||
if ( shorturl !== undefined && longurl !== undefined && !message2Ele.classList.contains("warning") ) {
|
||||
|
||||
// Remove the warning class
|
||||
message3Ele.classList.remove("warning");
|
||||
|
||||
// Get the background page, and call the sendRequest function (which is in this script)
|
||||
const backgroundFunc = browser.runtime.getBackgroundPage();
|
||||
backgroundFunc.then(sendRequest);
|
||||
} else {
|
||||
// Add the warning class
|
||||
message3Ele.classList.add("warning");
|
||||
};
|
||||
});
|
||||
Reference in new issue
Block a user