Add multiples shortcuts + custom ones
// ==UserScript==
// @name AniList Shortcuts
// @version 1.0
// @description Add multiples shortcuts + custom ones
// @author Mio.
// @namespace https://github.com/dear-clouds/mio-userscripts
// @supportURL https://github.com/dear-clouds/mio-userscripts/issues
// @icon https://www.google.com/s2/favicons?sz=64&domain=anilist.co
// @license GPL-3.0
// @match *://*.anilist.co/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
// Function to inject Font Awesome CSS
function injectFontAwesome() {
const faLink = document.createElement('link');
faLink.rel = 'stylesheet';
faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
faLink.integrity = 'sha512-pap5K1fL5c4sLcXmpopbPWha8z36H1EJGgUK6YyE1Wfo2jydN12wPuABanVbBv8d5kZdO8+8PpJ1f8kz0gJ0Mg==';
faLink.crossOrigin = 'anonymous';
faLink.referrerPolicy = 'no-referrer';
document.head.appendChild(faLink);
}
injectFontAwesome();
// Utility function to wait for an element to appear in the DOM
function waitForElement(selector, timeout = 10000) {
return new Promise((resolve, reject) => {
const intervalTime = 100;
let timeElapsed = 0;
const interval = setInterval(() => {
const element = document.querySelector(selector);
if (element) {
clearInterval(interval);
resolve(element);
}
timeElapsed += intervalTime;
if (timeElapsed >= timeout) {
clearInterval(interval);
reject(`Element ${selector} not found within ${timeout}ms`);
}
}, intervalTime);
});
}
// Function to add a link with Font Awesome icon
function addLinkWithIcon(element, url, linkText, iconName) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.style.textDecoration = 'none';
link.style.color = 'inherit';
link.style.display = 'flex';
link.style.alignItems = 'center';
link.style.marginLeft = '10px';
const icon = document.createElement('i');
icon.className = `fa fa-${iconName}`;
icon.style.marginRight = '5px';
link.appendChild(icon);
link.appendChild(document.createTextNode(linkText));
element.appendChild(link);
}
// Function to create a sticky box on forum comments
function createStickyBoxLink() {
// Prevent multiple sticky boxes
if (document.querySelector('.sticky-box')) return;
const stickyBox = document.createElement('div');
stickyBox.classList.add('sticky-box');
stickyBox.style.position = 'fixed';
stickyBox.style.right = '10px';
stickyBox.style.top = '200px';
stickyBox.style.width = '200px';
stickyBox.style.padding = '10px';
stickyBox.style.backgroundColor = 'rgb(var(--color-foreground))';
stickyBox.style.borderRadius = '4px';
stickyBox.style.transition = 'height 0.5s, opacity 0.5s';
stickyBox.style.overflow = 'hidden';
stickyBox.style.zIndex = '1000';
const header = document.createElement('h3');
header.innerText = 'Shortcuts';
header.style.fontSize = 'medium';
header.style.marginTop = '5';
stickyBox.appendChild(header);
const linksContainer = document.createElement('div');
stickyBox.appendChild(linksContainer);
const addIcon = document.createElement('span');
addIcon.innerText = '+';
addIcon.style.position = 'absolute';
addIcon.style.top = '5px';
addIcon.style.right = '5px';
addIcon.style.cursor = 'pointer';
addIcon.style.fontWeight = 'bold';
addIcon.onclick = function () {
const isHidden = userInput.style.display === 'none';
userInput.style.display = isHidden ? 'block' : 'none';
shortcutNameInput.style.display = isHidden ? 'block' : 'none';
validateButton.style.display = isHidden ? 'block' : 'none';
};
stickyBox.appendChild(addIcon);
const toggleVisibilityIcon = document.createElement('i');
toggleVisibilityIcon.className = 'fa fa-eye';
toggleVisibilityIcon.style.cursor = 'pointer';
toggleVisibilityIcon.style.position = 'absolute';
toggleVisibilityIcon.style.top = '5px';
toggleVisibilityIcon.style.left = '5px';
toggleVisibilityIcon.style.fontSize = '14px';
toggleVisibilityIcon.onclick = function () {
if (stickyBox.style.height !== '25px') {
stickyBox.style.width = '25px';
stickyBox.style.height = '25px';
linksContainer.style.display = 'none';
header.style.display = 'none';
addIcon.style.display = 'none';
toggleVisibilityIcon.className = 'fa fa-eye-slash';
} else {
stickyBox.style.width = '200px';
stickyBox.style.height = 'auto';
linksContainer.style.display = 'block';
header.style.display = 'block';
addIcon.style.display = 'block';
toggleVisibilityIcon.className = 'fa fa-eye';
}
};
stickyBox.appendChild(toggleVisibilityIcon);
function appendLinkToContainer(linkName, linkURL) {
const linkElement = document.createElement('a');
linkElement.href = linkURL;
linkElement.innerText = linkName;
linkElement.style.fontSize = 'smaller';
linkElement.target = '_blank';
linkElement.style.display = 'flex';
linkElement.style.alignItems = 'center';
linkElement.style.marginBottom = '5px';
linkElement.style.color = 'var(--color-blue)';
linkElement.style.textDecoration = 'none';
linkElement.addEventListener('click', (e) => {
e.preventDefault();
window.open(linkURL, '_blank');
});
const favicon = document.createElement('img');
try {
const urlObj = new URL(linkURL);
favicon.src = `https://www.google.com/s2/favicons?domain=${urlObj.hostname}`;
} catch {
favicon.src = '';
}
favicon.style.marginRight = '5px';
favicon.style.width = '16px';
favicon.style.height = '16px';
linkElement.prepend(favicon);
const deleteIcon = document.createElement('span');
deleteIcon.innerText = ' ×';
deleteIcon.style.color = 'rgb(var(--color-blue))';
deleteIcon.style.cursor = 'pointer';
deleteIcon.style.marginLeft = 'auto';
deleteIcon.onclick = function (event) {
event.stopPropagation();
linksContainer.removeChild(linkElement);
const savedLinks = JSON.parse(localStorage.getItem('MioAniListShortcuts') || '[]');
const updatedLinks = savedLinks.filter(l => l.url !== linkURL);
localStorage.setItem('MioAniListShortcuts', JSON.stringify(updatedLinks));
};
linkElement.appendChild(deleteIcon);
linksContainer.appendChild(linkElement);
}
const userInput = document.createElement('input');
userInput.type = 'text';
userInput.placeholder = 'Enter your link';
userInput.style.display = 'none';
userInput.style.backgroundColor = 'rgb(var(--color-background))';
userInput.style.color = 'rgb(var(--color-blue))';
userInput.style.border = '1px solid var(--color-border)';
userInput.style.borderRadius = '3px';
userInput.style.padding = '5px';
userInput.style.fontSize = 'smaller';
userInput.style.marginTop = '5px';
stickyBox.appendChild(userInput);
const shortcutNameInput = document.createElement('input');
shortcutNameInput.type = 'text';
shortcutNameInput.placeholder = 'Name of the shortcut';
shortcutNameInput.style.display = 'none';
shortcutNameInput.style.backgroundColor = 'rgb(var(--color-background))';
shortcutNameInput.style.color = 'rgb(var(--color-blue))';
shortcutNameInput.style.border = '1px solid var(--color-border)';
shortcutNameInput.style.borderRadius = '3px';
shortcutNameInput.style.padding = '5px';
shortcutNameInput.style.fontSize = 'smaller';
shortcutNameInput.style.marginTop = '5px';
stickyBox.appendChild(shortcutNameInput);
const validateButton = document.createElement('button');
validateButton.innerText = 'Add';
validateButton.style.display = 'none';
validateButton.style.backgroundColor = 'var(--color-button)';
validateButton.style.color = 'var(--color-button-text)';
validateButton.style.border = 'none';
validateButton.style.borderRadius = '3px';
validateButton.style.padding = '5px 10px';
validateButton.style.fontSize = 'smaller';
validateButton.style.marginTop = '5px';
validateButton.style.cursor = 'pointer';
validateButton.onclick = function () {
const link = userInput.value.trim();
const name = shortcutNameInput.value.trim();
if (link && name) {
const savedLinks = JSON.parse(localStorage.getItem('MioAniListShortcuts') || '[]');
// Avoid duplicates
if (!savedLinks.some(l => l.url === link)) {
savedLinks.push({ name, url: link });
localStorage.setItem('MioAniListShortcuts', JSON.stringify(savedLinks));
appendLinkToContainer(name, link);
userInput.value = '';
shortcutNameInput.value = '';
userInput.style.display = 'none';
shortcutNameInput.style.display = 'none';
validateButton.style.display = 'none';
} else {
alert('This link already exists in your shortcuts.');
}
} else {
alert('Please enter both name and URL.');
}
};
stickyBox.appendChild(validateButton);
// Load saved links
const savedLinks = JSON.parse(localStorage.getItem('MioAniListShortcuts') || '[]');
for (const linkObj of savedLinks) {
appendLinkToContainer(linkObj.name, linkObj.url);
}
document.body.appendChild(stickyBox);
}
// Function to add AniCalendar by KangieDanie link in Activity History
// https://anilist.co/forum/thread/63096
function addAniCalendarLink() {
// Prevent adding multiple links
if (document.querySelector('.ani-calendar-link')) return;
let attempts = 0;
const maxAttempts = 10; // 20 seconds max
const interval = setInterval(() => {
const headers = document.querySelectorAll('h2.section-header');
let activityHistoryHeader = null;
headers.forEach(header => {
if (header.textContent.trim() === 'Activity History') {
activityHistoryHeader = header;
}
});
if (activityHistoryHeader) {
// Prevent adding multiple links
if (activityHistoryHeader.querySelector('.ani-calendar-link')) {
clearInterval(interval);
return;
}
const aniCalendarContainer = document.createElement('span');
aniCalendarContainer.classList.add('ani-calendar-link');
aniCalendarContainer.style.float = 'right';
aniCalendarContainer.style.display = 'flex';
aniCalendarContainer.style.alignItems = 'center';
const aniCalendarLink = document.createElement('a');
aniCalendarLink.href = 'https://ani-calendar.vercel.app/';
aniCalendarLink.target = '_blank';
aniCalendarLink.rel = 'noopener noreferrer';
aniCalendarLink.textContent = 'AniCalendar';
aniCalendarLink.style.fontSize = 'smaller';
aniCalendarLink.style.marginLeft = '10px';
aniCalendarLink.style.color = 'var(--color-blue)';
aniCalendarLink.style.display = 'flex';
aniCalendarLink.style.alignItems = 'center';
aniCalendarLink.style.textDecoration = 'none';
const calendarIcon = document.createElement('i');
calendarIcon.className = 'fa fa-calendar';
calendarIcon.style.marginRight = '5px';
aniCalendarLink.prepend(calendarIcon);
aniCalendarContainer.appendChild(aniCalendarLink);
activityHistoryHeader.appendChild(aniCalendarContainer);
clearInterval(interval);
console.log('AniCalendar link added to Activity History.');
} else {
attempts++;
console.log(`Activity History section header not found. Attempt ${attempts}/${maxAttempts}. Retrying in 2 seconds...`);
if (attempts >= maxAttempts) {
clearInterval(interval);
console.warn('Failed to find Activity History section header after multiple attempts.');
}
}
}, 2000);
}
// Function to add AniTools link in Social tab
function addAniToolsLink() {
const socialFilterGroup = document.querySelector('div.filter-group');
if (socialFilterGroup) {
// Prevent adding multiple links
if (socialFilterGroup.querySelector('.ani-tools-link')) return;
const aniToolsLink = document.createElement('a');
aniToolsLink.href = 'https://anitools.koopz.rocks/';
aniToolsLink.target = '_blank';
aniToolsLink.rel = 'noopener noreferrer';
aniToolsLink.textContent = 'AniTools';
aniToolsLink.style.color = 'var(--color-blue)';
aniToolsLink.style.display = 'flex';
aniToolsLink.style.alignItems = 'center';
aniToolsLink.style.textDecoration = 'none';
const wrenchIcon = document.createElement('i');
wrenchIcon.className = 'fa fa-tools';
wrenchIcon.style.marginRight = '5px';
aniToolsLink.prepend(wrenchIcon);
const aniToolsContainer = document.createElement('span');
aniToolsContainer.classList.add('ani-tools-link');
aniToolsContainer.appendChild(aniToolsLink);
socialFilterGroup.appendChild(aniToolsContainer);
} else {
console.log('Social filter group not found.');
}
}
// Function to initialize features based on current URL
function initializeFeatures() {
const url = window.location.href;
// Check if the page is an AniList user profile
if (url.includes('/user/') && !url.includes('/social')) {
addAniCalendarLink();
}
// Check if the page is the social tab of an AniList user profile
if (url.includes('/user/') && url.includes('/social')) {
addAniToolsLink();
}
// Check if the page is an AniList forum thread comment
if (url.includes('/forum/thread/') && url.includes('/comment/')) {
createStickyBoxLink();
} else {
const existingStickyBox = document.querySelector('.sticky-box');
if (existingStickyBox) {
existingStickyBox.remove();
}
}
}
// Function to handle URL changes
function onUrlChange(callback) {
let lastUrl = location.href;
const observer = new MutationObserver(() => {
const currentUrl = location.href;
if (currentUrl !== lastUrl) {
lastUrl = currentUrl;
callback();
}
});
observer.observe(document, { subtree: true, childList: true });
window.addEventListener('popstate', () => {
callback();
});
const pushState = history.pushState;
const replaceState = history.replaceState;
history.pushState = function () {
pushState.apply(history, arguments);
callback();
};
history.replaceState = function () {
replaceState.apply(history, arguments);
callback();
};
}
// Initialize features on initial load
window.addEventListener('load', () => {
setTimeout(() => {
initializeFeatures();
}, 1000);
});
// Initialize features on URL changes
onUrlChange(() => {
setTimeout(() => {
initializeFeatures();
}, 1000);
});
})();