Tillägg som gör Flashback "bättre"

Skapar en tråd där vi kan dela olika tillägg som skapar fler funktioner på flashback och som kan vara nyttiga för flashbacks användare.

Här är en Brave Chrome och Chromium baserad tillägg.


Exempel

https://ibb.co/Y7z5k0gJ

manifest.json

[PHP]{
"manifest_version": 3,
"name": "Flashback Post Hider",
"version": "1.0",
"description": "Add a button to hide individual posts on flashback.org",
"permissions": ["scripting", "activeTab"],
"content_scripts": [
{
"matches": ["https://www.flashback.org/t*"],
"js": ["content.js"]
}
]
}[/PHP]

content.js

[PHP]function getHiddenPosts() {
return JSON.parse(localStorage.getItem('fbHiddenPosts') || '[]');
}

function saveHiddenPosts(hiddenIds) {
localStorage.setItem('fbHiddenPosts', JSON.stringify(hiddenIds));
}

function hidePostById(postId) {
const post = document.querySelector(`[data-postid="${postId}"]`);
if (post) {
post.style.display = 'none';
}
}

function addHideButtons() {
const hiddenPosts = getHiddenPosts();

document.querySelectorAll('[data-postid]').forEach(post => {
const postId = post.getAttribute('data-postid');

// If already hidden, apply immediately
if (hiddenPosts.includes(postId)) {
post.style.display = 'none';
}

// Avoid adding duplicate buttons
if (post.querySelector('.fb-hide-btn')) return;

// Find the "Rapportera" link
const reportLink = Array.from(post.querySelectorAll('a'))
.find(a => a.textContent.trim() === "Rapportera");

if (reportLink) {
// Create "Dölj" button
const btn = document.createElement('button');
btn.textContent = 'Dölj permanent';
btn.className = 'fb-hide-btn';
btn.style.marginRight = '5px';
btn.style.background = '#f44';
btn.style.color = '#fff';
btn.style.border = 'none';
btn.style.padding = '3px 6px';
btn.style.cursor = 'pointer';
btn.style.borderRadius = '3px';
btn.style.fontSize = '12px';

btn.addEventListener('click', () => {
post.style.display = 'none';
if (!hiddenPosts.includes(postId)) {
hiddenPosts.push(postId);
saveHiddenPosts(hiddenPosts);
}
});

// Insert button before "Rapportera"
reportLink.parentNode.insertBefore(btn, reportLink);
}
});
}

// Initial run
addHideButtons();

// Keep watching for new posts (e.g., infinite scroll)
const observer = new MutationObserver(addHideButtons);
observer.observe(document.body, { childList: true, subtree: true });
[/PHP]

Jaha hur får jag tillägget? Så jag kan testa.

Exempel

https://ibb.co/hFNCZrCt

manifest.json

[PHP]{
"manifest_version": 3,
"name": "Flashback Post Hider + Intressant",
"version": "1.0",
"description": "Add a button to hide individual posts on flashback.org and mark important posts",
"permissions": ["scripting", "activeTab"],
"content_scripts": [
{
"matches": [
"https://www.flashback.org/t*",
"https://www.flashback.org/s*",
"https://www.flashback.org/p*"
],
"js": ["content.js"]
}
]
}
[/PHP]

content.js

[PHP]function getHiddenPosts() {
return JSON.parse(localStorage.getItem('fbHiddenPosts') || '[]');
}

function saveHiddenPosts(hiddenIds) {
localStorage.setItem('fbHiddenPosts', JSON.stringify(hiddenIds));
}

function getInterestingPosts() {
return JSON.parse(localStorage.getItem('fbInterestingPost s') || '[]');
}

function saveInterestingPosts(ids) {
localStorage.setItem('fbInterestingPosts', JSON.stringify(ids));
}

function applyPostState(postId, post) {
const hiddenPosts = getHiddenPosts();
const interestingPosts = getInterestingPosts();
const postContent = post.querySelector('.post-col.post-right');

if (hiddenPosts.includes(postId)) {
post.style.display = 'none';
}
if (interestingPosts.includes(postId) && postContent) {
postContent.style.backgroundColor = '#00ff5359';
postContent.style.color = '#000';
}
}

