Adds new functionality to Meguca/shamichan imageboards
// ==UserScript==
// @name Meguca Extended
// @namespace meguca.shamichan.ext
// @version 1.1.2
// @description Adds new functionality to Meguca/shamichan imageboards
// @author SaddestPanda
// @license UNLICENSE
// @match https://2chen.moe/*
// @match https://sturdychan.help/*
// @match https://shamik.ooo/*
// @match https://shamiko.org/*
// @match https://meta.4chan.gay/*
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.deleteValue
// @grant GM.registerMenuCommand
// @run-at document-idle
// ==/UserScript==
(async function () {
"use strict";
// Default settings
const defaultSettings = {
scrollToUnread: true,
showScrollbarMarkers: true,
firstRun: true,
};
const settings = {
scrollToUnread: await GM.getValue("scrollToUnread", defaultSettings.scrollToUnread),
showScrollbarMarkers: await GM.getValue("showScrollbarMarkers", defaultSettings.showScrollbarMarkers),
firstRun: await GM.getValue("firstRun", defaultSettings.firstRun),
};
console.log("%cMeguca Extended: Started with settings:", "color:rgb(0, 140, 255)", settings);
addMyStyle("meguca-extended-css", `
.lastRead {
border-top: 8px solid #1cb9d2;
}
.marker-container {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100vh;
z-index: 1000;
pointer-events: none;
}
.marker {
position: absolute;
width: 100%;
height: 6px;
background: #0092ff;
cursor: pointer;
pointer-events: auto;
border-radius: 40% 0 0 40%;
z-index: 5;
}
.marker.alt {
background: #a8d8f8;
z-index: 2;
}
#megucaExtendedMenu {
position: fixed;
top: 15px;
right: 100px;
padding: 10px;
z-index: 10000;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
background: #353535;
border: 1px solid #737373;
color: #ddd;
border-radius: 4px;
}
.postMine {
border-left: 3px dashed;
border-left-color: #36a9ffed !important;
padding-left: 7px;
box-sizing: border-box;
}
.postReply:not(.postMine) {
border-left: 2px solid;
border-left-color: #a8d8f8b0 !important;
padding-left: 8px;
box-sizing: border-box;
}
`);
// Register menu command
GM.registerMenuCommand("Show Options Menu", openMenu);
try {
createSettingsButton();
} catch (error) {
console.log("Error while creating settings button:", error);
}
//Open the settings menu on the first run
if (settings.firstRun) {
settings.firstRun = false;
await GM.setValue("firstRun", settings.firstRun);
openMenu();
}
let threadID = document.querySelector("#thread-container")?.dataset.id || null;
if (!threadID) {
console.log("Meguca Extended: Thread ID is empty. Is this even a thread? Exiting.");
return;
}
let threadPosts = document.querySelectorAll("#threads #thread-container article");
// if (threadPosts?.length < 10) {
// //disable if there are less than 10 posts
// return;
// }
const yourPosts = [];
const yourReplies = [];
let db;
let retries = 0;
dbStart();
function openMenu() {
const oldMenu = document.getElementById("megucaExtendedMenu");
if (oldMenu) {
oldMenu.remove();
return;
}
// Create options menu
const menu = document.createElement("div");
menu.id = "megucaExtendedMenu";
menu.innerHTML = `
<h3 style="text-align: center; color:#6bc9ff;">Meguca Extended Options</h3><br><br>
<label>
<input type="checkbox" id="scrollToUnread" ${settings.scrollToUnread ? "checked" : ""}>
Scroll to first unread post after page load
</label><br>
<label>
<input type="checkbox" id="showScrollbarMarkers" ${settings.showScrollbarMarkers ? "checked" : ""}>
Show your posts and replies on the scrollbar
</label><br><br>
<button id="saveSettings">Save</button>
<button id="closeMenu">Close</button>
`;
document.body.appendChild(menu);
// Save button functionality
document.getElementById("saveSettings").addEventListener("click", async () => {
settings.scrollToUnread = document.getElementById("scrollToUnread").checked;
settings.showScrollbarMarkers = document.getElementById("showScrollbarMarkers").checked;
await GM.setValue("scrollToUnread", settings.scrollToUnread);
await GM.setValue("showScrollbarMarkers", settings.showScrollbarMarkers);
alert("Settings saved!\nRefresh the page for the changes to take effect.");
menu.remove();
});
// Close button functionality
document.getElementById("closeMenu").addEventListener("click", () => {
menu.remove();
});
}
function createSettingsButton() {
document.querySelector(".overlay-container #banner-watcher").parentElement.insertAdjacentHTML("beforeend", `
<a id="banner-megucaextended" class="banner-float svg-link noscript-hide" title="Meguca Extended Settings"
style="color: #2eb1ff;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7L336 192c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path>
</svg>
</a>
`);
document.querySelector("#banner-megucaextended").addEventListener("click", openMenu);
}
function dbStart() {
let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
let DBOpenRequest = indexedDB.open("meguca");
DBOpenRequest.onsuccess = (event) => {
db = event.target.result;
dbContinue();
};
DBOpenRequest.onerror = (event) => {
//retry db access
if (retries < 5) {
retries++;
setTimeout(() => {
dbStart();
}, 150);
}
};
}
async function dbContinue() {
//Always mark unread, the setting is just for the scrolling part.
let transaction = db.transaction("seenPost", "readonly");
let objectStore = transaction.objectStore("seenPost");
let getAll = objectStore.getAll();
getAll.onsuccess = (event) => {
let allData = event.target.result;
//Find "first unread post"
let postIDs = new Map();
threadPosts.forEach((element) => {
let id = parseInt(element.id.split("p")[1]);
postIDs.set(id, true);
});
allData.forEach((obj) => {
if (obj.op == threadID) {
postIDs.delete(obj.id);
}
});
if (postIDs.size == 0) {
//No unread posts. Scroll to bottom.
document.querySelector("html").scrollIntoView(false);
} else {
//Scroll to first unread post
const iterator = postIDs.keys();
let firstUnreadID = iterator.next().value;
let firstUnreadElem = document.querySelector(`article[id="p${firstUnreadID}"]`);
if (firstUnreadElem) {
//Mark as read (add styling)
firstUnreadElem.classList.add("lastRead");
//Do scroll (top of next elem)
if (settings.scrollToUnread) {
let firstUnreadPos = findPos(firstUnreadElem?.nextElementSibling || firstUnreadElem);
window.scroll(0, firstUnreadPos.top - window.innerHeight);
}
}
}
/*
//Find "last read post"
//This method doesn't work as hovered backlinks are set to read as well
let filteredData = allData.filter(obj => obj.op == threadID);
let lastObj = filteredData[filteredData.length - 1];
let lastReadElem = document.querySelector(`article[id="p${lastObj.id}"]`);
//Mark as read (add styling)
lastReadElem.classList.add("lastRead");
//Scroll one screen height above last read (don't show last read)
let lastReadPos = findPos(lastReadElem);
window.scroll(0, lastReadPos.top - window.innerHeight + 150); //+N is to show last read post and part of the next post
*/
};
getAll.onerror = (event) => {
console.error("Meguca Extended: Error accessing 'seenPost' object store:", event);
db.close();
};
//Always mark posts, the setting is just for the scrollbar marks
let mineTransaction = db.transaction("mine", "readonly");
let mineObjectStore = mineTransaction.objectStore("mine");
let getAllMine = mineObjectStore.getAll();
getAllMine.onsuccess = (mineEvent) => {
//Close db early
db.close();
let mineData = mineEvent.target.result;
// Create marker container
const markerContainer = document.createElement("div");
if (settings.showScrollbarMarkers) {
markerContainer.classList.add("marker-container");
document.body.appendChild(markerContainer);
}
// Filter and log matching "op" values
mineData.forEach((obj) => {
if (obj.op == threadID) {
let postMine = document.querySelector(`article[id="p${obj.id}"]`);
if (postMine) {
postMine.classList.add("postMine");
yourPosts.push(obj.id);
let postReplyLinks = postMine.querySelectorAll(".backlinks a[data-id]");
postReplyLinks.forEach((link) => {
let postReply = document.querySelector(`article[id="p${link.dataset.id}"]`);
if (postReply) {
yourReplies.push(link.dataset.id);
postReply.classList.add("postReply");
}
});
}
}
});
if (settings.showScrollbarMarkers) {
recreateScrollMarkers();
}
};
getAllMine.onerror = (mineEvent) => {
console.error("Meguca Extended: Error accessing 'mine' object store:", mineEvent);
};
}
function addMyStyle(newID, newStyle) {
let myStyle = document.createElement("style");
//myStyle.type = 'text/css';
myStyle.id = newID;
myStyle.textContent = newStyle;
document.querySelector("head").appendChild(myStyle);
}
function findPos(obj) {
const rect = obj.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY,
};
}
function createMarker(element, container, isReply) {
const pageHeight = document.body.scrollHeight;
const offsetTop = element.offsetTop;
const percent = offsetTop / pageHeight;
const marker = document.createElement("div");
marker.classList.add("marker");
if (isReply) {
marker.classList.add("alt");
}
marker.style.top = `${percent * 100}vh`;
marker.addEventListener("click", () => {
let elem = element?.previousElementSibling || element;
elem.scrollIntoView({ behavior: "smooth", block: "start" });
});
container.appendChild(marker);
}
function recreateScrollMarkers() {
let oldContainer = document.querySelector(".marker-container");
if (oldContainer) {
oldContainer.remove();
}
// Create marker container
const markerContainer = document.createElement("div");
if (settings.showScrollbarMarkers) {
markerContainer.classList.add("marker-container");
document.body.appendChild(markerContainer);
}
yourPosts.forEach((id) => {
const elem = document.querySelector(`article[id="p${id}"]`);
if (elem) {
createMarker(elem, markerContainer, false);
}
});
yourReplies.forEach((id) => {
const elem = document.querySelector(`article[id="p${id}"]`);
if (elem) {
createMarker(elem, markerContainer, true);
}
});
}
//Observe changes to #hover-overlay to add the styles (hovered posts)
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.tagName === "ARTICLE") {
const postID = node.id.slice(1);
if (yourPosts.some((id) => id === postID)) {
node.classList.add("postMine");
} else if (yourReplies.some((id) => id === postID)) {
node.classList.add("postReply");
}
}
});
}
}
});
const hoverDiv = document.querySelector("#hover-overlay");
observer.observe(hoverDiv, { childList: true, subtree: true });
// Add a second observer for #thread-container (new posts)
const threadObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.tagName === "ARTICLE") {
checkPost(node);
//Recreat markers because the page grew taller. Is this heavy? probably not.
if (settings.showScrollbarMarkers) {
recreateScrollMarkers();
}
}
});
}
}
});
function checkPost(node) {
const youIndicator = node.querySelector("header i");
if (youIndicator && youIndicator.textContent.match(/\(you\)/i)) {
node.classList.add("postMine");
const postID = node.id.slice(1);
yourPosts.push(postID);
}
const postLink = node.querySelector(".post-container a.post-link");
if (postLink && postLink.textContent.match(/\(you\)/i)) { //Can also match the ids from yourPosts
node.classList.add("postReply");
const postID = node.id.slice(1);
yourReplies.push(postID);
}
if (node.classList.contains("editing")) {
//Recheck until each post finishes editing (slowly)
const editpost = node; //this is necessary
let checkInterval = setInterval(() => {
if (!editpost.classList.contains("editing")) {
clearInterval(checkInterval);
//wait for the post to settle down (waiting for the links to be created)
setTimeout(() => {
checkPost(editpost);
if (settings.showScrollbarMarkers) {
recreateScrollMarkers();
}
}, 1200);
}
}, 100);
}
}
const threadContainer = document.querySelector("#thread-container");
if (threadContainer) {
threadObserver.observe(threadContainer, { childList: true });
}
})();