如何在Chrome擴展程序中的API請求之後對DOM進行更改？

我想要製作一個Chrome擴展程序，它將採用網頁的標題，將其發送到語言處理API，該API返回「情感分數」，然後根據以下不同顏色突出顯示頁面上的標題得分的重量。除了突出顯示功能外，我已經完成了所有工作。如何在Chrome擴展程序中的API請求之後對DOM進行更改？

我的猜測是，因爲XMLHTTPRequests是異步運行的，所以它們只會在DOM完成加載後返回信息，此時修改CSS並更改element.style.backgroundColor已經太晚了。當我刪除API調用並只是檢查textContent是否匹配特定的單詞或短語時，突出顯示就可以正常工作。

有沒有辦法在收到數據並且承諾解決後重新呈現頁面？我查看了Chrome的「消息」，但這似乎並不是解決方案。感謝您提供的任何建議！

下面是腳本。（我已經從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); 
     } 
     } 
    }); 
}

來源

2017-02-21 thesoorae

您應該閱讀鏈接的問題。他們解釋了這個問題，即在異步調用之後，你的變量不是你期望的那些變量*。一個相對簡單的解決方案是改變：功能高亮（情感）{'到'功能高亮（元素，情感）{'和'getSentiment（文本）。然後（高亮，功能（狀態）{'到'getSentiment（）。然後（highlight.bind（null，element），function（status）{' – Makyen

感謝你Makyen！這工作！我知道我不會訪問回調中的變量，但無法弄清楚如何通過它在或正確綁定它，因爲也有HTTP響應被傳入。null，元素綁定工作得很好！ – thesoorae

-1

（編輯 - 請忽略這一點 - 我這個職位之前沒有聽說過「承諾」的。）

你要撥打的HighlightSentiment （）函數收到響應後，而不是您提出請求。因此，在onResponseReceived中，在「if（status == 200）{」block或in「resolve（req.response）;」中，本身，用返回的數據調用HighlightSentiment（）。

即使在收到響應後，您仍可完全控制DOM。

HTH， Jim

來源

2017-02-21 01:15:54 Jim

如何在Chrome擴展程序中的API請求之後對DOM進行更改？

回答

相關問題