How to inject a number into HTML from a list?

Question

What is the most convenient way of injecting a number into the HTML of the site (using Chrome Extensions), when the given parameter is found in the website's code? For example we have a list:

• www.newsweek.com, hf-title, 2
• www.aaa.com, yzs, 1
• www.ccc.com, abc, 123

When we find "hf-title" on the website www.newseek.com then number "2" is inserted next to the found paragraph on the website in the browser. When we find "abc" in the code of the website www.ccc.com then number "123" is inserted next to the table, and so on.

There cannot be any connection to the database, just javascript. The list that is going to be used will be hundreds of rows long, so it is really problematic to use switch statement.

The source table has to be located in the Google Chrome extension files on the PC. The information should be looked for when (or shortly after) the site is being opened.

Example of the source code:

<h2 class="hf-title">
    <a href="/four-nato-allies-deny-" class="article-link">Four NATO Allies Deny Ukraine<span class="overlay article-overlay"></span></a>
</h2>
<div class="hf-summary">
    NATO officials have previously said...  </div>
</div>

We add simply

<a> 2 </a>

at the end.

Any ideas? ;)

Answer 1

What you will likely need to do is find all of the text nodes on the page. From there you can begin editing them. The 'modifyTextNodes' function is an example of using a TreeWalker to do this. It is a very efficient method for traversing the DOM.

var arr = [{url:"www.newsweek.com", string:"hf-title", value:"2"},
           {url:"www.aaa.com", string:"yzs", value:"1"},
           {url:"www.ccc.com", string:"abc", value:"123"}];

function modifyTextNodes() {
  var el = document.getElementsByTagName('html')[0];
  var walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n = walk.nextNode()) {
    modifyNode(n);
  }
}

function modifyNode(node) {
  if (node.nodeType == Node.TEXT_NODE && node.parentNode != undefined && (val = node.nodeValue.trim())) {
    var addToEnd = "";
    for (var i=0; i<arr.length; i++) {
      if (document.baseURI.indexOf(arr[i].url) > -1 && val.indexOf(arr[i].string) > -1) {
        addToEnd  += arr[i].value;
      }
    }
  }
  if (addToEnd) {
    node.nodeValue += addToEnd;
  }
}

Alternatively, if it is elements that you are trying to find, you could use querySelectorAll to find all the matching elements.

document.querySelectorAll("[class='" + arr[i].string + "']");

In this case 'modifyAllNodes' would look like

function modifyAllNodes() {
  for (var i = 0; i<arr.length; i++) {
    if (document.baseURI.indexOf(arr[i].url) > -1) {
      var nodes = document.querySelectorAll("[class='" + arr[i].string + "']");
      modifyNodes(nodes, arr[i]);
    }
  }
}

function modifyNodes(nodes, arrEl) {
  for (var i=0; i<nodes.length; i++) {
    if (node.nodeValue.indexOf(arrEl.string) > -1) {
      node.nodeValue += arrEl.value;
    }
  }
}