open2ch.netでImgur画像を非表示にし、ポップアップ表示を防ぎ、非表示URLを管理するスクリプト
// ==UserScript==
// @name Open2ch Imgur Image Hider
// @namespace http://tampermonkey.net/
// @version 0.10
// @description open2ch.netでImgur画像を非表示にし、ポップアップ表示を防ぎ、非表示URLを管理するスクリプト
// @author Anonymous
// @match *://*.open2ch.net/*
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_registerMenuCommand
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// ローカルストレージから非表示URLとデフォルト非表示設定を取得
const hiddenUrls = new Set(GM_getValue('hiddenUrls', []));
const defaultHide = GM_getValue('defaultHide', true);
// 画像を非表示にする関数
function hideImage(img, url) {
if (img.previousSibling && img.previousSibling.classList?.contains('hide-container')) {
return;
}
const container = document.createElement('div');
container.classList.add('hide-container');
container.style.display = 'inline-block';
container.style.width = (img.width || 200) + 'px';
container.style.height = (img.height || 'auto');
container.innerHTML = '<span>[非表示画像]</span> <button class="show-btn">表示</button>';
img.parentNode.insertBefore(container, img);
img.style.display = 'none';
img.removeAttribute('data-shown'); // 表示フラグをリセット
// 「表示」ボタンのイベントリスナー
container.querySelector('.show-btn').addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
showImage(container, img, url);
hiddenUrls.delete(url);
GM_setValue('hiddenUrls', Array.from(hiddenUrls));
});
if (!hiddenUrls.has(url)) {
hiddenUrls.add(url);
GM_setValue('hiddenUrls', Array.from(hiddenUrls));
}
}
// 画像を表示する関数
function showImage(container, img, url) {
img.style.display = '';
img.setAttribute('data-shown', 'true'); // 表示フラグを設定
container.parentNode.insertBefore(img, container);
container.remove();
// 既存の「非表示」ボタンがあれば削除
const existingHideBtn = img.nextSibling;
if (existingHideBtn && existingHideBtn.classList?.contains('hide-btn')) {
existingHideBtn.remove();
}
// 新しい「非表示」ボタンを追加
const hideBtn = document.createElement('button');
hideBtn.textContent = '非表示';
hideBtn.classList.add('hide-btn');
hideBtn.style.marginLeft = '5px';
hideBtn.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
hideImage(img, url);
});
img.parentNode.insertBefore(hideBtn, img.nextSibling);
// 画像のクリックイベントを無効化
img.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
});
// 親要素のリンク動作を防止
const parentLink = img.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (event) => {
if (event.target === img || event.target.classList.contains('hide-btn') || event.target.classList.contains('show-btn')) {
event.preventDefault();
event.stopPropagation();
}
});
}
}
// 画像を処理する関数
function processImages() {
document.querySelectorAll('img[src^="https://i.imgur.com/"]').forEach(img => {
const url = img.src;
const isShown = img.getAttribute('data-shown') === 'true';
if ((hiddenUrls.has(url) || defaultHide) && !isShown) {
if (img.style.display !== 'none' && !img.previousSibling?.classList?.contains('hide-container')) {
hideImage(img, url);
}
} else if (!isShown && (!img.nextSibling || !img.nextSibling.classList?.contains('hide-btn'))) {
const hideBtn = document.createElement('button');
hideBtn.textContent = '非表示';
hideBtn.classList.add('hide-btn');
hideBtn.style.marginLeft = '5px';
hideBtn.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
hideImage(img, url);
});
img.parentNode.insertBefore(hideBtn, img.nextSibling);
img.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
});
// 親要素のリンク動作を防止
const parentLink = img.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (event) => {
if (event.target === img || event.target.classList.contains('hide-btn')) {
event.preventDefault();
event.stopPropagation();
}
});
}
}
});
}
// 初回読み込み時に画像を処理
if (document.readyState === 'complete' || document.readyState === 'interactive') {
processImages();
} else {
window.addEventListener('DOMContentLoaded', processImages);
}
// 動的に追加される画像に対応
const observer = new MutationObserver((mutations) => {
mutations.forEach(() => processImages());
});
observer.observe(document.body, { childList: true, subtree: true });
// デフォルト非表示設定を切り替えるメニュー
GM_registerMenuCommand('デフォルト非表示の切り替え', () => {
const newValue = !defaultHide;
GM_setValue('defaultHide', newValue);
alert('デフォルト非表示が' + (newValue ? '有効' : '無効') + 'になりました。ページを再読み込みしてください。');
});
// 非表示URL一覧を表示する関数
function showHiddenUrls() {
const hiddenList = Array.from(hiddenUrls);
if (hiddenList.length === 0) {
alert('非表示にしている画像はありません。');
return;
}
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.backgroundColor = '#fff';
modal.style.padding = '20px';
modal.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
modal.style.zIndex = '10000';
modal.style.maxHeight = '80%';
modal.style.overflowY = 'auto';
const title = document.createElement('h3');
title.textContent = '非表示にした画像のURL一覧';
modal.appendChild(title);
const list = document.createElement('ul');
hiddenList.forEach(url => {
const listItem = document.createElement('li');
listItem.textContent = url;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '削除';
deleteBtn.style.marginLeft = '10px';
deleteBtn.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
hiddenUrls.delete(url);
GM_setValue('hiddenUrls', Array.from(hiddenUrls));
listItem.remove();
document.querySelectorAll(`img[src="${url}"]`).forEach(img => {
if (img.style.display === 'none') {
const container = img.previousSibling;
if (container && container.classList?.contains('hide-container')) {
showImage(container, img, url);
}
}
});
});
listItem.appendChild(deleteBtn);
list.appendChild(listItem);
});
modal.appendChild(list);
const closeBtn = document.createElement('button');
closeBtn.textContent = '閉じる';
closeBtn.style.marginTop = '10px';
closeBtn.addEventListener('click', () => {
modal.remove();
});
modal.appendChild(closeBtn);
document.body.appendChild(modal);
}
// メニューに「非表示URL一覧を表示」を追加
GM_registerMenuCommand('非表示URL一覧を表示', showHiddenUrls);
})();