How do I highlight text on a webpage in my Edge extension?

Question

How do I highlight text on a webpage in my Edge extension?

79 Views Asked by Ben At 01 February 2024 at 19:49

I'm trying to learn how to make extensions in Edge (and eventually implement my dream upgrade for the Control-F Find function). This is a small extension so far, and it doesn't work: when I click the "Find" button, nothing happens, but I want every occurrence of the search string on the webpage to be highlighted. Could you please help me to highlight all the search string matches on the web page? Thank you.

I checked for errors in the browser console and didn't see any. Also, the print statement "find function reached" is not even printed to the console. So it's like the find function is not getting called at all.

manifest.json

{
  "manifest_version": 2,
  "name": "Find and Follow",
  "version": "1.0",
  "description": "A browser extension that allows you to search for text and follow hyperlinks with ease.",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Find and Follow</title>
  </head>
  <body>
    <input type="text" id="search" placeholder="Search...">
    <button id="find">Find</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

function find() {
  let searchText = document.getElementById("search").value;

  let regex = new RegExp(searchText, "ig");
  let matches = document.documentElement.innerHTML.match(regex);
  if (matches) {
    document.documentElement.innerHTML = document.documentElement.innerHTML.replace(
      regex,
      '<span style="background-color: yellow;">$&</span>'
    );
  }
  console.log("find function reached.");

}

document.getElementById("find").addEventListener("click", find);

Original Q&A

There are 1 best solutions below

**Kendrick Li** · Answer 1 · 2024-02-06T09:06:09.157000

First things first, it is not recommended to use Regex to do highlight things, but I'll show you the basic structure of how you may achieve the highlight feature. You can learn more about how to properly customize highlight feature and then come back to edit the code.

manifest.json

{
    "manifest_version": 2,
    "name": "Find and Follow",
    "version": "1.0",
    "description": "A browser extension that allows you to search for text and follow hyperlinks with ease.",
    "browser_action": {
      "default_popup": "popup.html"
    },
    "permissions": ["activeTab"],
    "content_scripts": [{
        "matches": [
            "<all_urls>"
        ],
        "js": ["content-script.js"]
    }]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Find and Follow</title>
  </head>
  <body>
    <input type="text" id="search" placeholder="Search...">
    <button id="find">Find</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js（Giving orders and passing variables from popup.html to content-script.js)

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("find").addEventListener("click", function(){    
        let searchText = document.getElementById("search").value;
            chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
                chrome.tabs.sendMessage(tabs[0].id, { type: "highlight",  text: searchText });
        });
    });
});

content-script.js (Waiting for orders and interact with current tab)

chrome.extension.onMessage.addListener(
    function (message) {
        if (message.type === "highlight") {
            let searchText = message.text;
            //console.log(searchText);          
            let regex = new RegExp(searchText, "ig");
            let matches = document.body.innerHTML.match(regex);
            if (matches) {
              document.body.innerHTML = document.body.innerHTML.replace(
                regex,
                '<span style="background-color: yellow;">$&</span>'
              );
            }
            console.log("find function reached.");
        }
    }
);

How do I highlight text on a webpage in my Edge extension?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in MICROSOFT-EDGE-EXTENSION

Trending Questions

Popular # Hahtags

Popular Questions