takedajs ログ

備考録

macでFirefoxのアドオン開発環境を構築する

メインブラウザはFirefoxを利用しています。自分が欲しいと思った機能があるFirefoxのアドオンがなかったので、作成していきます。 今回は、アドオンの開発環境構築までを書きました。

Firefoxのアドオンについて

アドオンの種類

アドオンには以下3つがありますが、今回は拡張機能を作っていきます。

  • 拡張機能
  • テーマ
  • プラグイン

開発方法

最新の開発方法として、複数ブラウザで動作するWebExtensionを用いた方法がありますが、 参考になる記事が少なかったため、一つ前のjpmを利用した開発方法で行います。

開発環境構築

npm導入

npmでjpmをインストールするため、Node.jsを導入します。 Node.jsのバージョン管理ツールであるnodeBrewを利用します。 Node.jsが既に導入されている方は、こちらは飛ばしてください。

nodebrew導入

$ wget git.io/nodebrew
$ perl nodebrew setup
$ $export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bashrc

nodebrew導入確認

$ nodebrew help

Node.jsの安定版(stable)バージョンをインストール

$ nodebrew install-binary stable

インストール確認

$ nodebrew ls
v7.7.4
current: none

利用バージョン選択

$ nodebrew use v7.7.4
use v7.7.4

Node.js導入確認

$ node -v
v7.7.4

npm導入確認

$ npm -v
4.1.2

jpm導入

$ npm install jpm -g

開発準備

任意の場所に作業ディレクトリを作成

$ mkdir test_addon
$ cd test_addon

ディレクトリの初期化
色々と質問されますが、今回はサンプルなので適当に記述します。

$ jpm init
title: (My Jetpack Addon) test_addon
name: (testaddon) test_addon
version: (0.0.1)
description: (A basic add-on) test_addon
entry point: (index.js)
author: takedajs
engines (comma separated): (firefox,fennec)
license: (MIT)
JPM [info] About to write to /Users/shoheitakeda/workspace/src/test_addon/package.json:

{
  "title": "test_addon",
  "name": "testaddon",
  "version": "0.0.1",
  "description": "test_addon",
  "main": "index.js",
  "author": "takedajs",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "keywords": [
    "jetpack"
  ]
}

Is this ok? (yes) yes

ディレクトリ配下に以下のようなファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
└── test
    └── test-index.js

Firefoxにアドオンを導入

アドオンのパッケージ化

$ jpm xpi

パッケージ化すると、xpi拡張子のファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
├── test
│   └── test-index.js
└── testaddon.xpi

アドオン導入確認
作成した拡張機能だけが導入されたFirefoxが立ち上がります。

$ jpm run

立ち上がったFirefoxのアドオンマネージャーを見てみると、アドオンが一覧に表示されています。 ですが、アドオンが検証できず利用できませんとアラートが出ています。 Mozillaに申請して許可が下りないと開発段階であってもFirefoxに導入できないみたいです。(マジで?笑)

f:id:takedajs:20170326091343p:plain

ですが、諦めるのはまだ早く、なんとか導入する方法があります。 以下、導入の流れを書いていきます。

歯車をクリックしてアドオンをデバッグを選択

f:id:takedajs:20170326091423p:plain

開発ツールデバッガー画面が表示されます。

f:id:takedajs:20170326091503p:plain

「一時的なアドオンを読み込みむ」をクリックして、先程 $ jpm xpi コマンドで作成したアドオンのパッケージ(xpi拡張子)を読み込みます。

f:id:takedajs:20170326091531p:plain

読み込むと作成したアドオンが一覧に追加されています。

f:id:takedajs:20170326091606p:plain

拡張機能一覧画面に戻ると先程出ていたアラートが消えて、導入されていることが分かります。

f:id:takedajs:20170326091631p:plain

申請をしなくても開発段階のアドオンを導入することができました。(良かったー。) これで開発中のデバックをすることができますが、修正を加える度に毎回パッケージ化して ファイルを読み込まないといけないので、かなり面倒ですね。

まとめ

アドオン開発が初めてで何も分からない状態から始めましたが、開発環境ができたのでなんとか開発していけそうです。 次は、公式ページに載っているチュートリアルの参考にして、簡単なサンプルを作ってアドオン開発の理解を深めて行きたいと思います。 自分が欲しいと思った物を作っていくのはやはり楽しいですね。

参考

http://oxynotes.com/?p=9070

MacにNode.js環境を作る(nodebrew)