无法连接 Chrome 扩展的不同文件答案

【问题标题】：Unable to connect different files of Chrome Extension无法连接 Chrome 扩展的不同文件
【发布时间】：2021-05-09 00:40:02
【问题描述】：

我一直在尝试制作一个 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 时。结果是未定义的。如果有人能以任何方式帮助我重构此代码，我将不胜感激。

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an asynchronous call?

标签： javascript html google-chrome-extension manifest.json

【解决方案1】：

在 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"]
    }
  ],

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

【讨论】：

对不起，我已经包含了 pop.js，但忘了写在这里。问题是我没有任何后台工作，所以不需要 back.js，并且在定义内容脚本时，整个结构都会中断

【解决方案2】：

有几个问题：

注入的代码无法发出跨域网络请求。
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;
  }
});

【讨论】：

非常感谢。它确实有效，所有异步调用错误和 DOM 错误都已解决。