onclickによるページ要素の表示について

219 views
Skip to first unread message

Sakaduki

unread,
Jul 21, 2010, 3:14:09 AM7/21/10
to Chromium-Extensions-Japan
はじめましてSakadukiと申します。
最近Extentionsをつくり始めたのですが一つ質問をさせてください。

何らかのページにおけるdiv("hoge")という要素をExtentionsアイコンをクリックしたときに
アラート表示するにはどうすれば良いのでしょうか。Googleのチュートリアルは一通り試して
見たのですが、イマイチ理解が進んでいません。

content_scriptsを用いてページが読み込まれた際に、div("hoge")の要素をアラートする
プログラムは書けているのですが、これがExtentionのアイコンをクリックしたタイミングで
表示する際に、そのdocument要素がどのように渡されているのか、もしくは渡すのか、
お教えください。

質問が曖昧なため、何か例となるExtentionがあるならそれを列挙して頂けるだけでも幸いです。
宜しくお願い致します。

Ohta Shogo

unread,
Jul 21, 2010, 9:26:09 AM7/21/10
to Chromium-Extensions-Japan
Sakadukiさん、こんにちは。

>Extentionのアイコンをクリックしたタイミング
ということですと、こちらのケースがちょうど当てはまるかなと思います。
http://code.google.com/chrome/extensions/content_scripts.html#pi

要点は、
・background pageでchrome.browserAction.onClicked.addListenerを使ってアイコンのクリッ
クイベントを拾う
・chrome.tabs.executeScriptでContentScriptを実行
・ただし、executeScriptにはmanifest.jsonでpermissionsを指定する必要がある
といったところです。
細かいところでは、executeScriptをフレーム内でも実行するかどうかとか、
http://code.google.com/chrome/extensions/tabs.html#method-executeScript

ちなみに、executeScriptを使う場合、manifest.jsonで定義するcontent_scriptsはなくてもOKです。
content_scriptsで先に実行しておけばレスポンスを良く出来る面もありますし、逆にexecuteScriptだけにすれば無駄な処理を
なくすことができます。

Sakaduki

unread,
Jul 21, 2010, 2:02:20 PM7/21/10
to Chromium-Extensions-Japan
Ohtaさん、はじめまして。
回答ありがとうございます。

下記のように実行することで、質問内容を実現することができました。
chrome.tabs.executeScript(tabId, {file:"lib/hoge.js"});

ところでこの方法ではhoge.jsで作成した何らかの変数(質問の例でいうとdiv("hoge")要素)を
background pageから参照することはできないのでしょうか?

下記のようにコールバックがreturnで変数を受け取れるかと思いましたが、そのような機能は
ないようですね。
chrome.tabs.executeScript(tabId, {file:"lib/hoge.js"}, function(data)
{alert(data)});

このような場合、どのように解決するのが宜しいのでしょうか。ヒントでもくださると幸いです。
連投となりますが、どうぞ宜しくお願い致します。

Sakaduki

unread,
Jul 21, 2010, 11:41:52 PM7/21/10
to Chromium-Extensions-Japan
連投申し訳ありません。自己解決しました。
コネクションを張ってメッセージのリスナを登録しておくことでデータのやり取りが行えるのですね。
もう少し公式ドキュメントを読み解こうと思います。ありがとうございました。

■コンテントスクリプト
var connection = chrome.extension.connect();
connection.onMessage.addListener(function(info, con){
console.log(info, con);
});
connection.postMessage({data:"post data"});

■background ページ
chrome.self.onConnect.addListener(function(port,name) {
port.onMessage.addListener(function(info,con){
var data = info["data"];
alert(data);
});
});
Reply all
Reply to author
Forward
0 new messages