CODEWITHSUNDEEP
javascriptpdfgoogle-chrome-extensionchromiumpdf.js
zock
zock

Reputation: 223

Chrome extension: Display a popup window once PDF Viewer (pdf.js) processes a PDF

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!

Upvotes: 2

Views: 2026

Answers (1)

zock
zock

Reputation: 223

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!

Upvotes: 1

Related Questions