Home　> ［Firefox］ > 現在のページ

Firefox機能拡張のポップアップとコンテンツスクリプトについて

投稿日：2015年7月25日
  • 4
  • 0

ポップアップ表示を通してアドオンスクリプトとコンテンツスクリプトを学ぶ

firefox-add-on_3

「Firefox機能拡張の解説」第3弾。

この投稿ではpanelモジュールを利用してポップアップする機能拡張を作成します。

その流れで、アドオンスクリプトとコンテンツスクリプトの違いも解説します。少し混乱しやすい部分なので、イラストと実際の動作例を紹介しつつ解説します。

このページの目次

ポップアップを表示する

今回はポップアップを表示するためにpanelモジュールを使います。

index.js

var data = require("sdk/self").data;

var panelEntry = require("sdk/panel").Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

require("sdk/ui/button/action").ActionButton({
	id: "show-panel",
	label: "Show Panel",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onClick: handleClick
});

function handleClick(state) {
	panelEntry.show();
}

1行目、require(“sdk/self”).dataで機能拡張のdataフォルダを参照します。selfは機能拡張自身に関する情報を得るためのモジュールです。

selfの公式ドキュメント

参照するディレクトリが複数ある場合は、以下のように定義しておくと流用できます。

// selfには機能拡張のディレクトリが入っている（uri: "addon:@toolbaraddon"のような感じで）
var self = require("sdk/self"); 

self.data.url() // dataディレクトリを参照
self.img.url() // imgディレクトリを参照

3行目、panelモジュールの読み込みと定義を同時にしている例です。
ただ省略して書いているだけで、以下のように書いても同じです。

var panels = require("sdk/panel");

var panelEntry = panels.Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

panelモジュールの詳細は公式ページを見てもらうとして、簡単に解説します。

panelモジュールの公式ページ

contentURLはポップアップで表示するhtmlファイルを指定します。

contentScriptFileは後で詳しく解説しますが、上記のhtmlファイルと同時に実行されるJavaScriptファイルです。

19行目～21行目、定義したpanelをshow()で表示します。

popup.html

とりあえず理解しやすくするために今回はh1でテキストを表示するだけにします。

<html>
<head>
</head>
<body>
<h1 id="title">テキスト表示するよ</h1>
</body>
</html>

content-script.js

今回はコンソールにログを流すだけにします。

console.log("hoge");

機能拡張の実行

機能拡張のフォルダで実行します。

$ jpm watchpost --post-url http://localhost:8888/

ブラウザを起動してツールバーボタンをクリックするとパネルが現れます。

firefox-add-on13

またCtrl + Shift + Jでブラウザコンソールを開いて「hoge」が表示されていることも確認してください。

firefox-add-on14

コンテンツスクリプトについて

panelモジュール定義の際、popup.htmlとcontent-script.jsを以下のように指定しました。

var text_entry = panels.Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

「popup.html」内でJavaScriptを読み込んで実行することもできるのですが、あえてcontentScriptFileで「content-script.js」を追加しているのには理由があります。

これからFirefoxの機能拡張を作る上で重要になるため、アドオンスクリプトと、コンテンツスクリプトの特徴を説明します。

アドオンスクリプトとコンテンツスクリプトの特徴

公式の解説ページがありますが、いまいちわかりにくいのでイラストを加えて補足解説します。
後で実際に動作テストをするので最初はざっと把握しておいてください。

コンテンツスクリプトについての解説

アドオンスクリプトの特徴

今までの解説の通り、アドオンスクリプトはSDKモジュールを利用してFirefoxの様々な機能を追加・変更することができる。
しかし、アドオンスクリプトは直接Webコンテンツにアクセスすることはできない。

Webコンテンツにアクセスするにはtabs APIのactiveTab.attachなどを使う。

firefox-add-on15

その他、WebコンテンツにアクセスすることができるAPIはpage-mod、tabs、page-worker、context-menuなどがある。

