XMLHttpRequest 响应发送到内容脚本以根据响应在 DOM 中添加动态图标

Question

Chrome 扩展摘要：

从内容脚本google搜索中获取所有url
将url存储在一个数组中并发送到后台脚本
后台脚本接收url数组并向服务器发送POST请求一个一个url
后台脚本获取每个 url POST 请求的响应
现在后台脚本发送 xhr.responseText 到内容脚本
内容脚本"Receives"响应。回复采用 json 格式
需要帮助：现在我需要比较响应，如果响应 [URLfulfills:true/false] 是 "true" 我在 [ 旁边添加了一个图标=68=] 响应为真，如果为假，我必须在 url 旁边设置另一个假图标，响应为 "false"

Background.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse)
{
    if (request.locs){
        doSearchRequest(request.locs,sender.tab);
    }
 }
);
//Do the search request

function doSearchRequest(data,tab)
{
var length = Object.keys(data).length;
var sites,sitesUrl;
if (length <= 100){
     sites = Object.getOwnPropertyNames(data).splice(0,50);
     sitesUrl = JSON.stringify(sites);

    doApiRequest(sites, tab);

      if (length > 50){
      sites = Object.getOwnPropertyNames(data).splice(50,50);
      sitesUrl = JSON.stringify(sites);
      doApiRequest(sites, tab);
    }
    return;
  }
 }

// Do an api request for multiple sites 
var resp;
function doApiRequest(sitesarray, tab)
{
for(var i=0;i<sitesarray.length;i++){  
 var console = chrome.extension.getBackgroundPage().console;
 var xhr = new XMLHttpRequest();
 var p="domain="+sitesarray[i];
  xhr.open("POST","https://api.xxx.com/api/", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
   xhr.onreadystatechange = function() 
  {
    if (xhr.readyState == 4 && xhr.status==200) 
    {
     resp = JSON.parse(xhr.responseText);
     chrome.tabs.sendMessage(tab.id, {data: resp}, function(response) {   
     console.log(status,resp);
     });



   }
 }

  xhr.send(p);

ContentScript.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){       
     if (request.data){
        data = request.data;                      
     //Need to compare the received message [data] to access dom and 
      change icon according to response

     .............
     ...........
    }
});


//If document is ready, find the urls to check

  $(document).ready(function() {      
    (function checkLoop() {
        // Check if search results have  link
        var results = $('#res').find('a');
       if ( $('.yyy').length != results.length) {  
            // Check urls 
            var locs = {};              
            $(results).each(function (i) {                                                     
               var loc = getUrl($(this).attr('href'));
                locs[loc] = loc;
            });
             if(Object.keys(locs).length > 0) {
            // passes grabed urls to background page                    
            chrome.runtime.sendMessage({locs: locs}, function(response) {});

            }
        }
        setTimeout(checkLoop, 100);
    })();

});

Json 格式化 API 响应

//my json formatted api response
      {
 "URLfulfills": false,
 "Id": 16,
 "url": {
 "xid": 190,
 "title": "www.facebook.com",
 "description": "social site",
 },

Answer 1

您需要做的是检查 Google 搜索结果页面并确定您要在 DOM 中放置图标的位置。我想象的搜索结果旁边的某个地方。此外，您必须从后台脚本中请求本地 URL 图标。我假设该图标已经与您的 Chrome 扩展位于同一文件夹中。请记住，通过在清单中指定它，使内容脚本可以访问该图标。

要将图标放入 DOM（来自内容脚本），请像这样使用 jQuery：$(someSearchResult).append('<img src=' + yourIconUrl + ' />');

如果 jQuery 不存在，您可以用老方法添加它，或者先将 jQuery 添加到 DOM。

XMLHttpRequest 响应发送到内容脚本以根据响应在 DOM 中添加动态图标

XMLHttpRequest response send to content script to add dynamic icon in DOM according to response

javascript

xmlhttprequest

google-chrome-extension