I am working on a Google Chrome Extension that will have a feature to highlight specific words. I have been able to get the extension to highlight words within the popup window. However, when I try to modify my code and highlight words from the Active Tab I run into issues. I am trying to use chrome.tabs.sendMessage to perform the action. The message never hits the listener that I have in place. Maybe I have it in the wrong file?
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"
});
});
});
I am currently using Washington Wikipedia as my page to highlight. I am also using the Hilitor Library to perform the highlighting at this moment. Again, I can highlight everything in the popup window that is created from popup.html, but I can't highlight outside of that.
So I have finally figured out how to accomplish my task. The send message/listeners were in the wrong location. This is the new popup.js file:
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);
});
I had to do some refactoring/tutorial watching/beating my head against the wall, but this is the new content script that I am using to highlight:
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");
}
}
);
This is my popup.html page:
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>
And this is what my manifest.json file looks like
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"]
}
]
}