コンテンツスクリプトの特徴

コンテンツスクリプトは今回利用したpanelモジュールのように、SDKモジュールで指定する。

コンテンツスクリプトではSDKモジュールを使えない。（グローバルオブジェクトにアクセスするためのrequireを使うことができない）

panel APIのcontentURLを利用して指定したhtmlファイルにアクセスするには、同じpanel APIで指定したコンテンツスクリプトのみ、直接アクセスできる。

firefox-add-on16

コンテンツスクリプトは「contentScript」とすることで、文字列として記述することができるが、記述ミスが起こりやすいので「contentScriptFile」で外部ファイルを取り込むのが推奨されている。
※過去のバージョンではdataフォルダに配置するのが一般的だったが、JPMではdataフォルダは作成されなくなった。

Ajaxを使う上での注意

panel APIのcontentURLや、sidebar APIのurlで指定するhtmlファイルからはクロスオリジン対策でAjaxを使った外部との通信はできない。
そのためAjax等はアドオンスクリプトか、ひも付けされたコンテンツスクリプトで行う。

firefox-add-on17

ドオンスクリプトとコンテンツスクリプトの通信

アドオンスクリプトとコンテンツスクリプトはportオブジェクトを使って通信を行う。SDK APIを使って取得したデータをコンテンツスクリプトで使いたい場合はport.emitを使って送信する。
逆にコンテンツスクリプトからWebページのデータを受け取りたいといった場合はport.onを使う。
アドオンスクリプトとコンテンツスクリプトどちらも同じ仕組でデータを送受信できる。

firefox-add-on18

この説明を読んだだけで理解できる人は稀だと思いますｗ
解説だけではわかりにくいと思うので、実際に動作確認をします。

コンテンツスクリプトでWebコンテンツを変更する

コンテンツスクリプトでWebコンテンツを操作してみます。

今回は短いコードなのでcontentScriptStringを利用しましたが、ミスの元なので実際にはcontentScriptFileを利用してください。

index.js

var tabs = require("sdk/tabs");
var contentScriptString = 'document.body.innerHTML = "<h1>コンテンツスクリプトで置き換えたよ</h1>";'

tabs.activeTab.attach({
	contentScript: contentScriptString
});

変更したら機能拡張を実行してください。

firefox-add-on19

無事にWebコンテンツが置き換えられていることがわかります。

例えば今回使用した以下のコードをアドオンスクリプトであるindex.jsに記述してもWebコンテンツに直接アクセスできないため何も実行されません。

document.body.innerHTML = "<h1>コンテンツスクリプトで置き換えたよ</h1>";

panel APIで指定したhtmlファイルをコンテンツスクリプトで変更する

基本ポップアップを表示した時と同じです。

index.js

var data = require("sdk/self").data;

var panelEntry = require("sdk/panel").Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

require("sdk/ui/button/action").ActionButton({
	id: "show-panel",
	label: "Show Panel",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onClick: handleClick
});

function handleClick(state) {
	panelEntry.show();
}

popup.html

<html>
<head>
</head>
<body>
<h1 id="title">テキスト表示するよ</h1>
</body>
</html>

content-script.js

今回はコンテンツスクリプトでDOM要素を変更してみます。

document.body.innerHTML = "<h1>コンテンツスクリプトで置き換えたよ</h1>";

ツールバーボタンをクリックしてポップアップを表示してみてください。
以下の画像のように「コンテンツスクリプトで置き換えたよ」に変更されたパネルが表示されると思います。

firefox-add-on20

このように、一口にコンテンツスクリプトと言っても、Webコンテンツを操作するものと、panelなどSDK APIで指定したhtmlファイルを操作するものがあります。
混同しがちなので、どちらを利用しているか意識して使い分けてください。

message-passingを利用する

アドオンスクリプトからコンテンツスクリプトへportオブジェクトを使ってメッセージを送信してみます。

