목록에서 HTML에 숫자를 삽입하는 방법은 무엇입니까?

Question

Chrome 확장을 사용하여 사이트의 HTML에 특정 매개 변수가 웹 사이트 코드에 포함되어있는 경우 가장 편리하게 숫자를 삽입하는 방법은 무엇입니까?

• www.newsweek.com, HF-제목, 2
• www.aaa.com, YZS, 1
• www.ccc.com, ABC, 123
예를 들어 우리는 목록을 가지고

웹 사이트 www.newseek.com에서 "hf-title"을 찾으면 브라우저의 웹 사이트에서 발견 된 단락 옆에 숫자 "2"가 삽입됩니다. 웹 사이트 www.ccc.com의 코드에서 "abc"를 발견하면 테이블 옆에 숫자 "123"이 삽입됩니다.

데이터베이스에 연결할 수 없으며 자바 스크립트 만 가능합니다. 사용할 목록은 수백 개의 행으로 이루어 지므로 switch 문을 사용하는 것은 실제로 문제가됩니다.

원본 테이블은 PC의 Google 크롬 확장 파일에 있어야합니다. 정보는 사이트가 열릴 때 (또는 바로 후에) 검색되어야합니다. 소스 코드의

예 :

<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을 사용하여 일치하는 요소를 모두 찾을 수 있습니다. 이 경우 'modifyAllNodes'에서

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

는

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

먼저 해킹하려고하는 목록의 구조를 알아야합니다. 즉, ID 또는 클래스 이름을 의미합니다. 그런 다음 JS에서 해당 문자열의 내용이 전달 된 문자열과 일치하면 해당 목록의 각 레코드를 확인하십시오. .append()