javascript - firefox 扩展无法识别 axios 命令

Question

我正在尝试编写一个 Firefox 网络扩展，它允许用户突出显示文本并查看相关的图像弹出窗口。它作为本地文档上的标准 javascript 文件工作，但由于某种原因，扩展无法看到 axios 函数。我需要添加权限还是没有链接到 axios cdn？

这是清单

{
  "manifest_version": 2,
  "name": "infopop",
  "version": "0.1",
  "browser_specific_settings": {
      "gecko": {
          "strict_min_version": "54.0a1"
      }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["infopop.js"]
    }
  ],
  "web_accessible_resources": [
    "images/*"
  ]

}

这是脚本

const additions = `
<style>
  #tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background:white;
  }
  #cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
  }
  #cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0px;
    left:0px;
    overflow:none;
    z-index:-100;
  }
</style>
<p>test</p>
<div id="cal1">&nbsp;</div>
<div id="cal2">&nbsp;</div>
<div id="tooltip">
  <p>...</p>
  <img src='' width='100' height='100' id='infopop'>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js'></script>
`;

document.body.innerHTML += additions;
const GOOGLE_API_URL = 'https://www.googleapis.com/customsearch/v1';
const API_KEY = …
const CX = …

async function google_image_search(searchTerm){
  const response = await axios({
    method:'GET',
    url:GOOGLE_API_URL,
    params:{
      q:searchTerm,
      num:1,
      searchType:'image',
      key:API_KEY,
      cx:CX,
    }
  });
  return response;
}

var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', async function () {
  const text = getSelectedText();
  const results = await google_image_search(text);
  const thumbnailURL = thumbnailFromResults(results);
  const imageElement = document.getElementById('infopop');
  imageElement.src = thumbnailURL;
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together
        ele.style.display = 'block';
    }
});

window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

function getSelectedText() {
  var text = "";
  if (typeof window.getSelection != "undefined") {
      text = window.getSelection().toString();
  } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
      text = document.selection.createRange().text;
  }
  return text;
}

function thumbnailFromResults(results, index = 0){
  return results.data.items[index].image.thumbnailLink;
}

标签： javascriptjsonaxiosfirefox-addongoogle-custom-search