hyperlink the text if it matches with the provided object

Question

The usecase of my chrome extension is

As soon as the user loads his/her email, the content script should read the text from the opened mail and find if any text from the email matches with the provided topic objects. If it matches, it should create that text a url.For example if my topic object is

var topic = [{
 'name': 'Hello'
},
{'name': 'how are'}
]

In my opened mail page, if there is the word called 'hello', then that text should be converted to hyperlink hello.

original -> Hello world, how are you. This is the dummy text. 

then it should be

<a href="https://www.google.com/search/?q=Hello">Hello</a> world, <a href="https://www.google.com/search/?q=how are you">how are you</a>. This is the dummy text

I had no idea so i researched in the google and found one answer in stackoverflow. I tried that code to understand but it did not work to me. I tried to know about treewalk but did not able to make it work. Here is what I have copied

content_script.js (I admit its a copied code)

Here node.textContent is not fetching the email subject and body.

function onLoad() {
    console.log('loaded');
    // document.addEventListener('click', init);
    var re = /Mumbai/g;
    var regs;

    var walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        function(node) {
            if ((regs = re.exec(node.textContent))) {
                if (!node.parentNode.classList.contains('highlighted_text')) {
                    var match = document.createElement('A');
                    match.appendChild(document.createTextNode(regs[0]));
                    match.href = 'http://www.url.com/';

                    // add an attribute so we know this element is one we added
                    // Im using a class so you can target it with css easily
                    match.classList.add('highlighted_text');

                    var after = node.splitText(regs.index);
                    after.nodeValue = after.nodeValue.substring(regs[0].length);
                    node.parentNode.insertBefore(match, after);
                }
            }
            return NodeFilter.FILTER_SKIP;
        },
        false
    );

    // Make the walker step through the nodes
    walker.nextNode();

    // and it ends here
}

    if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', onLoad);
} else {
    onLoad();
}

here is the manifest

"background": {
  "scripts": [
    "extension/js/background.js"
  ],
  "persistent": true
},
"options_page": "index.html",
"content_scripts": [
  {
    "matches": ["https://mail.google.com/*", "http://mail.google.com/*"],
    "js": ["extension/js/content.js"],
    "css": ["extension/css/main.css"]
  }
],
"permissions": [
  "contextMenus",
  "tabs",
  "storage",
  "https://mail.google.com/*",
  "http://mail.google.com/*"
],

Answer 1

Here is a demo extension that you can examine and then implement logic to your own extension based on it.

---

As an example, this extension will turn every "da" found inside the page into a link leading to, in this case, "http://www.url.com/".

It will run once when the whole page is loaded and then on every hash change (when you open new mail).

Note: You will need to download jQuery in order for the extension to work.

Manifest.json:

{
  "manifest_version": 2,

  "name": "Example",
  "version": "1.0",

  "content_scripts": [{
    "matches": ["*://mail.google.com/*"],
    "js": ["jquery-3.3.1.min.js", "content.js"]
  }]
}

Content.js

function searchPage() {

    var re = /da/g; // example regex that the function will use for search
    var regs;

    var walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        function(node) {
            if ((regs = re.exec(node.textContent))) {
                if (!node.parentNode.classList.contains('highlighted_text')) {
                    var match = document.createElement('A');
                    match.appendChild(document.createTextNode(regs[0]));
                    match.href = 'http://www.url.com/';

                    // add an attribute so we know this element is one we added
                    // Im using a class so you can target it with css easily
                    match.classList.add('highlighted_text');

                    var after = node.splitText(regs.index);
                    after.nodeValue = after.nodeValue.substring(regs[0].length);
                    node.parentNode.insertBefore(match, after);
                }
            }
            return NodeFilter.FILTER_SKIP;
        },
        false
    );

    walker.nextNode();
}

// Run when the whole document loads
$(window).bind("load", function() {
    searchPage();
});

// Run on every hash change (when opening new mail)
$(window).on('hashchange', function() {
    searchPage();
});