为什么我的Chrome扩展程序无法突出显示多个关键字？

ki0zmccv 于 2023-06-03 发布在 Go

关注(0)|答案(1)|浏览(214)

我需要帮助识别错误的谷歌浏览器扩展代码我试图使。
扩展应突出显示在活动的URL /标签上选择不同颜色的多个关键字。
由于我需要这个敏感数据，我不愿意使用类似的现有扩展，因为我完全业余的编码，我用ChatGPT代码的一些基本知识。
在最后的UI看起来不错，但问题是，扩展没有突出显示页面上的任何东西。
代码看起来不错，但我找不到扩展不工作的原因。任何帮助或洞察力是赞赏。
以下是所有文件：

Manifest.json:
{
    "manifest_version": 3,
    "name": "Search Word Highlighter",
    "version": "1.0",
    "description": "Chrome extension to find and highlight multiple search words on the current URL.",
    "icons": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
      }
    },
    "permissions": [
      "activeTab",
      "storage",
      "scripting"
    ],
    "host_permissions": [
      "<all_urls>"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["content.js"],
            "run_at": "document_end"
          }
      ],
      
    "background": {
      "service_worker": "background.js"
    }
  }

popup.html:
<!DOCTYPE html>
<html>
<head>
  <title>Highlight multi</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 10px;
    }
    
    form {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
    }
    
    .keyword-container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    input[type="text"] {
      margin-right: 10px;
    }
    
    input[type="color"] {
      padding: 0;
      height: 24px;
      width: 24px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }
    
    button {
      margin-top: 10px;
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    li {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <form id="add-keyword-form">
    <div class="keyword-container">
      <input type="text" class="keyword-input" placeholder="Enter a keyword">
      <input type="color" class="color-input" value="#ff0000">
    </div>
    <button type="button" id="add-keyword-button">Add Keyword</button>
    <button type="button" id="search-button">Search</button>
  </form>
  
  <ul id="keywords-list"></ul>
  
  <script src="popup.js"></script>
</body>
</html>

popup.js:
document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("add-keyword-form");
    const addKeywordButton = document.getElementById("add-keyword-button");
    const searchButton = document.getElementById("search-button");
    const keywordsList = document.getElementById("keywords-list");
  
    let keywordIndex = 1;
  
    // Handle add keyword button click
    addKeywordButton.addEventListener("click", function () {
      addKeywordField();
    });
  
    // Handle search button click to trigger the search function
    searchButton.addEventListener("click", function () {
      const keywordInputs = document.querySelectorAll(".keyword-input");
      const colorInputs = document.querySelectorAll(".color-input");
      const keywords = [];
      for (let i = 0; i < keywordInputs.length; i++) {
        const keyword = keywordInputs[i].value.trim();
        const color = colorInputs[i].value;
        if (keyword && color) {
          keywords.push({ keyword, color });
        }
      }
      if (keywords.length > 0 || keywordInputs[0].value.trim() !== "") {
        searchKeywords(keywords);
      }
    });
  
    // Function to add a new keyword field
    function addKeywordField() {
      const container = document.createElement("div");
      container.classList.add("keyword-container");
  
      const keywordInput = document.createElement("input");
      keywordInput.setAttribute("type", "text");
      keywordInput.setAttribute("placeholder", "Enter a keyword");
      keywordInput.classList.add("keyword-input");
  
      const colorInput = document.createElement("input");
      colorInput.setAttribute("type", "color");
      colorInput.setAttribute("value", "#ff0000");
      colorInput.classList.add("color-input");
  
      container.appendChild(keywordInput);
      container.appendChild(colorInput);
      form.insertBefore(container, addKeywordButton);
    }
  
    // Function to search the keywords
    function searchKeywords(keywords) {
      // Send a message to the content script to highlight the keywords on the page
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { action: "highlightKeyWords", keywords: keywords }, function (response) {
          // Handle the response if needed
        });
      });
  
      // Display the keywords in the list
      keywordsList.innerHTML = "";
      keywords.forEach(keyword => {
        const li = document.createElement("li");
        li.textContent = keyword.keyword;
        li.style.color = keyword.color;
        keywordsList.appendChild(li);
      });
    }
  });

content.js:
// Function to highlight all occurrences of a keyword
function highlightKeyword(keyword, color) {
  const regex = new RegExp(`\\b${keyword}\\b`, "gi");
  const matches = document.body.innerText.match(regex);
  if (matches) {
    for (const match of matches) {
      const span = document.createElement("span");
      span.style.backgroundColor = color;
      span.style.color = "yellow";
      span.textContent = match;

      const replacedHtml = document.body.innerHTML.replace(new RegExp(match, "g"), span.outerHTML);
      document.body.innerHTML = replacedHtml;
    }
  }
}

// Function to search the keywords and highlight them on the page
function searchKeywords(keywords) {
  keywords.forEach(keyword => {
    highlightKeyword(keyword.keyword, keyword.color);
  });
}

// Listen for messages from the extension popup
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === "highlightWords") {
    const keywords = message.keywords;
    searchKeywords(keywords);
  }
});

background.js:
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"]
  });
});

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === "getKeywords") {
    chrome.storage.local.get("keywords", function (data) {
      sendResponse({ keywords: data.keywords });
    });
    return true; // Needed to indicate that the response will be sent asynchronously
  } else if (message.action === "saveKeywords") {
    chrome.storage.local.set({ keywords: message.keywords });
  } else if (message.action === "highlightKeywords") {
    // Forward the message to the content script
    chrome.tabs.sendMessage(sender.tab.id, message);
  }
});

chrome.runtime.onInstalled.addListener(function () {
  // Check if persistent storage is available and request it if necessary
  if (navigator.storage && navigator.storage.persist) {
    navigator.storage.persist().then((persistent) => {
      if (persistent) {
        console.log("Persistent storage granted.");
      } else {
        console.log("Persistent storage not granted.");
      }
    });
  }
});

css:
body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  
  h1 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  form {
    margin-bottom: 20px;
  }
  
  input[type="text"] {
    width: 200px;
  }
  
  
  button {
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
  }

谢谢你的帮助
我在这里找到了一些关于以前的清单版本2的解释，但这并没有帮助。聊天GPT无法检测到任何错误

google-chrome

来源：https://stackoverflow.com/questions/76383072/why-isnt-my-chrome-extension-for-highlighting-multiple-keywords-working

1条答案

按热度按时间

r1zhe5dt1#

如果chatGPT可以读取文档，它会知道“如果扩展操作指定了在单击当前选项卡时显示的弹出窗口，则不会调度action.onClicked事件。”

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      files: ["content.js"],
    });
  });

int count = 1;在popup.js中
JS实际上是大小写敏感的语言，所以你需要在所有的js文件中将action改为“highlightKeywords”。例如，在content.js中，它是“highlightWords”，没有Key，大写W，当然这样的动作在代码中不存在。

赞(0）回复(0）举报 2023-06-03

我来回答

为什么我的Chrome扩展程序无法突出显示多个关键字？

1条答案

相关问题

热门标签

最新问答