问题描述
我一直在尝试制作一个 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;
}
});