无法连接 Chrome 扩展程序的不同文件

如何解决无法连接 Chrome 扩展程序的不同文件

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

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>

popup.js

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

getword.js

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 扩展中，您总是在 manifest file 中定义后台脚本，否则它将无法工作。像这样：

"background": {
    "scripts": [
      "back.js"
    ],"persistent": true
  },

其次需要像我们通常所做的那样将 Popup.js 包含在您的 pop.html 中<script src="popup.js"></script>

最后还有另一种称为内容脚本的脚本，它也需要包含在 manifest 中才能工作。像这样：

    "content_scripts": [
    {
      "js": ["jquery-3.5.0.min.js","content.js"]
    }
  ],

根据您的需要，您可能应该学习我认为的内容脚本。

有几个问题：

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

解决方案很简单：

从网页中获取选定的文本，
将其转移到弹出脚本中，
发出网络请求并显示结果。

manifest.json (MV2) 应在 permissions 中列出 API 站点：

  "manifest_version": 2,"permissions": [
    "activeTab","https://mashape-community-urban-dictionary.p.rapidapi.com/"
  ]

popup.html：从 html 中删除 getword.js 并删除 getword.js 文件。

popup.js：

const API_HOST = 'mashape-community-urban-dictionary.p.rapidapi.com';
const API_OPTS = {
  headers: {
    'x-rapidapi-key': 'My_API_KEY','x-rapidapi-host': API_HOST,},};

chrome.tabs.executeScript({
  code: 'getSelection().toString()',async pageData => {
  try {
    const term = pageData[0].trim();
    if (!term) throw new Error('No selection!');
    const apiUrl = `https://${API_HOST}/define?term=${encodeURIComponent(term)}`;
    const apiRes = await (await fetch(apiUrl,API_OPTS)).json();
    const def = apiRes.list[0].definition;
    document.getElementById('test').textContent = def;
  } catch (e) {
    document.getElementById('test').textContent =
      chrome.runtime.lastError ? 'Cannot access this page' : e.message;
  }
});