function addButtonsToPosts() {
const hiddenPosts = getHiddenPosts();
const interestingPosts = getInterestingPosts();

document.querySelectorAll('[data-postid]').forEach(post => {
const postId = post.getAttribute('data-postid');

// Apply saved state
applyPostState(postId, post);

// Avoid duplicates
if (post.querySelector('.fb-hide-btn') || post.querySelector('.fb-interest-btn')) return;

// Find "Rapportera" link
const reportLink = Array.from(post.querySelectorAll('a'))
.find(a => a.textContent.trim() === "Rapportera");

if (reportLink) {
// Hide button
const hideBtn = document.createElement('button');
hideBtn.textContent = 'Dölj permanent';
hideBtn.className = 'fb-hide-btn';
hideBtn.style.marginRight = '5px';
hideBtn.style.background = '#f44';
hideBtn.style.color = '#fff';
hideBtn.style.border = 'none';
hideBtn.style.padding = '3px 6px';
hideBtn.style.cursor = 'pointer';
hideBtn.style.borderRadius = '3px';
hideBtn.style.fontSize = '12px';

hideBtn.addEventListener('click', () => {
post.style.display = 'none';
if (!hiddenPosts.includes(postId)) {
hiddenPosts.push(postId);
saveHiddenPosts(hiddenPosts);
}
});

// Intressant button (toggle)
const interestBtn = document.createElement('button');
interestBtn.textContent = 'Intressant';
interestBtn.className = 'fb-interest-btn';
interestBtn.style.marginRight = '5px';
interestBtn.style.background = '#9cf5ba';
interestBtn.style.color = '#3b3b3b';
interestBtn.style.border = 'none';
interestBtn.style.padding = '3px 6px';
interestBtn.style.cursor = 'pointer';
interestBtn.style.borderRadius = '3px';
interestBtn.style.fontSize = '12px';

interestBtn.addEventListener('click', () => {
const postContent = post.querySelector('.post-col.post-right');
if (!postContent) return;

if (interestingPosts.includes(postId)) {
// Remove from interesting
interestingPosts.splice(interestingPosts.indexOf(p ostId), 1);
saveInterestingPosts(interestingPosts);
postContent.style.backgroundColor = '';
postContent.style.color = '';
} else {
// Mark as interesting
interestingPosts.push(postId);
saveInterestingPosts(interestingPosts);
postContent.style.backgroundColor = '#00ff5359';
postContent.style.color = '#000';
}
});

// Insert buttons before "Rapportera"
reportLink.parentNode.insertBefore(hideBtn, reportLink);
reportLink.parentNode.insertBefore(interestBtn, reportLink);
}
});
}

// Initial run
addButtonsToPosts();

// Watch for dynamically loaded posts
const observer = new MutationObserver(addButtonsToPosts);
observer.observe(document.body, { childList: true, subtree: true });
[/PHP]

Skapa en mapp > skapa de filer jag skrev > öppna tillägg hanteraren i din webbläsare > aktivera developer mode > ladda mappen > färdigt

Här är en annan tillägg som också kan vara nice.

Markerar/färgar ord och användare på flashback och eller andra hemsidor.

(FB) Flashback markera viktiga ord och användare

Att flashback tog bort funktionen för att ignorera användare var riktigt kasst, så jag tycker det är positivt om folk skapar add-ons för att ta återbörda den funktionaliteten.

Kul! Har faktiskt funderat på att skapa en liknande tråd. Hade varit skoj att utveckla ett tillägg (som kan heta typ Flashback Plus) där man fixar en del av de saker som ligger i förslagsforumet i meta.

Oavsett här kommer mitt script i Tampermonkey som löser problemet med enter-slag i Firefox för de som har WYSIWYG aktiverat:

[PHP]// ==UserScript==
// @name Flashback Editor: Clean Enter Fix for Firefox
// @namespace https://www.flashback.org/u1707681
// @author Mr.RedHat
// @version 1.1
// @description Prevents <div> on Enter and inserts <br> with correct caret position
// @match https://www.flashback.org/newreply.php*
// @match https://www.flashback.org/newthread.php*
// @match https://www.flashback.org/editpost.php*
// @match https://www.flashback.org/private.php*
// @grant none
// ==/UserScript==

