Question

在执行ajax调用后的chrome扩展名中，它应搜索id为#lead和#detail的div上的段落。如果找到要添加css类的文本。

我的代码如下所示：

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是这样的列表：

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

当我调试它时，一切都很好，除了段落，它不会进入它内部，原因是什么？在清单js上，我已经在我想要进行这些更改的所选URL上添加权限。请帮帮我

编辑：上面的代码位于checker.js。 以下是我的manifest.json 中的一些代码，http://*www.mydomain.rs/是我想要进行这些更改的所需域名。

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

网页代码如下所示：

<!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>

Answer 1

您的ajax调用位于后台页面，它无法直接访问当前页面的DOM，因为它们位于不同的上下文中，需要Message Passing才能相互通信。

可用的方法是：

使用Content Scripts。您可以在当前页面中注入内容脚本，当从后台页面返回ajax调用时，您可以将返回的信息传递给内容脚本，然后在内容脚本中执行DOM操作。考虑到您的逻辑，您可能还希望将内容脚本的响应发送回背景页面。

使用Programming Injection。您可以将DOM操作代码包装在脚本或一些代码块中，然后从后台页面注入它。

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

将所有这些逻辑移至内容脚本。如果您想使用这种方式，可能会被SOP限制，如果您未在服务器端启用CORS，则您的内容脚本无法获得正确的返回信息。

chrome扩展未运行搜索到div jquery代码

1 个答案: