Greasy Fork is available in English.
show page numbers in PDF preview panel
// ==UserScript==
// @name Overleaf PDF Viewer Page Numbers
// @name:zh-CN Overleaf PDF 预览界面显示页码
// @version 0.1.0
// @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;
let totalLenBtnAdded = false; // 新增标志来指示总页数按钮是否已添加
const id = setInterval(() => {
// 只有在两个按钮均未添加时才尝试添加按钮
if (!btnAdded || !totalLenBtnAdded) {
const btns = document.querySelector('.pdfjs-controls .btn-group');
if (btns) {
if (!btnAdded) {
const btn = btns.lastElementChild.cloneNode(true); // 克隆最后一个按钮
btn.href = '#';
btn.innerText = '...'; // 初始文本
// 添加点击事件监听器
btn.onclick = () => {
// 在按钮点击时重新查询页面元素
const pages = document.querySelectorAll('.pdfjs-viewer-inner .pdfViewer .page');
const total_len = pages.length; // 获取总页数
if (total_len === 0) {
btn.innerText = '...'; // 如果没有找到页面，显示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}`; // 更新按钮文本为当前页数/总页数
break;
}
}
};
btns.appendChild(btn); // 将新按钮添加到按钮组中
btnAdded = true; // 标记按钮已添加
btn.onclick(); // 立即触发一次点击事件以更新按钮文本
}
if (!totalLenBtnAdded) {
const totalLenBtn = btns.lastElementChild.cloneNode(true); // 再次克隆最后一个按钮
totalLenBtn.href = '#';
totalLenBtn.innerText = 'total'; // 初始文本
// 修改此按钮的点击事件仅显示总页数
totalLenBtn.onclick = () => {
const pages = document.querySelectorAll('.pdfjs-viewer-inner .pdfViewer .page');
totalLenBtn.innerText = `${pages.length}`; // 更新按钮文本显示总页数
};
btns.appendChild(totalLenBtn); // 将总页数按钮添加到按钮组中
totalLenBtnAdded = true; // 标记总页数按钮已添加
totalLenBtn.onclick(); // 立即触发一次点击事件以更新按钮文本
}
}
}
}, 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)
);
}
})();