☰

Overleaf PDF 预览界面显示页码

在 Overleaf 的 PDF 预览界面中显示页码

  1. // ==UserScript==
  2. // @name              Overleaf PDF Viewer Page Numbers
  3. // @name:zh-CN        Overleaf PDF 预览界面显示页码
  4. // @namespace         a23187.cn
  5. // @version           0.0.1
  6. // @description       show page numbers in PDF preview panel
  7. // @description:zh-cn 在 Overleaf 的 PDF 预览界面中显示页码
  8. // @author            a23187
  9. // @match             https://www.overleaf.com/project/*
  10. // @icon              https://www.overleaf.com/favicon.ico
  11. // @grant             none
  12. // @license           MIT
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.     const id = setInterval(() => {
  18.         const btns = document.querySelector('.pdfjs-controls .btn-group');
  19.         if (!btns) {
  20.             return;
  21.         }
  22.  
  23.         const btn = btns.lastElementChild.cloneNode();
  24.         btn.href = '#';
  25.         btn.innerText = 'p/P';
  26.  
  27.         function isInViewport(e) {
  28.             const rect = e.getBoundingClientRect();
  29.             const midPoint = (window.innerHeight || document.documentElement.clientHeight) / 2;
  30.             return rect.top <= midPoint && midPoint <= rect.bottom;
  31.         }
  32.         const pages = document.getElementsByClassName('pdf-page-container page-container ng-scope');
  33.         btn.onclick = () => {
  34.             for (let i = 0; i < pages.length; ++i) {
  35.                 if (isInViewport(pages[i])) {
  36.                     btn.innerText = `${i + 1}/${pages.length}`;
  37.                     break;
  38.                 }
  39.             }
  40.         };
  41.  
  42.         btns.appendChild(btn);
  43.  
  44.         clearInterval(id);
  45.     }, 1000);
  46. })();