(function () {
'use strict';

function insertBrAtCaret(doc) {
const sel = doc.getSelection();
if (!sel.rangeCount) return;

const range = sel.getRangeAt(0);
range.deleteContents();

const br = doc.createElement("br");
range.insertNode(br);

// Create a zero-width space to place caret after <br>
const zwsp = doc.createTextNode("\u200B");
br.parentNode.insertBefore(zwsp, br.nextSibling);

// Move caret after ZWSP
const newRange = doc.createRange();
newRange.setStartAfter(zwsp);
newRange.setEndAfter(zwsp);
sel.removeAllRanges();
sel.addRange(newRange);
}

function applyEditorFix() {
const iframe = document.getElementById("vB_Editor_001_iframe");
if (!iframe) return;

const doc = iframe.contentDocument || iframe.contentWindow.document;
const body = doc.body;
if (!body || !body.isContentEditable) return;

body.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
e.preventDefault();
insertBrAtCaret(doc);
}
}, true);
}

const waitForIframe = setInterval(() => {
const iframe = document.getElementById("vB_Editor_001_iframe");
if (iframe && iframe.contentDocument && iframe.contentDocument.readyState === "complete") {
clearInterval(waitForIframe);
applyEditorFix();
}
}, 250);
})();[/PHP]

Skulle dock hellre föreslå att inaktivera WYSIWYG än att använda scriptet

Vad exakt gör de denna funktion?

Inspiration från denna tråd

(FB) Ge mig en funktion att dölja trådar jag inte vill se.


Exempel

https://ibb.co/Q7rrmwth

manifest.json

[PHP]{
"manifest_version": 3,
"name": "Flashback Thread Hider",
"version": "1.0",
"description": "Hide unwanted threads on Flashback.org/f",
"permissions": ["storage", "activeTab", "scripting"],
"content_scripts": [
{
"matches": ["https://www.flashback.org/f*"],
"js": ["content.js"]
}
]
}[/PHP]

content.js

[PHP](function() {
const storageKey = "hiddenFlashbackThreads";

chrome.storage.local.get([storageKey], (result) => {
const hiddenIds = result[storageKey] || [];

// Hide previously hidden threads
hiddenIds.forEach(id => hideThread(id));

// Add hide buttons
document.querySelectorAll("td.td_title[id^='td_title_']").forEach(tdTitle => {
const id = tdTitle.id.replace("td_title_", "");

// Skip if button already exists
if (tdTitle.querySelector(".hide-thread-btn")) return;

// Create button
const btn = document.createElement("button");
btn.textContent = "Dölj permanent";
btn.className = "hide-thread-btn";
btn.style.position = "absolute";
btn.style.right = "5px";
btn.style.top = "50%";
btn.style.transform = "translateY(-50%)";
btn.style.fontSize = "10px";
btn.style.padding = "2px 5px";
btn.style.cursor = "pointer";
btn.style.background = "#ff6666";
btn.style.color = "#fff";
btn.style.border = "none";
btn.style.borderRadius = "3px";

// Make sure td is relatively positioned
tdTitle.style.position = "relative";

btn.addEventListener("click", () => {
hideThread(id);

// Save in storage
chrome.storage.local.get([storageKey], (data) => {
const arr = data[storageKey] || [];
if (!arr.includes(id)) {
arr.push(id);
chrome.storage.local.set({ [storageKey]: arr });
}
});
});

tdTitle.appendChild(btn);
});
});

function hideThread(id) {
const row = document.getElementById("td_title_" + id)?.closest("tr");
if (row) row.style.display = "none";
}
})();
[/PHP]

Rent tekniskt byter den ut <div> mot <br>.

Rent visuellt gör den så du kan göra flera radbrytningar när du har WYSIWYG aktiverat.

Jag avråder starkt från att använda scriptet

Exempel

https://ibb.co/Swc9mZkN

manifest.json

[PHP]{
"manifest_version": 3,
"name": "Flashback Thread Hider",
"version": "1.0",
"description": "Hide threads on Flashback nya-amnen and remember hidden ones",
"permissions": ["storage"],
"content_scripts": [
{
"matches": ["https://www.flashback.org/nya-amnen*"],
"js": ["content.js"]
}
]
}
[/PHP]

content.js

