知乎问题标记已读

在知乎问题标题旁添加标记为已读的按钮，并允许反复切换状态
目前为 2024-05-02 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         知乎问题标记已读
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  在知乎问题标题旁添加标记为已读的按钮，并允许反复切换状态
// @author       shaoz
// @match        *://*.zhihu.com/*
// @grant        none
// @run-at       document-body
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 功能：在元素旁边添加“已读/未读”按钮
    function addButton(element) {
        if (element.querySelector('button.mark-as-read')) {
            return; // 避免重复添加按钮
        }

        // 提取问题ID，确保从URL中统一提取方式
        const linkElement = element.querySelector('a');
        const href = linkElement.getAttribute('href');
        const questionIdMatch = href.match(/question\/(\d+)/);
        if (!questionIdMatch) return;  // 如果没有找到问题ID，则不添加按钮
        const questionId = questionIdMatch[1];
        const isRead = localStorage.getItem('read_' + questionId) === 'true';

        // 创建按钮
        const readButton = document.createElement('button');
        readButton.className = 'mark-as-read';
        readButton.innerText = isRead ? '已读' : '标记为已读';
        readButton.style.marginLeft = '10px';
        readButton.style.color = '#000000';
        readButton.style.backgroundColor = isRead ? '#4CAF50' : '#e0e0e0';
        readButton.style.border = '1px solid #dcdcdc';
        readButton.style.padding = '1px 4px';
        readButton.style.fontSize = '12px';
        readButton.style.fontWeight = 'normal';
        readButton.style.cursor = 'pointer';

        // 按钮点击事件：切换状态
        readButton.onclick = function() {
            const currentState = localStorage.getItem('read_' + questionId) === 'true';
            localStorage.setItem('read_' + questionId, !currentState);
            this.style.backgroundColor = currentState ? '#e0e0e0' : '#4CAF50';
            this.innerText = currentState ? '标记为已读' : '已读';
        };

        // 将按钮添加到标题旁边
        element.appendChild(readButton);
    }

    // 功能：处理页面上的所有适当元素
    function processPage() {
        const titles = document.querySelectorAll('.ContentItem-title, .SearchResult-Card .ContentItem-title');
        titles.forEach(title => addButton(title));
    }

    // 使用 MutationObserver 来应对动态加载的内容
    const observer = new MutationObserver(mutations => {
        processPage();
    });

    // 配置和启动观察者
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // 首次执行也要处理页面
    processPage();
})();
欢迎访问Greasy Fork镜像
