Toggles JanitorAI custom CSS
Per
// ==UserScript==
// @name JanitorAI CSS Toggle
// @namespace http://tampermonkey.net/
// @version 0.1.1
// @description Toggles JanitorAI custom CSS
// @author IWasTheSyntaxError
// @match https://janitorai.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let alreadyReloaded = true;
let isMenuVisible = false;
let isCustomCssDisabled = localStorage.getItem('janitorAICustomCssDisabled') === 'true';
let controlPanel = null;
let controlsContainer = null;
const isAllowedPage = () => {
const path = window.location.pathname;
return path.startsWith('/characters') || path === '/my_characters' || path.startsWith('/profiles/');
};
const isChatsPage = () => window.location.pathname.startsWith('/chats');
const getNextPageElement = () => {
const currentPage = document.querySelector('.css-1xdrgup');
if (!currentPage) return null;
let nextElement = currentPage.nextElementSibling;
while (nextElement) {
if (nextElement.classList.contains('css-kzd6o0') || nextElement.classList.contains('css-15aspjy')) {
return nextElement;
}
nextElement = nextElement.nextElementSibling;
}
return null;
};
const toggleMenu = () => {
isMenuVisible = !isMenuVisible;
updateElementsVisibility();
updateControlText();
};
const toggleCustomCss = () => {
isCustomCssDisabled = !isCustomCssDisabled;
localStorage.setItem('janitorAICustomCssDisabled', isCustomCssDisabled);
applyCustomCssToggle();
updateControlText();
};
const applyCustomCssToggle = () => {
if (isCustomCssDisabled) {
alreadyReloaded = false;
removeCustomStyles();
const parentElement = document.querySelector('.css-1bn1yyx');
if(parentElement){
const childElements = parentElement.querySelectorAll('*');
for (let i = 0; i < childElements.length; i++) {
if (childElements[i].nodeName === "STYLE") {
childElements[i].parentNode.removeChild(childElements[i]);
}
}
const background = document.querySelector(".css-14l6kwv").firstChild;background.style.background = "none";
}const char = document.querySelector(".css-fu9q4m");
if(!char){
const main = document.querySelector(".css-lo240v");
const elementsWithStyle = main.querySelectorAll('[style]');elementsWithStyle.forEach(element => {
element.removeAttribute('style');
});
} else {
const elementsWithStyle = char.querySelectorAll('[style]');elementsWithStyle.forEach(element => {
element.removeAttribute('style');
});
};
//blockCustomElements();
} else {
if(!alreadyReloaded){
console.log('alreadyReloaded');
location.reload();
alreadyReloaded = true;
}
}
};
const removeCustomStyles = () => {
const styles = document.querySelectorAll('body style');
styles.forEach(style => style.remove());
};
const blockCustomElements = () => {
document.querySelectorAll('.css-1bn1yyx').forEach(element => {
element.style.display = 'none';
});
document.querySelectorAll('*').forEach(element => {
const style = window.getComputedStyle(element);
const bgImage = style.backgroundImage;
if (bgImage && bgImage.includes('ella.janitorai.com/background-image/')) {
element.style.backgroundImage = 'none';
}
});
};
const updateControlText = () => {
const cssToggleText = document.getElementById('css-toggle-text');
if (cssToggleText) {
cssToggleText.textContent = `Custom CSS: ${isCustomCssDisabled ? 'OFF' : 'ON'}`;
cssToggleText.style.color = isCustomCssDisabled ? '#fff' : '#ccc';
}
};
const createControlPanel = () => {
if (controlPanel) return;
controlPanel = document.createElement('div');
controlPanel.id = 'janitor-control-panel';
Object.assign(controlPanel.style, {
position: 'fixed',
top: '75px',
left: '10px',
zIndex: '100000',
display: 'flex',
flexDirection: 'column',
gap: '5px',
alignItems: 'flex-start'
});
const settingsButton = document.createElement('button');
settingsButton.id = 'token-filter-toggle';
settingsButton.textContent = '⚙️';
Object.assign(settingsButton.style, {
width: '30px',
height: '30px',
padding: '0',
backgroundColor: 'rgba(74, 74, 74, 0.7)',
color: '#fff',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '16px',
transition: 'background-color 0.2s'
});
settingsButton.addEventListener('click', toggleMenu);
controlsContainer = document.createElement('div');
controlsContainer.id = 'controls-container';
Object.assign(controlsContainer.style, {
display: 'none',
flexDirection: 'column',
gap: '5px',
backgroundColor: 'rgba(74, 74, 74, 0.7)',
padding: '5px',
borderRadius: '5px',
zIndex: '100001'
});
const cssToggleText = document.createElement('span');
cssToggleText.id = 'css-toggle-text';
cssToggleText.style.cursor = 'pointer';
cssToggleText.style.fontSize = '12px';
cssToggleText.addEventListener('click', toggleCustomCss);
controlsContainer.appendChild(cssToggleText);
controlPanel.appendChild(settingsButton);
controlPanel.appendChild(controlsContainer);
document.body.appendChild(controlPanel);
updateControlText();
};
const updateElementsVisibility = () => {
const shouldShow = isAllowedPage() && !isChatsPage();
if (controlPanel) controlPanel.style.display = shouldShow ? 'flex' : 'none';
if (controlsContainer) controlsContainer.style.display = shouldShow && isMenuVisible ? 'flex' : 'none';
};
const initialize = () => {
createControlPanel();
updateElementsVisibility();
if (isAllowedPage() && !isChatsPage()) {
applyCustomCssToggle();
new MutationObserver(() => {
applyCustomCssToggle();
}).observe(document.body, { childList: true, subtree: true });
const originalAppendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function(node) {
if (isCustomCssDisabled && node.tagName === 'STYLE' && this.tagName === 'HEAD') {
return node;
}
return originalAppendChild.call(this, node);
};
}
};
const tryInitialize = () => {
if (document.body) {
initialize();
let lastPath = window.location.pathname;
setInterval(() => {
if (lastPath !== window.location.pathname) {
lastPath = window.location.pathname;
updateElementsVisibility();
if (isAllowedPage() && !isChatsPage()) {
applyCustomCssToggle();
}
}
}, 500);
} else {
setTimeout(tryInitialize, 1000);
}
};
tryInitialize();
})();