[PHP](() => {
const storageKey = "hiddenRows";

chrome.storage.local.get([storageKey], (result) => {
const hiddenIndexes = result[storageKey] || [];

// Hide saved rows on load
hiddenIndexes.forEach(i => {
const row = document.querySelectorAll("tr")[i];
if (row) row.style.display = "none";
});

// Add hide buttons to every row
document.querySelectorAll("tr").forEach((tr, index) => {
if (hiddenIndexes.includes(index)) return;
if (tr.querySelector(".hide-row-btn")) return;

const categoryTd = tr.querySelector("td.td_category");
if (!categoryTd) return; // skip if not found

// Create a new <td> to replace td_category with just the button
const btn = document.createElement("button");
btn.textContent = "Dölj";
btn.className = "hide-row-btn";

btn.style.cssText = `
font-size: 11px;
padding: 4px 8px;
cursor: pointer;
background: #f44336;
color: white;
border: none;
border-radius: 3px;
margin-top:5px;
`;

btn.addEventListener("click", () => {
tr.style.display = "none";

chrome.storage.local.get([storageKey], (data) => {
const arr = data[storageKey] || [];
if (!arr.includes(index)) {
arr.push(index);
chrome.storage.local.set({ [storageKey]: arr });
}
});
});

// Replace the td_category cell with a new td containing only the button
const newTd = document.createElement("td");
newTd.appendChild(btn);
tr.replaceChild(newTd, categoryTd);
});
});
})();
[/PHP]

Exempel

https://ibb.co/GffRP4vm
https://ibb.co/Q7rrmwth
https://ibb.co/hFNCZrCt

manifest.json

[PHP]{
"manifest_version": 3,
"name": "Flashback Post & Thread Hider + Intressant",
"version": "1.0",
"description": "Hide posts and threads on flashback.org and mark important posts",
"permissions": ["storage", "scripting", "activeTab"],
"content_scripts": [
{
"matches": [
"https://www.flashback.org/t*",
"https://www.flashback.org/s*",
"https://www.flashback.org/p*",
"https://www.flashback.org/f*"
],
"js": ["content.js"]
}
]
}
[/PHP]

content.js

[PHP]
// --- POSTS (t*, s*, p*) --- //

function getHiddenPosts() {
return JSON.parse(localStorage.getItem('fbHiddenPosts') || '[]');
}

function saveHiddenPosts(hiddenIds) {
localStorage.setItem('fbHiddenPosts', JSON.stringify(hiddenIds));
}

function getInterestingPosts() {
return JSON.parse(localStorage.getItem('fbInterestingPost s') || '[]');
}

function saveInterestingPosts(ids) {
localStorage.setItem('fbInterestingPosts', JSON.stringify(ids));
}

function applyPostState(postId, post) {
const hiddenPosts = getHiddenPosts();
const interestingPosts = getInterestingPosts();
const postContent = post.querySelector('.post-col.post-right');

if (hiddenPosts.includes(postId)) {
post.style.display = 'none';
}
if (interestingPosts.includes(postId) && postContent) {
postContent.style.backgroundColor = '#00ff5359';
postContent.style.color = '#000';
}
}

function addButtonsToPosts() {
const hiddenPosts = getHiddenPosts();
const interestingPosts = getInterestingPosts();

document.querySelectorAll('[data-postid]').forEach(post => {
const postId = post.getAttribute('data-postid');

// Apply saved state
applyPostState(postId, post);

// Avoid duplicates
if (post.querySelector('.fb-hide-btn') || post.querySelector('.fb-interest-btn')) return;

// Find "Rapportera" link
const reportLink = Array.from(post.querySelectorAll('a'))
.find(a => a.textContent.trim() === "Rapportera");

if (reportLink) {
// Hide button
const hideBtn = document.createElement('button');
hideBtn.textContent = 'Dölj permanent';
hideBtn.className = 'fb-hide-btn';
Object.assign(hideBtn.style, {
marginRight: '5px',
background: '#f44',
color: '#fff',
border: 'none',
padding: '3px 6px',
cursor: 'pointer',
borderRadius: '3px',
fontSize: '12px',
});

hideBtn.addEventListener('click', () => {
post.style.display = 'none';
if (!hiddenPosts.includes(postId)) {
hiddenPosts.push(postId);
saveHiddenPosts(hiddenPosts);
}
});

// Intressant button (toggle)
const interestBtn = document.createElement('button');
interestBtn.textContent = 'Intressant';
interestBtn.className = 'fb-interest-btn';
Object.assign(interestBtn.style, {
marginRight: '5px',
background: '#9cf5ba',
color: '#3b3b3b',
border: 'none',
padding: '3px 6px',
cursor: 'pointer',
borderRadius: '3px',
fontSize: '12px',
});

interestBtn.addEventListener('click', () => {
const postContent = post.querySelector('.post-col.post-right');
if (!postContent) return;

if (interestingPosts.includes(postId)) {
// Remove from interesting
interestingPosts.splice(interestingPosts.indexOf(p ostId), 1);
saveInterestingPosts(interestingPosts);
postContent.style.backgroundColor = '';
postContent.style.color = '';
} else {
// Mark as interesting
interestingPosts.push(postId);
saveInterestingPosts(interestingPosts);
postContent.style.backgroundColor = '#00ff5359';
postContent.style.color = '#000';
}
});

// Insert buttons before "Rapportera"
reportLink.parentNode.insertBefore(hideBtn, reportLink);
reportLink.parentNode.insertBefore(interestBtn, reportLink);
}
});
}

