我正在开发一个谷歌Chrome扩展，该扩展将具有突出显示特定单词的功能。我已经能够获得在popup窗口中突出显示单词的扩展。然而，当我试图修改我的代码并突出显示Active Tab中的单词时，我遇到了问题。我正在尝试使用chrome.tabs.sendMessage来执行该操作。该消息从未命中我现有的listener。也许我把它放错了文件？
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="button.css">
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="popup.js"></script>
<script src="selection.js"></script>
<script src="hilitor.js"></script>
</head>
<body>
<button id="highlightText">Scan for Washington</button>
</body>
</html>
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.message == "getSelection"){
console.log("Inside Get Selection");
var myHilitor = new Hilitor("content"); // id of the element to parse
myHilitor.apply("washington state one");
console.log(request, sender, sendResponse);
}
sendResponse();
});
popup.js
$(function(){
$('#highlightText').click(function(){highlightAllText();});
});
function highlightAllText() {
console.log("Inside Highlight All Text");
chrome.windows.getCurrent(w => {
chrome.tabs.query({active: true, windowId: w.id}, tabs => {
chrome.tabs.sendMessage(tabs[0].id, {
"message": "getSelection"
});
});
});
我目前正在使用华盛顿维基百科作为我的页面来突出显示。我现在也在使用Hilitor库来执行高亮显示。同样，我可以突出显示从popup.html创建的popup窗口中的所有内容，但我不能突出显示它之外的内容。
所以我终于想好了如何完成任务。发送消息/侦听器位于错误的位置。这是新的popup.js文件：
popup.js
function popup() {
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {
message: "start",
tabID: tabs[0].id,
tabURL: tabs[0].url
});
});
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("highlightText").addEventListener("click", popup);
});
我不得不进行一些重构/观看教程/把头靠在墙上，但这是我用来强调的新content script：
contentScript.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.message === "start") {
console.log("Before Hilitor");
var myHilitor = new Hilitor("content"); // id of the element to parse
myHilitor.apply("washington state one");
console.log("After Hilitor");
}
}
);
这是我的popup.html页面：
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="stylesheet" href="button.css">-->
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="popup.js"></script>
<script src="contentScript.js"></script>
</head>
<body>
<button id="highlightText">Scan for Washington</button>
</body>
</html>
这就是我的manifest.json文件的
manifest.json
{
"name": "Hello World",
"description": "Hello World",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["contentScript.js", "hilitor.js"]
}
]
}