Chrome Erweiterung läuft nicht in divs jquery Code

Auf Chrome-Erweiterung nach einem Ajax-Aufruf sollte es in Absätzen auf divs mit ID #Lead und #detail suchen. Wenn es einen Text findet, um eine CSS-Klasse hinzuzufügen.Chrome Erweiterung läuft nicht in divs jquery Code

sieht Ihr Code wie folgt:

function retrieveBlicCheckedFacts(tabUrl){ 
    var data = {currentUrl: tabUrl}; 
    $.support.cors = true; 
    $.ajax({ 
     type: "POST", 
     url: API_URL_FIND, 
     crossDomain: true, 
     data: JSON.stringify(data), 
     contentType: "application/json", 
     success: function(respData){ 
      console.log(respData); //here data are printed correctly 
      $("#lead, #detail").find('p').each(function() { 
       for (var count = 0; count < respData.length; count++) { 
       var findCheckedFact = respData[count]["text"]; 
       var str = $(this).text(); 
       console.log(str); 
       if (str.indexOf(findCheckedFact) >= 0) { 
        $(this).html(
        $(this).html().replace(findCheckedFact, "<span class='red'> $& </span>") 
     ); 
     } 
     } 
    }); 
     }, 
     error: function(err){ 
      console.log(JSON.stringify(err)); 
     } 
    }); 
}

respData eine Liste ist wie folgt:

[{"text":"test" , "type":"example" ,"_id": {"$oid": "570e686951d720724aa06fe7"}} ,{"text":"test" , "type":"example", "_id": {"$oid": "570e686951d720724aa06fe8"}} ]

Wenn ich debuggen es alles gut geht, außer wenn es um den Absätzen kommt, es geht nicht hinein, Was kann der Grund sein? Auf Manifest js habe ich bereits Berechtigungen für die ausgewählte URL hinzugefügt, für die ich diese Änderungen vornehmen möchte. Bitte helfen Sie mir

Edit: Code oben ist in checker.js. Hier sind ein paar Code von meinem manifest.json, http://*www.mydomain.rs/ ist meine gewünschte Domäne, wo ich diese Änderungen vornehmen möchte.

"background": { 
    "persistent": false, 
    "scripts": [ 
     "js/jquery-1.12.0.min.js", 
     "background.js", 
     "checker.js" 
    ], 
    "css": ["custom-css.css"] 
    }, 
    "permissions": [ 
    "notifications", 
    "contextMenus", 
    "storage", 
    "tabs", 
    "http://*www.mydomain.rs/" 
    ],

Webseite Code wie folgt aussieht etwas:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="trunk"> 
    <div id="main"> 
     <div id="lead"> Lorem Ipsum is simply dummy text </div> 
     <div id="detail" class="detail intext" itemprop="articleBody"> 
     <p> What is Lorem Ipsum</p> 
     <p> Why do we use it?</p> 
     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </p> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Quelle

2016-04-14 Anonymous

Wo haben Sie den obigen Code eingegeben? Inhaltsskripte oder Hintergrundseite? Wo ist "führend"? Aktuelle Webseite oder Popup-Seite? Geben Sie weitere Details an, wie Ihr Manifest.json' –

wo ist dein Ajax Anruf? Hast du es in die Hintergrundseite eingefügt? Wenn dies der Fall ist, dann kann es nicht die # # führen, da die Hintergrundseite und die aktuelle Webseite in einem anderen Kontext leben, werden sie eine Nachrichtenübergabe benötigen, um zu kommunizieren. –

@HaibaraAi Ich habe meine Frage bearbeitet, Lead und Detail Divs sind innerhalb der Seite, die im Browser geladen ist. Ich füge auch etwas Code von meinem manifest.json hinzu. –

Ihre Ajax-Aufruf im Hintergrund Seite ist, kann sie nicht direkt auf das DOM der aktuellen Seite zugreifen, weil sie in verschiedenen leben Kontext und würde Message Passing miteinander kommunizieren müssen.

