如何在Firefox插件中使用pdf.js库?

时间:2019-05-04 06:20:27

标签: javascript firefox firefox-addon pdf.js

我正在为Google翻译页面中的{strong> pdf 文档的insert做一个Firefox扩展,我想使用pdf.js。不想使用embed或iframe广告代码,我想使用自己的 pdf 查看器。 我正在尝试在Firefox加载项中使用pdj.js库,但是它不起作用。 我已经尝试过将其添加到manifest.json中。

    "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["script.js","pdf.js"]
    }
   [enter image description here][1] ]

但是当我这样做时:

pdfjsLib.getDocument(pdf_url); 

它不起作用,脚本停止工作。

我确实尝试将脚本添加到页面顶部

var pdf_js = document.createElement('script');
pdf_js.src = 'https://mozilla.github.io/pdf.js/build/pdf.js';
document.getElementsByTagName('head')[0].appendChild(pdf_js);

,它也不起作用。但是,当我在Firefox的调试控制台中使用 pdfjsLib 时,它可以工作,但是从我用于插件的脚本中,pdfjsLib.getDocument函数无法正常工作。

使用jQuery时,我遇到了类似的问题,该库在脚本中不起作用。

我尝试按照 Jaromanda X 的建议观看导航控制台,并且明白了

ReferenceError:

  

未定义pdfjsLib

2 个答案:

答案 0 :(得分:0)

我解决了这个问题。问题是manifest.json"content_scripts"中的"js"的脚本顺序不好。.

我首先遇到了这个问题,因为script.js(附加脚本)早于pdf.js

   "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["script.js","pdf.js"]
    }

正确的方法是。

   "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["pdf.js","script.js"]
    }

如果使用Jquery,也应该在script.js之前

 "js": ["jquery.min.js","pdf.js","script.js"]

答案 1 :(得分:0)

我通过添加以下行来解决它:

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';