javascript - Chrome 扩展程序 : Display a popup window once PDF Viewer (pdf. js) 处理 PDF

标签 javascript pdf google-chrome-extension chromium pdf.js

我是 pdf.js 和谷歌浏览器扩展的新手。我正在使用 pdf.js 在 Chrome 中查看 PDF 文件(https://github.com/mozilla/pdf.js/tree/master/extensions/chromium)。

我想实现什么:一旦我的 PDF 被 PDF 查看器 (pdf.js) 加载和处理,我想检查用户是否通过 XmlHttpRequest 登录到我的网站。然后我想创建一个弹出窗口显示用户名或要求他/她登录。

  1. 我添加了 checkLogin();对以下脚本 ( https://github.com/Rob--W/chrome-api/tree/master/chrome.tabs.executeScriptInFrame ) 起作用。

    检查登录();打开一个新的弹出窗口 (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 显示从 dialog.js 返回的消息(包含用户名或要求用户登录)

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

问题: 如果我插入 checkLogin(); background.js 中的函数,脚本在加载扩展时运行。但是,每次 pdf.js 加载和处理 PDF 时,我都想运行这个函数。我不确定如何继续,因为我仍然熟悉 pdf.js 代码。

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

最佳答案

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

正如用户@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 完成渲染时加载。非常整洁!

关于javascript - Chrome 扩展程序 : Display a popup window once PDF Viewer (pdf. js) 处理 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33888558/

相关文章:

javascript - 选中复选框时如何隐藏div - JQuery

java - 如何在 iText PDF 中使用字体

google-chrome-extension - 如何在版本 66 或更高版本的 Google Chrome 自助服务终端应用中允许视频自动播放

javascript - 内容脚本未在另一个扩展页面的 iframe 中运行

html - 如何使用内容脚本将 iFrame 附加到加载页面的顶部栏?

javascript - 通过单击更改div的高度

javascript - 将扬声器中的麦克风静音但仍然能够使用 Web Audio Api 进行分析(createAnalyser)?

javascript - 我的谷歌图片搜索中没有图片

Java - pdfbox 无法导入 jar?

pdf - 如何使用默认的pdf应用程序从Vim打开pdf文件?