Question

在网站代码中找到给定参数时，将数字注入网站HTML（使用Chrome扩展程序）的最便捷方式是什么？例如，我们有一个列表：

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

当我们在网站www.newseek.com上找到“hf-title”时，在浏览器网站上找到的段落旁边插入数字“2”。当我们在网站www.ccc.com的代码中找到“abc”时，会在表格旁边插入数字“123”，依此类推。

无法与数据库建立任何连接，只需javascript即可。将要使用的列表将长达数百行，因此使用switch语句确实存在问题。

源表必须位于PC上的Google Chrome扩展程序文件中。应在网站打开时（或之后不久）查找信息。

源代码示例：

<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>

我们简单地添加

<a> 2 </a>

最后。

有什么想法吗？ ;）

Answer 1

您可能需要做的是找到页面上的所有文本节点。从那里你可以开始编辑它们。 'modifyTextNodes'函数是使用TreeWalker执行此操作的示例。这是一种非常有效的遍历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;
  }
}

或者，如果它是您要查找的元素，则可以使用querySelectorAll查找所有匹配的元素。

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

在这种情况下，'modifyAllNodes'看起来像

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;
    }
  }
}

Answer 2

首先你必须知道你正在尝试的列表的结构＆＃34; hack＆＃34;，这意味着ID或类名。然后，在你的JS中检查该列表的每个记录，如果它的内容与你传递给的字符串匹配，然后进行.append()

如何从列表中将数字注入HTML？

2 个答案: