在按下按钮时突出显示文本时遇到问题 - chrome 扩展答案

【问题标题】：Having issues with highlighting text on button press - chrome extension在按下按钮时突出显示文本时遇到问题 - chrome 扩展
【发布时间】：2022-01-10 18:32:09
【问题描述】：

我正在开发一个 Google 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"
            });
        });
    });

我目前使用Washington Wikipedia 作为我的页面来突出显示。我现在也在使用Hilitor Library 来执行突出显示。同样，我可以突出显示从 popup.html 创建的 popup 窗口中的所有内容，但我无法突出显示之外的内容。

【问题讨论】：

标签： javascript highlight sendmessage chrome-extension-manifest-v3

【解决方案1】：

所以我终于想出了如何完成我的任务。发送消息/侦听器位于错误的位置。这是新的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"]
    }
  ]
}

【讨论】：