クロムエクステンションを実行していないdiv内の検索jquery code

ajaxコールを実行した後のchrome拡張機能では、id #leadと#detailを持つdivの段落内を検索する必要があります。 cssクラスを追加するテキストが見つかった場合。クロムエクステンションを実行していないdiv内の検索jquery code

私のコードは次のようになります。

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です。 私のマニフェストのコードはです。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/" 
    ],

Webページのコードのようなものになります。あなたのAJAX呼び出しが背景ページにある、彼らは別のに住んでいるので、それが直接、現在のページのDOMにアクセスすることはできません

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

出典

2016-04-14 Anonymous

上記のコードはどこに貼り付けましたか？コンテンツスクリプトまたは背景ページ？ '＃lead'はどこですか？現在のWebページまたはポップアップページ？あなたの 'マニフェストのように詳細を提供してください。json' –

あなたのajaxコールはどこですか？あなたはバックグラウンドページに入れましたか？そうであれば、バックグラウンドページと現在のウェブページは異なるコンテキストで生きているので、 '＃lead'を得ることはできません。コミュニケーションのためにメッセージを渡す必要があります。 –

@HaibaraAi私は自分の質問を編集しました。鉛と詳細のdivは、ブラウザに読み込まれたページの中にあります。私はまた、私のマニフェストからいくつかのコードを追加します。 –

を互いに通信するには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.jsweb_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"]

移動し、すべてこのロジックを追加することを忘れないでください。コンテンツスクリプト。この方法を使用する場合は、サーバ側でCORSを有効にしないと、SOPによって制限されている可能性があります。コンテンツスクリプトで正しい情報が返されません。

出典

2016-04-14 09:02:50

あなたの答えに感謝します。でも、私は現在、パート2で何をしなければならないのか分かりません。 –

@Egjupss編集しましたが、コードは検証されていませんが、基本的な考え方は同じです。 –

私はこのメソッドを使用して、別のarror chrome.tabs.executeScriptを作成しましたが、manifest.jsonを変更しましたが、まだdiv内のpを見つけることができませんでした –

クロムエクステンションを実行していないdiv内の検索jquery code

答えて

関連する問題