Javascript 无法连接Chrome扩展名的不同文件_Javascript_Html_Google Chrome Extension_Manifest.json

Javascript 无法连接Chrome扩展名的不同文件

javascript html google-chrome-extension

Javascript 无法连接Chrome扩展名的不同文件,javascript,html,google-chrome-extension,manifest.json,Javascript,Html,Google Chrome Extension,Manifest.json,我一直在尝试使用urban dictionary API制作一个chrome扩展，它给出所选文本的含义。我尝试了不同的方法，但无法连接所有文件以正确执行 manifest.json { "manifest_version": 2, "name": "Urban Dictionary", "version": "0.1", "description": "Diction

我一直在尝试使用urban dictionary API制作一个chrome扩展，它给出所选文本的含义。我尝试了不同的方法，但无法连接所有文件以正确执行

manifest.json

{
"manifest_version": 2,
"name": "Urban Dictionary",
"version": "0.1",
"description": "Dictionary based on Urban Dict.",

 "browser_action": {
   "default_popup": "popup.html"
  },
"icons": {
    "16": "images/images.jpg",
    "32": "images/images.jpg",
    "48": "images/images.jpg",
    "128":"images/images.jpg"
   },
  "permissions": [
    "tabs",
    "activeTab"
  ]
 


}

popup.html

<!doctype html>
<html>
  <head>
    <title>meaning</title>
   
  </head>
  <body>
    <h1>meaning</h1>
    <button id="test"></button>
    <script src="popup.js"></script>
    <script src="getword.js"></script>
  </body>
</html>

getword.js

chrome.tabs.executeScript(null, {file: "getword.js"},(results)=>{ console.log(results); } );

var something;
var term = window.getSelection().toString()
fetch("https://mashape-community-urban-dictionary.p.rapidapi.com/define?term="+term, {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "My_API_KEY",
        "x-rapidapi-host": "mashape-community-urban-dictionary.p.rapidapi.com"
    }
})
.then(response => response.json()) 
.then(result => {
    console.log(result)
    something=result.list[0].definition
    
    }
)
.catch(err => {
    console.error(err);
});

console.log(something)
document.getElementById("test").innerHTML = something;

尝试使用getword.js操作HTML时。结果是未定义的。

如果有人能以任何方式帮助我重构此代码，我将不胜感激。

在chrome extensions中，您总是在

清单文件中定义您的后台脚本，否则它将无法工作。
像这样：
"background": {
    "scripts": [
      "back.js"
    ],
    "persistent": true
  },

其次，Popup.js需要像我们通常做的那样包含在pop.html中
最后还有另一种类型的脚本，称为内容脚本，它也需要包含在清单中才能工作。
像这样：
    "content_scripts": [
    {
      "js": ["jquery-3.5.0.min.js","content.js"]
    }
  ],

根据您的需要，我认为您可能应该学习内容脚本。
有几个问题：

注入的代码无法进行跨源网络请求
js的目的是作为内容脚本注入，以便在网页中运行，因此不应在popup.html中列出，因为popup是单独窗口中与网页无关的单独扩展页

解决方案很简单：
从网页中获取所选文本
将其传输到弹出脚本
发出网络请求并显示结果
manifest.json（MV2）应该在权限中列出API站点
：
“清单”版本：2，
“权限”：[
“活动标签”，
"https://mashape-community-urban-dictionary.p.rapidapi.com/"
]

popup.html:从html中删除getword.js
，并删除getword.js文件
popup.js:
constapi_HOST='mashape community urban dictionary.p.rapidapi.com'；
常数API_选项={
标题：{
“x-rapidapi-key”：“我的API-key”，
“x-rapidapi-host”：API_主机，
},
};
chrome.tabs.executeScript({
代码：“getSelection（）.toString（）”，
}，异步页面数据=>{
试一试{
常量项=页面数据[0]。修剪（）；
如果（！term）抛出新错误（'无选择！'）；
const apiUrl=`https://${API_HOST}/define？term=${encodeURIComponent（term）}`；
const apiRes=await（await fetch（apirl，API_OPTS））.json（）；
const def=apiRes.list[0]。定义；
document.getElementById（'test'）。textContent=def；
}捕获（e）{
document.getElementById（'test'）.textContent=
chrome.runtime.lastError？“无法访问此页面”：e.message；
}
});
这是否回答了您的问题？很抱歉，我加入了pop.js，但忘了在这里写。问题是我没有任何背景工作，所以不需要back.js，而且在定义内容脚本时，整个结构都会破坏，非常感谢。它确实有效，所有异步调用错误和DOM错误都得到了解决。