Question

我是pdf.js和Google Chrome扩展程序的新手。我正在使用pdf.js在Chrome中查看PDF文件（https://github.com/mozilla/pdf.js/tree/master/extensions/chromium）。

我想要实施的内容：PDF查看器（pdf.js）加载和处理PDF后，我想检查用户是否通过XmlHttpRequest登录我的网站。然后我想创建一个弹出窗口，显示用户的名字或让他/她登录。

我添加了checkLogin（）;函数到以下脚本（https://github.com/Rob--W/chrome-api/tree/master/chrome.tabs.executeScriptInFrame）。

checkLogin（）;打开一个新的弹出窗口（dialog.html）

chrome.tabs.executeScriptInFrame.js：

 function checkLogin() {
     chrome.tabs.create({
        url: chrome.extension.getURL('dialog.html'),
        active: false
    }, function(tab) {
        // After the tab has been created, open a window to inject the tab
        chrome.windows.create({
            tabId: tab.id,
            type: 'popup',
            focused: true,
            height: 200, width:500
        });
    });
 }

dialog.html显示从dialog.js返回的消息（包含用户名或要求用户登录）

dialog.html：

    <html>
    <head><title>Dialog test</title></head>
    <body>
    <div id="output"></div>
    <script src="dialog.js"></script>
    </body>
    </html>

dialog.js：

connect();
function connect() {    
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "sendingcookies.php", true);
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4 && xhr.status ==200 ) {    
        var response = xhr.responseText;
        document.getElementById('output').innerHTML = response;
     }
   }
 xhr.send(null);
 }

问题：如果我插入checkLogin（）;函数在background.js中，脚本在加载扩展时运行。但是，我希望每次pdf.js加载和处理PDF时都运行此函数。我不知道如何继续，因为我还在熟悉pdf.js代码。

有关如何正确实现此功能的任何提示都会很棒。在此先感谢您的帮助！

Answer 1

所以我想出了如何实现这一点。我为那些可能感兴趣的人发布了这个答案。

正如用户@Luc在线程How to know if PDF.JS has finished rendering?上所建议的那样，我添加了checkLogin（）;函数到viewer.js中的这个现有函数。

document.addEventListener('textlayerrendered', function (e) {
  var pageIndex = e.detail.pageNumber - 1;
  var pageView = PDFViewerApplication.pdfViewer.getPageView(pageIndex);

//Added this code - creates popup window once PDF has finished rendering 
  if (event.detail.pageNumber === PDFViewerApplication.page) {
    checkLogin();
    function checkLogin() {
            chrome.tabs.create({
                url: chrome.extension.getURL('dialog.html'),
                active: false
            }, function(tab) {
                // After the tab has been created, open a window to inject the tab
                chrome.windows.create({
                    tabId: tab.id,
                    type: 'popup',
                    focused: true,
                    // incognito, top, left, ...
                    height: 300, width:500
                });
            });
    }
  }

}, true);

结果，我的弹出窗口在PDF完成渲染时加载/加载。它非常整洁！

Chrome扩展程序：PDF Viewer（pdf.js）处理PDF

1 个答案: