2

I am new to pdf.js and google chrome extensions. I am using pdf.js to view PDF files in Chrome (https://github.com/mozilla/pdf.js/tree/master/extensions/chromium).

WHAT I WANT TO IMPLEMENT: Once my PDF is loaded and processed by PDF viewer (pdf.js), I want to check if a user is logged into my website via XmlHttpRequest. Then I want to create a popup window showing the user's name or ask him/her to login.

  1. I've added checkLogin(); function to the following script (https://github.com/Rob--W/chrome-api/tree/master/chrome.tabs.executeScriptInFrame).

    checkLogin(); opens a new popup window (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
        });
    });
 }
  1. dialog.html displays the message returned from dialog.js (containing username or asking user to login)

dialog.html :

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

  1. 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);
 }

THE PROBLEM: If I insert checkLogin(); function in background.js, the script runs when the extension is loaded. However, I want to run this function each time a PDF is loaded and processed by pdf.js. I am not sure how to proceed as I'm still familiarizing with pdf.js code.

Any tips on how to implement this correctly will be awesome. Thanks in advance for your help!

zock
  • 223
  • 4
  • 13

1 Answers1

1

So I figured out how to implement this. I'm posting this answer for those that may be interested.

As suggested by user @Luc on the thread How to know if PDF.JS has finished rendering? , I added my checkLogin(); function to this existing function in 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);

As a result, my popup window loads while/once the PDF has finished rendering. It's pretty neat!

Community
  • 1
  • 1
zock
  • 223
  • 4
  • 13
  • This is not a good solution, because 1) `textlayerrendered` can be fired more than once and 2) `chrome.tabs.create` does not work in child frames (at least, not until OOPIF is supported by Chrome). Could you clarify what you mean by "PDF processed"? E.g. "Started loading PDF data", "finished loading all PDF data", "finished rendering of the first page", ... ? – Rob W Nov 25 '15 at 10:28
  • Hello @RobW, "PDF processed" means "finished loading all PDF data". Could you help me understand what's a better solution ? – zock Dec 03 '15 at 09:12
  • Try the `chrome.webRequest.onCompleted` event. – Rob W Dec 03 '15 at 09:16