Overleaf PDF Viewer Page Numbers

Greasy Fork is available in English.
Overleaf PDF Viewer Page Numbers

show page numbers in PDF preview panel
当前为 2024-03-27 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name              Overleaf PDF Viewer Page Numbers
// @name:zh-CN        Overleaf PDF 预览界面显示页码
// @version           0.0.5
// @description       show page numbers in PDF preview panel
// @description:zh-cn 在 Overleaf 的 PDF 预览界面中显示页码
// @author            wanng
// @match             https://www.overleaf.com/project/*
// @icon              https://www.overleaf.com/favicon.ico
// @grant             none
// @license           MIT
// @namespace http://greasyfork.icu/users/326819
// ==/UserScript==

(function() {
    'use strict';
    // 设置一个标志来指示按钮是否已添加
    let btnAdded = false;

    const id = setInterval(() => {
        // 只有在按钮未添加时才尝试添加按钮
        if (!btnAdded) {
            const btns = document.querySelector('.pdfjs-controls .btn-group');
            if (btns) {
                const btn = btns.lastElementChild.cloneNode(true); // 克隆最后一个按钮
                btn.href = '#';
                btn.innerText = 'Loading...'; // 初始文本

                // 添加点击事件监听器
                btn.onclick = () => {
                    // 在按钮点击时重新查询页面元素
                    const pages = document.querySelectorAll('.pdfjs-viewer-inner .pdfViewer .page');
                    const total_len = pages.length; // 获取总页数
                    if(total_len === 0) {
                        btn.innerText = 'Loading...'; // 如果没有找到页面，显示Loading...
                        console.log('Attempting to reload pages...');
                        setTimeout(btn.onclick, 10); // 延迟重试
                        return; // 退出函数
                    }

                    for (let i = 0; i < pages.length; ++i) {
                        if (isInViewport(pages[i])) {
                            btn.innerText = `${i + 1}/${total_len}`; // 更新按钮文本为当前页数/总页数
                            break;
                        }
                    }
                };

                btns.appendChild(btn); // 将新按钮添加到按钮组中
                btnAdded = true; // 标记按钮已添加
            }
        }
    }, 5); // 每1000毫秒检查一次，直到成功添加按钮

    // 定义一个函数来检查元素是否在视口中
    function isInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
})();