アドオンスクリプトからコンテンツスクリプトへメッセージを送信する。

index.js

tabs APIを利用してタイトルを取得。
アクションボタンのクリックイベントであるhandleClick内で、panelEntryに対してport.emitを利用してtabTitleという名前のメッセージを送信します。

var data = require("sdk/self").data;
var tabs = require("sdk/tabs");

var panelEntry = require("sdk/panel").Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

require("sdk/ui/button/action").ActionButton({
	id: "show-panel",
	label: "Show Panel",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onClick: handleClick
});

function handleClick() {
	var tabTitle = tabs.activeTab.title;
	panelEntry.port.emit("tabTitle", tabTitle);

	panelEntry.show();
}

popup.html

<html>
<head>
</head>
<body>
<h1 id="title">テキスト表示するよ</h1>
</body>
</html>

content-script.js

index.jsから送信されたメッセージを受け取りますが、このときに「self」を使います。portオブジェクトのonメソッドを使ってtabTitleという名前のメッセージを受け取ります。
そのままコールバック関数で受け取ったメッセージをh1で表示しています。

self.port.on("tabTitle", function (message) {
	document.body.innerHTML = "<h1>" + message + "</h1>";
});

ツールバーボタンをクリックしてポップアップを表示してみてください。
以下の画像はGoogleのトップ画面の例。タイトルである「Google」と表示されています。

firefox-add-on21

コンテンツスクリプトからアドオンスクリプトへメッセージを送信する

今度は反対にコンテンツスクリプトからアドオンスクリプトへメッセージを送信してみます。

index.js

panelEntry.port.onでコンテンツスクリプトからのメッセージを待ち受けます。
メッセージの内容をコンソールログに流します。

var data = require("sdk/self").data;

var panelEntry = require("sdk/panel").Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: data.url("content-script.js")
});

require("sdk/ui/button/action").ActionButton({
	id: "show-panel",
	label: "Show Panel",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onClick: handleClick
});

function handleClick() {
	panelEntry.show();
}

panelEntry.port.on("popupTitle", function (message) {
	console.log(message);
});

popup.html

<html>
<head>
</head>
<body>
<h1 id="title">テキスト表示するよ</h1>
</body>
</html>

content-script.js

popup.htmlのIDがtitleの文字列を取得して、self.port.emitを利用してpopupTitleという名前でアドオンスクリプトに送信します。

var popupTitle = document.getElementById("title").innerHTML;
self.port.emit("popupTitle", popupTitle);

機能拡張を読み込むとpopup.htmlのh1である「テキスト表示するよ」がコンソールログに流れます。

firefox-add-on22

これでアドオンスクリプトと、コンテンツスクリプトの双方向の通信ができたことになります。
今回は単純な文字列を渡しただけですが、配列やオブジェクトも渡せます。以下のようにして試してみてください。

var popupTitle = ["hoge", "hoge"]; // 配列
var popupTitle = {hoge:"hoge", huga:"hoge"}; // オブジェクト

コンテンツスクリプトでAjax通信をしてみる

Ajaxで通信するにはマニフェストファイルにパーミッションを指定する必要があります。

{
  "title": "Toolbar Addon",
  "name": "toolbaraddon",
  "version": "0.0.1",
  "description": "ツールバーをテストするAdd-on",
  "main": "index.js",
  "author": "Oxy",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "permissions": {
    "cross-domain-content": ["https://www.google.co.jp/"]
  }
}

index.js

Ajaxを素で書くのが面倒なので「jQueryをダウロード」してdataフォルダに保存し利用します。

また、panelのサイズがデフォルトだと小さくてわかりにくいので、サイズを指定して広げています。

var data = require("sdk/self").data;

var panelEntry = require("sdk/panel").Panel({
	contentURL: data.url("popup.html"),
	contentScriptFile: [
		data.url("jquery-2.1.3.min.js"),
		data.url("content-script.js")
	],
	width: 600,
	height: 400
});

