10

ページを接続して、現在のタブのテキストを検索および強調表示するにはどうすればよいですか?

現在私は持っています：

  • manifest.jsonは content/backgr/event ページを定義して重要なことを行ったり、コードを自動挿入したりしますか?
  • popup.htmlは基本的に、search.js で使用される検索入力用のシェルです。
  • search.jsこれは background/event/content/popup.html ページにあるべきですか?

読んだ後もまだ理解できないこと：

コンテンツ ページと背景/イベント ページとは何ですか?

注入されたものに対して常に実行されていることは知っていますが、それはクロム拡張マニュアルから得たものと同じです。たとえば、コンテンツスクリプト/ページが popup.html から分離されているかどうか、および a popup.html のスクリプト vs コンテンツ ページ/スクリプトです。

私が知っていること：

ページ上のテキストを検索し、JS を使用してテキストを置換または変更する方法を知っています。

Chrome 拡張機能のメッセージング API について調べる必要があります。

メッセージング API の使用方法を知る必要があることはわかっています。ページの検索と強調表示に必要になりますか?

概要：

ウォークスルーや完全な回答は必要ありません.Chrome拡張機能がどのように機能するかを視覚化するための少しの助け、または少なくともページインタラクションIEに関連してどのように設定する必要がありますか:

挿入された search.js コンテンツ ページ >>>>> popup.html

そして、クロム拡張機能で注入がどのように機能するかについての簡単な説明(IE、注入するのはmanifest.jsonのコンテンツページであることを指定するだけですか、それともさらに作業があります)/予想される動作?

マニュアルを読んでいるときに、ごちゃごちゃした考え/質問/私の質問に関連するものを見逃している可能性があることをお詫びします。

4

2 に答える 2

13

各種類のページ/スクリプトの目的をより明確にすることから始めます。

まず、background page/scriptです。background script拡張機能が存在する場所です。必須ではありませんが、ほとんどの拡張機能を実行するために必要です。その中で、やりたいことに応じて、さまざまなイベントリスナーなどを設定できます。独自の小さな世界に存在し、API を使用して他のページやスクリプトとのみ対話できますchrome.*。イベント ページとして設定した場合、使用されていないときにアンロードされ、何かを行うときにメモリにロードされることを除いて、まったく同じように機能します。

Content scripts注入された Javascript および/または CSS を参照してください。これらは、Web ページとの対話に使用される主要なツールです。API へのアクセスは非常に制限されてchrome.*いますが、注入先のページの DOM には完全にアクセスできます。すぐにそれらの使用に戻ります。

今すぐPopup pages。と とは異なりbackground script、content scriptポップアップには と の両方の部分がHTMLあります。JSパーツは他のHTMLページと同じように小さく、アイコンからオーバーレイ ポップアップとして表示されます。ただし、そのスクリプト部分は、ポップアップが閉じられるたびにアンロードされることを除いて、バックグラウンド ページが行うすべてのことを行うことができます。

違いがより明確になったので、やりたいことに移りましょう。ポップアップを開いて、現在のタブで検索するテキストをユーザーに入力させ、ページ上のそのテキストを強調表示したいようです。テキストをどのようにハイライトするかはすでにわかっているとおっしゃっていたので、その部分はお任せします。

最初にマニフェスト ファイルを設定します。この特定のアクションでは、バックグラウンド スクリプトは必要ありません。必要なのは、"tabs"と"activeTab"パーミッションの両方です。これらにより、後でスクリプトを挿入できます。また、ポップアップでブラウザ アクションを定義する必要があります。全体として、次のようになります。

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html" 
},
"permissions": [
  "tabs", "activeTab"
]

このpopup.htmlファイルでは、マークアップと css のみを使用でき、インライン コードはまったく使用できません。すべてをjsファイルに入れて含めます。このようなものが動作するはずです:

<!DOCTYPE html> 
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <input type="text" id="searchText">
    <button id="searchButton">Search</button>
  </body>
</html>

ここで、コンテンツ スクリプトの話に戻ります。コンテンツ スクリプトを挿入するには 2 つの方法があります。1 つ目は、マニフェストで定義する方法です。これは、特定の URL のセットに対して常に注入したい場合に最適です。次に、chrome.tabs.executeScript必要なときにメソッドを使用して注入します。それが私たちが使うものです。

window.onload = function(){
  document.getElementById('searchButton').onclick = searchText;
};
function searchText(){
  var search = document.getElementById('searchText').value;
  if(search){
    chrome.tabs.query({active:true,currentWindow:true},function(tabs){
      chrome.tabs.executeScript(tabs[0].id,{file:search.js});
      chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search});
    });
  }
}

これで、スクリプトの挿入に成功し、検索テキストをそのスクリプトに送信しました。スクリプトが次のonMessageようにリスナーにラップされていることを確認してください。

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  // message.searchText is the text that was captured in the popup    
  // Search/Highlight code goes here
});

そして、それはほとんどそれを要約しています。これで、それを機能させることができるはずです。それでも不明な点がある場合はお知らせください。修正します。

于 2013-05-30T05:06:29.323 に答える