Verfügbare Verfahren wäre:

Verwendung Content Scripts. Sie können ein Inhaltsskript auf der aktuellen Seite einfügen, wenn ein AJAX-Aufruf von der Hintergrundseite zurückgegeben wird, können Sie die zurückgegebenen Informationen an Inhaltsskripts übergeben und dann den DOM-Vorgang in Inhaltsskripten ausführen. In Anbetracht Ihrer Logik möchten Sie möglicherweise auch eine Antwort vom Inhaltsskript an die Hintergrundseite senden.

Verwenden Sie Programming Injection. Sie könnten den DOM-Operationscode in ein Skript oder einige Codeblöcke einbinden und dann von der Hintergrundseite aus einlesen.

chrome.tabs.executeScript(tabId, {"code": "//Your DOM operation code here"}, function(result) { 
    // Your logic to handle returned value 
}); 

chrome.tabs.executeScript(tabId, {file: "xxx.js"}, function(result) { 
    // Your logic to handle returned value 
});

-Code-Schnipsel würde wie folgt aussehen:

function retrieveBlicCheckedFacts(tabUrl){ 
    var data = {currentUrl: tabUrl}; 
    $.support.cors = true; 
    $.ajax({ 
     type: "POST", 
     url: API_URL_FIND, 
     crossDomain: true, 
     data: JSON.stringify(data), 
     contentType: "application/json", 
     success: function(respData){ 
      console.log(respData); //here data are printed correctly 
      chrome.tabs.executeScript({file: "js/jquery-1.12.0.min.js"}, function() { 
       chrome.tabs.executeScript({"code": 
        '(function(respData){' 
         +'$("#lead, #detail").find("p").each(function() {' 
          +'for (var count = 0; count < respData.length; count++) {' 
           +'var findCheckedFact = respData[count]["text"];' 
           +'var str = $(this).text();' 
           +'console.log(str);' 
           +'if (str.indexOf(findCheckedFact) >= 0) {' 
            +'$(this).html($(this).html().replace(findCheckedFact, "<span class=\'red\'> $& </span>"));' 
           +'}' 
          +'}' 
         +'});' 
        +'}(' + JSON.stringify(respData) + '));' 
       }); 
      }); 
     }, 
     error: function(err){ 
      console.log(JSON.stringify(err)); 
     } 
    }); 
}

nicht js/jquery-1.12.0.min.js zu web_accessible_resources Abschnitt

manifest.json

"background": { 
    "persistent": false, 
    "scripts": [ 
     "js/jquery-1.12.0.min.js", 
     "background.js", 
     "checker.js" 
    ], 
    "css": ["custom-css.css"] 
}, 
"permissions": [ 
    "notifications", 
    "contextMenus", 
    "storage", 
    "tabs", 
    "http://*www.mydomain.rs/" 
], 
"web_accessible_resources": ["js/jquery-1.12.0.min.js"]

Verschieben Sie alle diese Logik hinzufügen Vergessen Sie Inhaltsskript Wenn Sie auf diese Weise arbeiten möchten, sind Sie möglicherweise durch SOP eingeschränkt. Ihre Inhaltsskripts würden nicht die richtigen Informationen erhalten, wenn Sie CORS nicht auf Ihrer Server-Seite aktivieren.

Quelle

2016-04-14 09:02:50

Vielen Dank für Ihre Antwort. Auch dass ich momentan nicht sicher bin, was ich zu tun habe, in Teil 2. –

@Egjupss, bearbeitet, ich habe den Code nicht verifiziert aber die Grundidee wäre die gleiche, du könntest einfach deine DOM-Logik einpacken und dann injizieren. –

Ich habe versucht, dass mit dieser Methode gibt es einen anderen Fehler chrome.tabs.executeScript, auch ich habe manifest.json geändert, aber es ist immer noch nicht in der Lage p in divs –

Chrome Erweiterung läuft nicht in divs jquery Code

Antwort

Verwandte Themen