Geek Answers Handbook

Chrome extension does not work search in divs jquery code

On a chrome extension, after making an ajax call, it should look inside the paragraphs on the div with id #lead and #detail. If he finds the text to add the css class.

My code is as follows:

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 is a list:

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

When I debug, everything goes well, except when it comes to paragraphs, it does not go inside, what could be the reason? In the js manifest, I am already adding permissions for the selected URL that I want to make these changes. Please help me

Edit: The code above is in checker.js. Here is the code from my manifest.json , http://*www.mydomain.rs/this is my desired domain where I want to make these changes.

  "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/"
  ],

The webpage code looks something like this:

<!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 standard dummy text.  </p>
      </div>
    </div>
  </div>
</body>
</html>
+4
1

- , DOM , Message Passing, .

:

  • . script , ajax- , , DOM . , script .

  • . DOM script , .

    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
});

    :

    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));
        }
   });
}

    js/jquery-1.12.0.min.js web_accessible_resources

    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"]

  • script. , SOP, , CORS .

+1

More articles:


All Articles