时间戳

首页 > 解决方案 > 加载 pdf.js 以用于 chrome 扩展的内容脚本

javascript - 加载 pdf.js 以用于 chrome 扩展的内容脚本

问题描述

我是 javascript 和 chrome 扩展的新手，所以请放轻松

问题：

我有一个当前处理 html 页面的 chrome 扩展程序，但我也希望它能够在我的 chrome 浏览器中查看时处理在线嵌入的 PDF。因此，我试图在我的内容脚本中访问 pdf.js 库。

基于以前的帖子：Chrome 扩展程序 | 如何在 CDN 的内容和后台脚本中包含库

加载清单

我尝试将库 pdf.js 加载到manifest.json：

"content_scripts": [
    {
      "matches": [
        "<all_urls>"
       ],
     "js": ["https://mozilla.github.io/pdf.js/build/pdf.js","content.js"]
    }

但是当我加载 chrome 扩展时，它会导致错误“无法加载 manifest.json”。

直接在内容脚本中加载

我还尝试chrome.tabs.executeScript直接在内容脚本中加载库：

 chrome.tabs.executeScript(null,{
      file:"https://mozilla.github.io/pdf.js/build/pdf.js"
    });

但是，这会导致错误： Error in event handler: TypeError: Cannot read property 'executeScript' of undefined at gotMessage

当前设置

目前我的 chrome 扩展设置如下：弹出窗口有一堆复选框和输入字段，它们将生成数据，这将通过后台脚本发送到内容脚本，以告知其行为方式。

可能的解决方案

我想添加一个“复选框”，用于通知加载的文档是 PDF。有了这个，我可以在内容脚本中使用 if 语句将内容页面视为 pdf 并加载pdf.js库。

弹出

  <input id="check_id" type="checkbox" />

背景

  $(function(){
  if ($('#check_id').is(":checked")){
    console.log('checked');
    var msg = {pdf:'yes'}
}else{
    var msg={pdf:'no'}
}
chrome.tabs.query({currentWindow: true, active: true}, 
                   function (tabs) {
                     chrome.tabs.sendMessage(tabs[0].id, msg)
         });
 });

内容

  chrome.runtime.onMessage.addListener(gotMessage);

  function gotMessage(message, sender, sendResponse) {
  if(message.pdf==='yes'){
      chrome.tabs.executeScript(null, 
       {file:"https://mozilla.github.io/pdf.js/build/pdf.js"
       });
       PDFJS.getDocument('link to online embedded pdf').then(doc =>{
       console.log("this is"+ doc._pdfInfo.numPages);
       }else{
       // treat as normal HTML page
       }
   }

总体问题

因此，有谁知道如何在内容脚本中正确加载外部库并随后使用它？

标签： javascriptgoogle-chrome-extensionlibrariesloadlibraryexecute-script

解决方案

推荐阅读