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.