みちのいに!!

自分のメモと、他にもハマる人がいそうなことを書く

firefoxのアドオンつくりたい 1

つくりたいなーって思った


https://developer.mozilla.org/en-US/Add-ons/SDK
Windowsです ほんとはmingw+msys2でやりたかったけど、なんかnode.jsのバージョン古いしnvmも上手く動かないので、WindowsにNodistな感じで。

Install

Node.js

頑張っていれてください 割愛。
私はWindowsなのでNodistを使ってます。

jpm

昔はcfxだったみたいですね。ゆとりなのでよくわかりませんが、今はjpmを使うみたいです。

npm i jpm -g

Hello,World

とりあえずなんかしよう
Getting Started (jpm) - Mozilla | MDN

npm init

なんかいろいろきかれる

title: (My Jetpack Addon) helloWorld
helloWorld
name: (hello)
version: (0.0.1)
description: (A basic add-on)
entry point: (index.js)
author: m77
engines (comma separated): (firefox,fennec) firefox
license: (MIT)

enginesってのだけよくわからなかったけど、 package.json - Mozilla | MDN らしい。

チュートリアルにはこんなコードがある。ボタンをツールバーに追加して、押すと新しいタブを開いてジャンプする。

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("http://www.mozilla.org/");
}

これをindex.jsにコピペして、dataフォルダにicon-??.pngを保存していれて

jpm run

すると、なんかMozillaジャンプボタンができてる。
こうしてこの世界でのHello world的ななにかは成功した。

Create XPI

リリースする時は、

jpm xpi

すればXPIファイルができる。