firefox 扩展无法识别 axios 命令

问题描述

我正在尝试编写一个 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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）