// --- THREADS (f*) --- //

const storageKeyHidden = "hiddenFlashbackThreads";
const storageKeyMarked = "markedFlashbackThreads";

function hideThread(id) {
const row = document.getElementById("td_title_" + id)?.closest("tr");
if (row) row.style.display = "none";
}

function addButtonsToThreads(hiddenIds, markedIds) {
document.querySelectorAll("td.td_title[id^='td_title_']").forEach(tdTitle => {
const id = tdTitle.id.replace("td_title_", "");
const row = tdTitle.closest("tr");

// Skip if buttons already exist
if (tdTitle.querySelector(".hide-thread-btn")) return;

// Hide button
const hideBtn = document.createElement("button");
hideBtn.textContent = "Dölj permanent";
hideBtn.className = "hide-thread-btn";
Object.assign(hideBtn.style, {
position: "absolute",
right: "5px",
top: "50%",
transform: "translateY(-50%)",
fontSize: "10px",
padding: "2px 5px",
cursor: "pointer",
background: "#ff6666",
color: "#fff",
border: "none",
borderRadius: "3px",
marginLeft: "5px"
});

// Mark button
const markBtn = document.createElement("button");
markBtn.className = "mark-thread-btn";
Object.assign(markBtn.style, {
position: "absolute",
right: "80px",
top: "50%",
transform: "translateY(-50%)",
fontSize: "10px",
padding: "2px 5px",
cursor: "pointer",
border: "none",
borderRadius: "3px",
marginLeft: "5px"
});

// Set initial mark button text and color
if (markedIds.includes(id)) {
markBtn.textContent = "Ogilla";
markBtn.style.backgroundColor = "orange";
row.style.backgroundColor = "#9cf5ba";
} else {
markBtn.textContent = "Gilla";
markBtn.style.backgroundColor = "#9cf5ba";
row.style.backgroundColor = "";
}

// Make sure td is relatively positioned
tdTitle.style.position = "relative";

hideBtn.addEventListener("click", () => {
hideThread(id);
chrome.storage.local.get([storageKeyHidden], (data) => {
const arr = data[storageKeyHidden] || [];
if (!arr.includes(id)) {
arr.push(id);
chrome.storage.local.set({ [storageKeyHidden]: arr });
}
});
});

markBtn.addEventListener("click", () => {
chrome.storage.local.get([storageKeyMarked], (data) => {
let arr = data[storageKeyMarked] || [];
if (arr.includes(id)) {
// Unmark
arr = arr.filter(x => x !== id);
row.style.backgroundColor = "";
markBtn.textContent = "Gilla";
markBtn.style.backgroundColor = "#9cf5ba";
} else {
// Mark
arr.push(id);
row.style.backgroundColor = "#9cf5ba";
markBtn.textContent = "Ogilla";
markBtn.style.backgroundColor = "orange";
}
chrome.storage.local.set({ [storageKeyMarked]: arr });
});
});

tdTitle.appendChild(markBtn);
tdTitle.appendChild(hideBtn);
});
}

// --- Initialization based on URL --- //

const url = location.href;

if (url.match(/\/(t|s|p)/)) {
// Posts page
addButtonsToPosts();

// Observe for dynamic content
const observer = new MutationObserver(addButtonsToPosts);
observer.observe(document.body, { childList: true, subtree: true });

} else if (url.match(/\/f/)) {
// Threads page
chrome.storage.local.get([storageKeyHidden, storageKeyMarked], (result) => {
const hiddenIds = result[storageKeyHidden] || [];
const markedIds = result[storageKeyMarked] || [];

hiddenIds.forEach(id => hideThread(id));
addButtonsToThreads(hiddenIds, markedIds);
});
}

[/PHP]