Estoy trabajando en una extensión de Google Chrome que tendrá una función para resaltar palabras específicas. Pude obtener la extensión para resaltar palabras dentro de la ventana popup . Sin embargo, cuando trato de modificar mi código y resaltar palabras de la Active Tab , me encuentro con problemas. Estoy tratando de usar chrome.tabs.sendMessage para realizar la acción. El mensaje nunca llega al listener que tengo en su lugar. ¿Tal vez lo tengo en el archivo equivocado?
ventana emergente.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>fondo.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(); });emergente.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" }); }); }); Actualmente estoy usando Washington Wikipedia como mi página para resaltar. También estoy usando la Biblioteca Hilitor para realizar el resaltado en este momento. Nuevamente, puedo resaltar todo en la ventana popup que se crea a partir de popup.html , pero no puedo resaltar fuera de eso.
Así que finalmente he descubierto cómo llevar a cabo mi tarea. El mensaje de envío/los oyentes estaban en la ubicación incorrecta. Este es el nuevo archivo popup.js :
emergente.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); }); Tuve que hacer algunas refactorizaciones/tutoriales viendo/golpeando mi cabeza contra la pared, pero este es el nuevo content script que estoy usando para resaltar:
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"); } } ); Esta es mi página popup.html :
ventana emergente.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> Y así es como se ve mi archivo manifest.json
manifiesto.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"] } ] }