Chrome 확장 프로그램에서 API 요청 후 DOM을 변경하는 방법은 무엇인가요?

Question

나는 웹 페이지의 헤드 라인을 차지하고 "감정 점수"를 반환하는 언어 처리 API로 보내고 그 다음에 페이지의 헤드 라인을 다른 색상으로 강조 표시 할 크롬 확장 프로그램을 만들려고합니다. 점수의 무게. 강조 표시 기능을 제외한 모든 기능을 사용할 수 있습니다.

XMLHTTPRequests는 비동기 적으로 실행되기 때문에 DOM로드가 완료된 후에 정보를 반환하기 때문에 CSS를 변경하고 element.style.backgroundColor를 변경하기에는 너무 늦습니다. API 호출을 제거하고 textContent가 특정 단어 나 구와 일치하는지 확인해야 강조 표시가 제대로 작동합니다.

데이터가 수신되고 약속이 해결 된 후 페이지를 다시 렌더링해야합니까? 나는 크롬 "메시지"를 들여다 보았다. 그러나 그것은 해결책으로 보이지 않는다. 제공 할 수있는 조언을 주셔서 감사합니다!

아래 스크립트는 다음과 같습니다. (필자는 HTTP 요청에서 헤더를 제거했습니다) :

function highlightSentiment(){ 
var elements = document.getElementsByTagName('a'); 

for (var i = 0; i < elements.length; i++) { 
    var element = elements[i]; 

    function highlight(sentiment){ 
     if(sentiment.type == "negative"){ 
     element.style.backgroundColor = "red"; 
     console.log("neg"); 
     } else if(sentiment.type == "positive"){ 
     console.log("pos"); 
     element.style.backgroundColor = "blue"; 
     } 
    } 

    var text = element.textContent; 

    getSentiment(text).then(highlight, function(status){ 
      console.log("error"); 
    }); 
    } 
    } 

function getSentiment(headline){ 
    var urltext = "text=" + headline.split(' ').join('+'); 
    return new Promise(function(resolve, reject){ 
    var req = new XMLHttpRequest(); 
     req.open(
       "GET", 
       "https://twinword-sentiment-analysis.p.mashape.com/analyze/?"+ 
       urltext, 
       true); 

     req.responseType='json'; 
     req.onload = onResponseReceived; 
     req.send(null); 
     function onResponseReceived() { 
     var status = req.status; 
     if(status ==200){ 
      resolve(req.response); 
     } else { 
      reject(status); 
     } 
     } 
    }); 
} 

Answer 1

(편집 -이 무시하십시오 -이 게시물 이전 '약속'들어 본 적이 없습니다.)

을 당신은 HighlightSentiment를 호출 할() 함수는 응답을받은 후가 아니라 요청을 한 후.

따라서 onResponseReceived에서 "if (status == 200) {"블록 또는 "resolve (req.response);" 자체, 반환 된 데이터로 HighlightSentiment()를 호출하십시오.

응답을받은 후에도 DOM을 완벽하게 제어 할 수 있습니다.

HTH, 짐