require("sdk/ui/button/action").ActionButton({
	id: "show-panel",
	label: "Show Panel",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onClick: handleClick
});

function handleClick() {
	panelEntry.show();
}

popup.html

わかりやすくするためにcontというdivを作成。

<html>
<head>
</head>
<body>
<div id="cont"></div>
</body>
</html>

content-script.js

AjaxでGoogleのデータを読み込んで、popup.htmlのIDがcontの要素を書き換えています。jQueryを読み込んでいるので簡単に書けます。

$.ajax({
	url: "https://www.google.co.jp/",
	dataType: "html",
	method: "GET",
	cache: false,

	// 成功時の処理
	success: function(data, textStatus){
		$("#cont").html(data);
	},

	// エラー時の処理
	error: function(xhr, textStatus, error){
		console.log(error);
	},
});

ツールバーボタンをクリックしてpanelを表示します。
goolgeのトップ画面のhtmlが表示されています。

firefox-add-on23

これはあくまでサンプルなので実際の検索はできませんが、Ajaxを利用できるということは理解していただけたと思います。
実装する場合はボタンイベントをハンドリングしてGoogleにPostすれば動作します。

またAjaxするには専用のRequest APIを利用する方法もあります。
ただ、このAPIはAjaxでできることを書き換えているだけで、あまりメリットはありません。簡単な通信をサクッと書きたいといった用途以外で利用することは無いと思います。

Request APIの解説ページ


マニフェストファイルでパーミッションに指定したサイト以外で通信を行うと以下のエラーが出ます。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://google.co.jp/?_=1437292519043 にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダ 'Access-Control-Allow-Origin' が足りない)。

以上でポップアップ表示と、アドオンスクリプトとコンテンツスクリプトの特徴について解説しました。
この辺がはまりやすいポイントで、ここさ理解できれば、後はAPIとオプションの組み合わせだけです。

次のページは「Firefoxの機能拡張で外部モジュールを利用してメニューアイテムを追加する方法」です。

現在のページを共有する


現在のページに関連する記事

Firefox機能拡張のポップアップとコンテンツスクリプトについて Firefox機能拡張でツールバーボタンを作成する方法
Firefox機能拡張のポップアップとコンテンツスクリプトについて Chromeの機能拡張を作成して、ブラウザで読み込み、デバックする方法
Firefox機能拡張のポップアップとコンテンツスクリプトについて Firefox機能拡張のコンテキストメニューについて
Firefox機能拡張のポップアップとコンテンツスクリプトについて Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する
Firefox機能拡張のポップアップとコンテンツスクリプトについて Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
Firefox機能拡張のポップアップとコンテンツスクリプトについて Firefoxの機能拡張で外部モジュールを利用してメニューアイテムを追加する方法
Firefox機能拡張のポップアップとコンテンツスクリプトについて PukiWikiでlazysizesを利用して画像の遅延読み込みを導入する

おすすめの記事

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり！

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…
今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…
WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…
NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう
Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方
ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…
Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ
Question2AnswerへreCAPTCHAを導入する方法

Question2AnswerへreCAPTCHAを導入する方法

いただいたコメントなど

  1. 匿名 のコメント:
    2017年3月19日 4:50 PM

    動かない。
    JPM [error] Message: SyntaxError: illegal character

    $(#cont).html(data);
    を
    $(“#cont”).html(data);
    にしたら動いた。
    jqueryはjquery-3.2.0.js。

    返信
    • oxy のコメント:
      2017年3月19日 7:21 PM

      コメントありがとうございます。
      ご指摘の通りHTML要素なので”で囲む必要がありました。
      以前のバージョンでは動作していましたが、正しい記述方法ではありませんでした。
      記事の記述を修正しました。

匿名 へ返信する コメントをキャンセル

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。