Adds a sidebar to manage and display blacklisted tags and hides or shows images based on the blacklist on rule34.xxx.
// ==UserScript==
// @name Remove Blacklisted Images with Sidebar
// @namespace http://tampermonkey.net/
// @version 1.5
// @description Adds a sidebar to manage and display blacklisted tags and hides or shows images based on the blacklist on rule34.xxx.
// @author Dramorian
// @match https://rule34.xxx/index.php?page=post*
// @match https://rule34.xxx/index.php?page=favorites*
// @match https://rule34.xxx/index.php?page=comment*
// @exclude https://rule34.xxx/index.php?page=post&s=view*
// @icon https://www.google.com/s2/favicons?sz=64&domain=rule34.xxx
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Configuration
const CONFIG = {
DEBUG: true,
SELECTORS: {
IMAGES: 'img[title], div[id^="p"] > div.col1.thumb > a > img',
FAVORITES: 'img[title]',
COMMENTS: 'div[id^="p"] > div.col1.thumb > a > img',
SIDEBAR_TARGET: 'div.tag-search',
SIDEBAR_FALLBACK: '#content > h1'
},
STORAGE_KEYS: {
DISABLED_TAGS: 'disabled_tags',
TAG_BLACKLIST: 'tag_blacklist'
}
};
// Utility functions
const Logger = {
log: (...args) => CONFIG.DEBUG && console.log('[Blacklist Manager]', ...args),
error: (...args) => console.error('[Blacklist Manager]', ...args)
};
const Utils = {
getCookie(name) {
const cookie = document.cookie
.split('; ')
.find(row => row.startsWith(`${name}=`));
return cookie ? cookie.split('=')[1] : null;
},
decodeBlacklist(encodedString) {
return decodeURIComponent(encodedString).split('%20');
},
createElementFromHTML(html) {
const container = document.createElement('div');
container.innerHTML = html.trim();
return container.firstChild;
},
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
};
// Storage manager
class StorageManager {
static getDisabledTags() {
try {
return JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEYS.DISABLED_TAGS) || '[]');
} catch (e) {
Logger.error('Failed to parse disabled tags from localStorage:', e);
return [];
}
}
static setDisabledTags(tags) {
try {
localStorage.setItem(CONFIG.STORAGE_KEYS.DISABLED_TAGS, JSON.stringify(tags));
} catch (e) {
Logger.error('Failed to save disabled tags to localStorage:', e);
}
}
static clearDisabledTags() {
localStorage.removeItem(CONFIG.STORAGE_KEYS.DISABLED_TAGS);
}
static isTagDisabled(tag) {
return this.getDisabledTags().includes(tag);
}
}
// Blacklist manager
class BlacklistManager {
static getTagBlacklist() {
const cookieValue = Utils.getCookie(CONFIG.STORAGE_KEYS.TAG_BLACKLIST);
const blacklist = cookieValue ? Utils.decodeBlacklist(cookieValue) : [];
Logger.log('Retrieved blacklist:', blacklist);
return blacklist;
}
static containsExactTag(title, tags) {
return tags.some(tag => {
const regex = new RegExp(`\\b${tag}\\b`, 'i');
const contains = regex.test(title);
if (contains) Logger.log(`Title "${title}" contains tag "${tag}"`);
return contains;
});
}
static isTagDetectedOnPage(tag) {
const elements = document.querySelectorAll(CONFIG.SELECTORS.IMAGES);
return Array.from(elements).some(el => {
const title = el.getAttribute('title');
return title && this.containsExactTag(title, [tag]);
});
}
static countPostsWithTag(tag) {
const favoriteCount = this._countPostsBySelector(CONFIG.SELECTORS.FAVORITES, tag);
const commentCount = this._countPostsBySelector(CONFIG.SELECTORS.COMMENTS, tag);
const total = favoriteCount + commentCount;
Logger.log(`Post count for tag ${tag}: ${total}`);
return total;
}
static _countPostsBySelector(selector, tag) {
const images = document.querySelectorAll(selector);
return Array.from(images).filter(img => {
const title = img.getAttribute('title');
return title && this.containsExactTag(title, [tag]);
}).length;
}
}
// Post visibility manager
class PostVisibilityManager {
static updatePostsVisibility(tag, displayValue, important = false) {
const elements = document.querySelectorAll(CONFIG.SELECTORS.IMAGES);
elements.forEach(el => {
const title = el.getAttribute('title');
if (!title) return;
const shouldUpdate = displayValue === '' ||
BlacklistManager.containsExactTag(title, [tag]);
if (shouldUpdate) {
const parent = el.closest('span') || el.closest('div[id^="p"]');
if (parent) {
parent.style.display = displayValue;
if (important) {
parent.style.setProperty('display', displayValue, 'important');
}
const action = displayValue === 'none' ? 'Hiding' : 'Showing';
Logger.log(`${action} post for tag "${tag}"`);
}
}
});
}
static showPostsWithTags(tags) {
tags.forEach(tag => this.updatePostsVisibility(tag, ''));
}
static hidePostsWithTags(tags) {
if (tags.length === 0) return;
tags.forEach(tag => this.updatePostsVisibility(tag, 'none', true));
}
static applyFiltering() {
const disabledTags = StorageManager.getDisabledTags();
const allTags = BlacklistManager.getTagBlacklist();
const enabledTags = allTags.filter(tag => !disabledTags.includes(tag));
Logger.log('Applying filtering - Disabled:', disabledTags, 'Enabled:', enabledTags);
this.hidePostsWithTags(enabledTags);
this.showPostsWithTags(disabledTags);
}
}
// Sidebar manager
class SidebarManager {
constructor() {
this.sidebar = null;
this.isCollapsed = true;
}
create() {
const targetElement = this._findInsertionTarget();
if (!targetElement) {
Logger.error('Suitable element for sidebar insertion not found.');
return;
}
this.sidebar = this._createSidebarElement();
targetElement.insertAdjacentElement('afterend', this.sidebar);
this._attachEventListeners();
this.update();
Logger.log('Sidebar created and initialized');
}
_findInsertionTarget() {
return document.querySelector(CONFIG.SELECTORS.SIDEBAR_TARGET) ||
document.querySelector(CONFIG.SELECTORS.SIDEBAR_FALLBACK);
}
_createSidebarElement() {
const sidebarHTML = `
<div id="blacklist-box">
<div id="sidebar-header">
<h2>Blacklisted</h2>
<button id="toggle-header" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="toggle-icon">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</button>
</div>
<div id="sidebar-content" style="display: none;">
<ul id="blacklist-list" style="list-style: none;"></ul>
</div>
<div id="sidebar-footer">
<button id="disable-all-blacklists">Disable All</button>
<button id="re-enable-all-blacklists" style="display: none;">Re-enable All</button>
</div>
</div>
`;
return Utils.createElementFromHTML(sidebarHTML);
}
_attachEventListeners() {
// Toggle button
const toggleButton = this.sidebar.querySelector('#toggle-header');
const icon = toggleButton.querySelector('svg');
toggleButton.addEventListener('click', () => {
this._toggleCollapse(icon);
});
// Control buttons
const disableAllBtn = this.sidebar.querySelector('#disable-all-blacklists');
const enableAllBtn = this.sidebar.querySelector('#re-enable-all-blacklists');
disableAllBtn.addEventListener('click', (e) => {
e.preventDefault();
this._disableAllTags();
});
enableAllBtn.addEventListener('click', (e) => {
e.preventDefault();
this._enableAllTags();
});
}
_toggleCollapse(icon) {
const content = this.sidebar.querySelector('#sidebar-content');
this.isCollapsed = !this.isCollapsed;
content.style.display = this.isCollapsed ? 'none' : 'block';
icon.style.transform = this.isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)';
icon.style.transition = 'transform 0.25s ease';
Logger.log('Sidebar toggled:', this.isCollapsed ? 'collapsed' : 'expanded');
}
_disableAllTags() {
const allTags = BlacklistManager.getTagBlacklist();
StorageManager.setDisabledTags(allTags);
this._toggleButtons(true);
this.update();
PostVisibilityManager.applyFiltering();
Logger.log('All tags disabled');
}
_enableAllTags() {
StorageManager.clearDisabledTags();
this._toggleButtons(false);
this.update();
PostVisibilityManager.applyFiltering();
Logger.log('All tags enabled');
}
_toggleButtons(allDisabled) {
const disableBtn = this.sidebar.querySelector('#disable-all-blacklists');
const enableBtn = this.sidebar.querySelector('#re-enable-all-blacklists');
disableBtn.style.display = allDisabled ? 'none' : 'inline';
enableBtn.style.display = allDisabled ? 'inline' : 'none';
}
update() {
if (!this.sidebar) return;
const blacklist = BlacklistManager.getTagBlacklist();
const detectedTags = blacklist.filter(tag =>
BlacklistManager.isTagDetectedOnPage(tag)
);
this._updateTagList(detectedTags);
this._updateVisibility(detectedTags);
}
_updateTagList(detectedTags) {
const listElement = this.sidebar.querySelector('#blacklist-list');
listElement.innerHTML = '';
let totalHiddenPosts = 0;
detectedTags.forEach(tag => {
const isDisabled = StorageManager.isTagDisabled(tag);
const hiddenCount = BlacklistManager.countPostsWithTag(tag);
if (!isDisabled) {
totalHiddenPosts += hiddenCount;
}
const listItem = this._createTagListItem(tag, isDisabled, hiddenCount);
listElement.appendChild(listItem);
});
// Update header with total count
const header = this.sidebar.querySelector('h2');
header.textContent = `Blacklisted (${totalHiddenPosts})`;
// Attach checkbox listeners
this._attachCheckboxListeners();
}
_createTagListItem(tag, isDisabled, hiddenCount) {
const listItem = document.createElement('li');
listItem.innerHTML = `
<label>
<input type="checkbox" class="blacklist-checkbox"
data-tag="${encodeURIComponent(tag)}"
${isDisabled ? '' : 'checked'}>
${tag} <span class="count">${hiddenCount}</span>
</label>
`;
return listItem;
}
_attachCheckboxListeners() {
const checkboxes = this.sidebar.querySelectorAll('.blacklist-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', (e) => {
const tag = decodeURIComponent(e.target.getAttribute('data-tag'));
const isEnabled = e.target.checked;
this._toggleTag(tag, isEnabled);
Logger.log(`Tag "${tag}" ${isEnabled ? 'enabled' : 'disabled'}`);
});
});
}
_toggleTag(tag, isEnabled) {
let disabledTags = StorageManager.getDisabledTags();
if (isEnabled) {
disabledTags = disabledTags.filter(t => t !== tag);
} else {
if (!disabledTags.includes(tag)) {
disabledTags.push(tag);
}
}
StorageManager.setDisabledTags(disabledTags);
PostVisibilityManager.applyFiltering();
}
_updateVisibility(detectedTags) {
const sidebar = this.sidebar;
if (detectedTags.length === 0) {
sidebar.style.display = 'none';
Logger.log('No blacklisted tags detected. Sidebar hidden.');
} else {
sidebar.style.display = '';
}
}
}
// Native sidebar cleanup
class NativeSidebarManager {
static removeNativeEffects() {
this._handleBlacklistCount();
this._removeSidebarElement();
}
static _handleBlacklistCount() {
const blacklistCountElement = document.getElementById('blacklist-count');
if (!blacklistCountElement) return;
const postCount = parseInt(blacklistCountElement.textContent, 10);
if (postCount > 0) {
const hiddenLink = blacklistCountElement
.closest('h5')
?.querySelector('a');
if (hiddenLink) {
hiddenLink.click();
Logger.log('Clicked native "Hidden" button to remove blacklist effect');
}
}
}
static _removeSidebarElement() {
const blacklistSidebar = document.getElementById('blacklisted-sidebar');
if (blacklistSidebar) {
blacklistSidebar.remove();
Logger.log('Removed native blacklisted-sidebar element');
}
}
}
// Main application
class BlacklistApp {
constructor() {
this.sidebarManager = new SidebarManager();
}
init() {
try {
// Clean up native effects first
NativeSidebarManager.removeNativeEffects();
// Create and initialize sidebar
this.sidebarManager.create();
// Apply initial filtering
PostVisibilityManager.applyFiltering();
Logger.log('Blacklist application initialized successfully');
} catch (error) {
Logger.error('Failed to initialize application:', error);
}
}
}
// Initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new BlacklistApp().init();
});
} else {
new BlacklistApp().init();
}
})();