recursal/MDN huggingface dataset:
scale
=====

**`scale`** 属性は、`<feDisplacementMap>` (en-US)フィルタプリミティブにおいて用いられる距離の尺度因子を定義します。その量は、`<filter>` (en-US)要素の`primitiveUnits (en-US)`属性で規定される座標系で表されます。

1 つの要素のみがこの属性を用います: `<feDisplacementMap>` (en-US)
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 480 220" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5"/>
  </filter>
  <filter id="displacementFilter2" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"/>
  </filter>

  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter);""/>
  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter2); transform: translateX(240px);""/>
</svg>
```

使用方法
----

|  |  |
| --- | --- |
| 値 | `<number>` |
| 既定値 | *None* |
| アニメーション可否 | はい |

`<number>`

この値は距離に関する尺度因子をのみを定義します。

この属性の値が`0`の場合は、元画像に対して影響しません。

仕様
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-scale |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
patternUnits
============

**`patternUnits`** 属性は、 `<pattern>` 要素のジオメトリープロパティにどの座標系を使用するかを示します。

この属性は以下の SVG 要素で使用することができます。

* `<pattern>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- すべてのジオメトリープロパティは、現在のユーザー空間からの相対値です。 -->
  <pattern
 id="p1"
 x="12.5"
 y="12.5"
 width="25"
 height="25"
 patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- すべてのジオメトリープロパティは、対象とするバウンディングボックスからの相対値です。 -->
  <pattern
 id="p2"
 x=".125"
 y=".125"
 width=".25"
 height=".25"
 patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
```

pattern
-------

`<pattern>` の場合、 `patternUnits` は要素のジオメトリープロパティ（`x`, `y`, `width (en-US)`, `height (en-US)`）に使用する座標系を定義します。

|  |  |
| --- | --- |
| 値 | `userSpaceOnUse` | `objectBoundingBox` |
| 既定値 | `objectBoundingBox` |
| アニメーション | 可 |

`userSpaceOnUse`

この値は、ジオメトリープロパティのすべての座標が、パターンが適用されたときに定義されたユーザー座標系を参照することを示します。

`objectBoundingBox`

この値は、ジオメトリープロパティのすべての座標が、パターンが適用される要素のバウンディングボックスの分数またはパーセント値を表します。バウンディングボックスは `<pattern>` のコンテンツが "`0 0 1 1`" `viewBox` にバインドされているのと同じと考えることができます。

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternUnitsAttribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
writing-mode
============

**`writing-mode`** 属性は、 `<text>` 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 `writing-mode` 属性は `<text>` 要素にのみ適用されます。 `<tspan>`, `<tref>` (en-US), `<altGlyph>`, `<textPath>` (en-US) サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ `direction (en-US)` および `unicode-bidi (en-US)` により、 `<text>` 要素内で変更される可能性があることに注意してください)。

**メモ:** プレゼンテーション属性なので、 `writing-mode` は CSS プロパティとして使用することができます。詳しくは CSS の `writing-mode` プロパティを参照してください。

プレゼンテーション属性として、どの要素にも適用できますが、 `<altGlyph>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), `<tspan>` の 5 つの要素にのみ効果があります。

使用上の注意
------

|  |  |
| --- | --- |
| 既定値 | `horizontal-tb` |
| 値 | `horizontal-tb` | `vertical-rl` |
 `vertical-lr` |
| アニメーション可能 | はい |

`horizontal-tb`

この値はブロックのフロー方向を上から下に定義します。書字方向と文字の方向は共に水平方向です。

`vertical-rl`

この値はブロックのフロー方向を右から左に定義します。書字方向と文字の方向は共に垂直方向です。

`vertical-lr`

この値はブロックのフロー方向を左から右に定義します。書字方向と文字の方向は共に垂直方向です。

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |
| Scalable Vector Graphics (SVG) 2 # WritingModeProperty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `CSS writing-mode`
cx
==

**`cx`** 属性は中心の x-座標を定義します。

この属性は次の SVG 要素で使用できます。

* `<circle>`
* `<ellipse>`
* `<radialGradient>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

`<circle>`に対して、`cx`は、図形の x-軸の中心を定義します。

|  |  |
| --- | --- |
| 値 | `<length-percentage>` |
| 既定値 | `0` |
| アニメーション | Yes |

**メモ:** SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。

ellipse
-------

`<ellipse>`に対して、`cx`は、図形の x-軸の中心を定義します。

|  |  |
| --- | --- |
| 値 | `<length-percentage>` |
| 既定値 | `0` |
| アニメーション | はい |

**メモ:** SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が楕円への CSS プロパティとしても利用可能であることを意味します。

radialGradient
--------------

`<radialGradient>`に対して、`cx`は、放射状勾配の終端円の x-軸の中心を定義します。

|  |  |
| --- | --- |
| 値 | `<length>` |
| 既定値 | `50%` |
| アニメーション | はい |

### 例
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |

関連情報
----

* cy
* r
共通 (exsl)
=========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

EXSLT 共通パッケージは、 XSLT の機能を拡張する基本的な関数を提供します。共通パッケージの名前空間は `http://exslt.org/common` です。

exsl:node-set()`exsl:node-set()` は結果木の断片からノードセットを返します。これは、変数の値を取得するために select 属性ではなく `xsl:variable` を見たときに得られるものです。これにより、変数内に作成された XML を複数のステップで処理することができます。

exsl:object-type()`exsl:object-type()` は、指定されたオブジェクトの型を示す文字列を返します。

ブラウザーの互換性
---------

{{Compat}}
Math (math)
===========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

EXSLT の Math パッケージは、数値の操作とノードの比較のための機能を提供します。 Math パッケージの名前空間は `http://exslt.org/math` です。

math:highest()`math:highest()` は、指定されたノードセットの最大値（`math:max()` (en-US) を使用して計算した最大値）を持つノードを返します。

math:lowest()`math:lowest()` は、指定されたノードセットの最小値（`math:min()` (en-US) を使用して計算した最小値）を持つノードを返します。

ブラウザーの互換性
---------

{{Compat}}
math:lowest()
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`math:lowest()` は、指定されたノードセットの最小値（`math:min()` (en-US) を使用して計算した最小値）を持つノードを返します。

ノードの文字列値を数値に変換した値が最小値と等しい場合、この最小値を持ちます。

構文
--
```

math:lowest(nodeSet)
```

### 引数

`nodeSet`

最小値を返すノードセット。

### 返値

`math:min()` (en-US) が返すノードのコピーで構成された結果ツリーの断片です。

仕様書
---

EXSLT - MATH:LOWEST
math:highest()
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`math:highest()` は、指定されたノードセットの最大値（`math:max()` (en-US) を使用して計算した最大値）を持つノードを返します。

ノードの文字列値を数値に変換した値が最大値と等しい場合、この最大値を持ちます。

構文
--
```

math:highest(nodeSet)
```

### 引数

`nodeSet`

最大値を持つノードが返されるノードセット

### 返値

`math:max()` (en-US) が返すノードのコピーで構成された結果ツリーの断片です。

仕様書
---

EXSLT - MATH:HIGHEST
exsl:node-set()
===============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`exsl:node-set()` は結果木の断片からノードセットを返します。これは、変数の値を取得するために select 属性ではなく `xsl:variable` を見たときに得られるものです。これにより、変数内に作成された XML を複数のステップで処理することができます。

また、`exsl:node-set()` を使って、文字列をテキストノードにすることができます。

構文
--
```

exsl:node-set(object)
```

### 引数

`object`

対応するノードセットを返す対象となるオブジェクト。

### 返値

指定された `object` に対応するノードセットです。

仕様書
---

EXSLT - EXSL:NODE-SET
exsl:object-type()
==================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`exsl:object-type()` は、指定されたオブジェクトの型を示す文字列を返します。

**メモ:** ほとんどの XSLT オブジェクトの型は、安全に他の型へ自動変換されることがあります。しかし、自動変換によってはエラーを発生させることになります。特に、ノードセットでないものをノードセットとして扱うと、そのようになります。この機能により、名前付きテンプレートや拡張関数の作者は、簡単に引数値に柔軟性を持たせることができます。

構文
--
```

exsl:object-type(object);
```

### 引数

`object`

型が返されるオブジェクト。

### 返値

オブジェクトの型で、以下のいずれかになります。

* `string`
* `number`
* `boolean`
* `node-set`
* `RTF`
* `external`
仕様書
---

EXSLT - EXSL:OBJECT-TYPE
Firefox
=======

Firefox は Mozilla のポピュラーな Web ブラウザで、デスクトップ上の Windows、OS X、Linux、そしてすべての Android および iOS モバイルデバイスを含む複数のプラットフォームで利用できます。幅広い互換性、最新の Web 技術、強力な開発ツールにより、Firefox は Web 開発者とエンドユーザーの両方にとって最適な選択肢です。

Firefox はオープンソースのプロジェクトです。コードの多くは私達の巨大なボランティアのコミュニティの貢献によるものです。ここでは、Firefox プロジェクトにどのように貢献するかについて学ぶことができ、Firefox アドオンの構築、Firefox の開発者ツールの使い方、その他のトピックへのリンクもあります。

Firefox のアドオンを作成する方法、Firefox 自体を開発して構築する方法、Firefox の内部とそのサブプロジェクトの仕組みについて学びます。

* 開発者向けリリースノート
 開発者向けのリリースノート。ウェブサイトとアドオンに向けた新しい機能が Firefox のどのバージョンで登場したのかがわかります。
* プロジェクトドキュメント
 Firefox の内部構造とそのビルドシステムに関する詳細な情報を入手してください。そうすれば、コード内であなたの道を見つけることができます。
* 開発者ガイド
 私たちの開発者ガイドでは、Firefox のソースコードを入手してコンパイルする方法、方法を見つける方法、プロジェクトに貢献する方法について詳しく説明しています。
Firefox チャンネル
-------------

Firefox は 5 つの**チャンネル**で利用できます。

### Firefox Nightly

毎晩、私たちは mozilla-central の最新コードから Firefox をビルドします。これらのビルドは、Firefox 開発者や、最新の最先端の機能をまだ積極的に開発している最中に試してみたい方向けです。

Firefox Nightly のダウンロード

### Firefox Developer Edition

これは開発者向けの Firefox のバージョンです。6 週間ごとに、Firefox Nightly から十分に安定した機能を取り込み、Firefox Developer Edition の新しいバージョンが作成されます。このチャンネルでのみ利用可能な開発者用の追加機能もいくつか追加しています。

Firefox Developer Edition についてさらに学ぶ

Firefox Developer Edition のダウンロード

### Firefox Beta

Firefox Developer Edition で 6 週間を過ごした後に、十分に安定した機能を利用し、新しいバージョンの Firefox Beta を作成します。 Firefox Beta ビルドは、Firefox 愛好者が次回リリースされることになる Firefox バージョンをテストするためのものです。

Firefox Beta のダウンロード

### Firefox

Beta でさらに 6 週間安定させた後、新しいリリースの Firefox で何億人ものユーザーに新機能を届ける準備が整います。

Firefox のダウンロード

### Firefox Extended Support Release (ESR)

Firefox ESR は、学校、大学、企業、大規模な展開のための延長サポートを必要とする組織など、組織が使用するためのデスクトップ用 Firefox の長期サポート版です。

Firefox Extended Support Release についてさらに学ぶ

Firefox ESR のダウンロード

目次
--

Firefox における実験的機能このページでは、提案されているまたは最先端のウェブプラットフォーム標準を含む、 Firefox の実験的かつ部分的に実装された機能を一覧にしています。また、それらの機能が搭載されているビルドの情報、「既定で」有効になっているかどうか、有効または無効にするためにどの*環境設定*を使用すべきかについても説明しています。
 これにより、機能がリリースされる前に、その機能をテストすることができます。

Firefox 開発者向けリリースノート以下は、開発者向けの Firefox リリースノートへのリンクです。どの機能や API が追加され、改善されたか、Firefox の各バージョンでどのようなバグが修正されたかについての詳細が、懇切丁寧に記されています。これらは皆さん開発者がほしいかと思って用意したものです。えっへん。

Firefox プロファイル
--------------

複数の Firefox チャンネル、または複数の設定を定常的に使用している場合は、Firefox のプロファイルマネージャーやその他のプロファイル管理ツールを利用して複数の Firefox プロファイルを使用する方法をお読みください。

こちらもどうぞ
-------

* メーリングリスト
* リリーススケジュール
アドオン
====

開発者はアドオン (add-on) を作成して Firefox の機能を拡張したり変更したりすることができます。 アドオンは JavaScript、HTML、CSS といったウェブ標準技術と、幾つかの専用の JavaScript API を使って作成します。

中でも、以下のようなことがアドオンで実現できます。

* 特定のウェブサイトの見た目や内容を変更する
* Firefox のユーザーインタフェースを変更する
* Firefox に新しい機能を追加する

アドオンには幾つかの種類がありますが、もっとも一般的なものは拡張機能 (extension) です。

拡張機能の開発
-------

以前は Firefox の拡張機能を開発するためのツールセットが幾つかありましたが、 2017 年 11 月からは WebExtensions API を使って拡張機能を構築するようにしなければいけません。 それ以外のツールセット (例えば overlay add-on, bootstrapped add-on, add-on SDK) はサポートされなくなりました。

WebExtensions API を使って Firefox 向けに作った拡張機能は、ブラウザー間の互換性を持つように設計されています。大抵の場合、 Chrome、Edge、Opera でも必要に応じてわずかに修正するだけで動作します。マルチプロセスの Firefox とも完全な互換性があります。Firefox とその他のブラウザーで現在対応している API はこちらです。

### 拡張機能ワークショップ

Firefox Extension Workshop は、 Firefox 用の拡張機能を開発し、ユーザーが閲覧の使い勝手をカスタマイズできるようにする、シンプルかつ強力な方法を提供するお手伝いをします。次のようなものがあります。

* Firefox 拡張機能の概要
* 開発とテストのためのツールとプロセス
* 拡張機能を addons.mozilla.org で公開する、または自分で配布する方法
* 公開した拡張機能を管理する方法
* 拡張機能の開発と使用のためのエンタープライズガイド
* Firefox のテーマを開発する方法
* Firefox 開発者コミュニティ
### Android 版 Firefox の拡張機能

2020 年に、 Mozilla は新しい Android 版 Firefox の操作形態をリリースします。この新しい高性能な Android 向けブラウザーは、Mozilla のモバイルブラウザーエンジンである GeckoView を使って作り直されています。現在、 GeckoView で WebExtensions API のサポートを構築中です。

### 既存の拡張機能の移行

XUL overlay、bootstrapped、add-on SDK などを使用した既存の拡張機能を保守している場合は、 WebExtension API を使って移植できます。 MDN の関連記事をご覧ください。

移行全般のサポート情報は、 Wiki ページを参照してください。

アドオンの公開
-------

Addons.mozilla.org は、 "AMO" と呼ばれる Mozilla 公式サイトです。開発者はアドオンを掲載し、ユーザーはアドオンを探すことができます。アドオンを開発したら AMO にアップロードして、ユーザーやクリエイターのコミュニティに注目してもらいましょう。

開発したアドオンを AMO に掲載することは必須ではありませんが、 Mozilla が署名しない限り、ユーザーはインストールできません。

アドオンを公開する手順の概要については、アドオンに署名して配布するにはをご覧ください。

その他の種類のアドオン
-----------

拡張機能の他にも、ユーザーが Firefox をカスタマイズするためのアドオンが何種類かあります。

* User dictionaries は、色々な言語のスペルチェックを可能にします。
* Language packs は、 Firefox のユーザーインターフェイスで更に多くの言語に対応できるようにします。
連絡先
---

連絡先ページでは、サポートを受ける方法、アドオンの最新情報を入手する方法、フィードバックを提供する方法などの詳細を確認できます。
連絡先
===

サポートを受けたり、アドオン関連の最新ニュースを追いかけたり、ご意見を寄せたりするには、下記のリンクからどうぞ。

### アドオンフォーラム

Add-ons Discourse forum は、アドオン開発全般の議論や質問に使って下さい。

### メーリングリスト

**dev-addons メーリングリスト** は 2020 年 12 月 1 日に廃止されました。 dev-addons archives で WebExtensions API と addons.mozilla.org に関する過去の議論を参照することができます。

### チャット

Matrix は、分散型リアルタイム通信のための、オープンで軽量なプロトコルです。 Mozilla の Matrix インスタンスに参加する方法については、 MozillaWiki の Matrix ページを参照してください。

* Add-ons (拡張機能、テーマ、 WebExtensions API のサポート)
* AMO (addons.mozilla.org に関する議論)
### 問題を報告する

#### セキュリティ欠陥

アドオンのセキュリティ欠陥を見つけた場合は、それが Mozilla のサイトで提供しているものでなくても、私たちまでお知らせ下さい。私たちは開発者と協力して問題を修正します。 連絡は非公開で、 Bugzilla または amo-admins@mozilla.com 宛てのメールでお願いします。

#### サイト addons.mozilla.org (AMO)のバグ

もしサイト自体の問題を見つけたら、是非修正したいと思います。 バグ報告して、できるだけ多くの詳細を含めてください。
ブラウザー拡張機能
=========

拡張機能はブラウザーの能力を拡張・修正するものです。Firefox の拡張機能は WebExtensions API を使ってビルドされ、この API は拡張機能をクロスブラウザーで開発するシステムです。このシステムの大半は Google Chrome と Opera と W3C Draft Community Group でサポートされている extension API と互換性があります。

これらのブラウザー用に書かれた拡張機能は大抵の場合、ほんの少し変更を加えるだけで (en-US) Firefox や Microsoft Edge でも動かすことができます。この API は マルチプロセス Firefox にも完全互換です。

お持ちのアイデアや質問があったり、レガシーアドオンを WebExtensions API を使うように移行するのに助けが要る場合、dev-addons のメーリングリスト (英語) や Add-ons room (英語) や Matrix (英語) にてご連絡ください。

日本語情報としては Mozilla Japan コミュニティの Slack の #extdev チャンネルで情報交換が行われています。

始めましょう
------

* 拡張機能とは何か?
* 初めての拡張機能
* 2 つめの拡張機能
* 拡張機能の中身
* 拡張機能の例
概念
--

* コンテンツスクリプト
* マッチパターン
* ファイルの操作
* 国際化拡張
* セキュリティのベストプラクティス
* Content Security Policy
* Native messaging
* devtools APIs を使用する
* ネイティブマニフェスト
* manifests ファイル
ユーザーインターフェイス
------------

* 導入
* ブラウザーツールバーボタン
* ポップアップ付きブラウザーツールバーボタン
* アドレスバーボタン
* ポップアップ付きアドレスバーボタン
* コンテキストメニューの項目
* サイドバー
* オプションページ
* Extension pages
* 通知
* アドレスバーの入力候補 (en-US)
* 開発ツールパネル
* ブラウザースタイル (en-US)
逆引きリファレンス
---------

* HTTP リクエストへの介入
* web ページの変更
* ツールバーボタンの追加
* 設定画面の実装
* クリップボードとのやりとり
* Tabs API を使用する
* Bookmarks API を使用する
* Cookies API を使用する (en-US)
* Contextual Identity を使用する (en-US)
* userScripts を使用する (en-US)
* 外部コンテンツの挿入 (en-US)
移行
--

* Google Chrome extension からの移行 (en-US)
* 古い Firefox アドオンの移行
* Android 向け Firefox 拡張機能の開発
* Thunderbird における WebExtensions によるアドイン開発
* Add-on SDK との比較
* XUL/XPCOM 拡張との比較
* Chrome との非互換性
* デスクトップ版と Android 版の拡張機能の違い
Firefox でのワークフロー
----------------

* ユーザー体験の成功事例
* Firefox への一時的なインストール
* デバッグ
* テストの持続と再起動機能
* はじめての web-ext
* web-ext コマンドリファレンス
* Extensions と Add-on ID
* 配布方法の選択肢
* 正しいパーミッションを要求する
* オブジェクトを Web ページのスクリプトと共有する (en-US)
* 拡張機能を引退させる (en-US)
* Tips and Tricks
* ブラウザー拡張機能の開発ツール
リファレンス
------

### JavaScript API 群

* JavaScript API の概要
* JavaScript API 群のブラウザー互換性表
* alarms
* bookmarks
* browserAction
* browserSettings
* browsingData
* clipboard
* commands
* contentScripts
* contextualIdentities
* cookies
* devtools
* downloads
* events
* extension
* extensionTypes
* find
* history
* i18n
* identity
* idle
* management
* menus
* notifications
* omnibox
* permissions
* pkcs11
* privacy
* proxy
* runtime
* sessions
* sidebarAction
* storage
* tabs
* theme
* topSites
* types
* webNavigation
* webRequest
* windows
### Manifest keys

* manifest.json の概要
* manifest.json のブラウザー互換性
* author
* background
* browser\_action
* browser\_specific\_settings
* chrome\_settings\_overrides
* chrome\_url\_overrides
* commands
* content\_scripts
* content\_security\_policy
* default\_locale
* description
* developer
* devtools\_page
* homepage\_url
* incognito
* manifest\_version
* name
* omnibox
* optional\_permissions
* options\_ui
* page\_action
* permissions
* protocol\_handlers
* short\_name
* sidebar\_action
* version
* version\_name
* web\_accessible\_resources
次にどうするのか？
=========

ブラウザー拡張機能のアイデアを実現化していく準備ができているでしょう。開発の旅に出る前に、いくつかの注意点を意識することはスムーズに旅をする上で価値があります。

開発環境
----

ブラウザー拡張機能を開発するためには、どんな特別な開発ツールや環境構築も必要ありません。テキストエディターだけで素晴らしいブラウザー拡張機能を作成することはいくらでも可能です。しかし、ウェブ用の開発で再利用したいツールと環境を持っている場合もあるでしょう。その場合は、いくつかのことを意識する必要があります。

圧縮や難読化ツールを使用して最終コードを提出する場合には、AMO レビュープロセスにソースコードを提供する必要があります。また、使用するツール (圧縮、難読化、ビルド用) は、オープンソース (または無期限の無料提供) かつレビュー担当者のコンピューター上 (Windows、Mac、Linux) で実行可能である必要があります。残念ながらレビュー担当者は有償ツール、またはウェブベースのツールでは作業することができません。

ビルドツールに関する詳細

サードパーティライブラリー
-------------

サードパーティライブラリーはブラウザー拡張機能に複雑な特徴や機能性を素早く追加するための優れた手段です。AMO レビュープロセスに拡張機能を提出する時、どんなサードパーティライブラリーが使用されているかも検討されます。効率的なレビューのため、サードパーティライブラリーは常に公式ウェブサイトやリポジトリーからダウンロードし、ライブラリーが圧縮されている場合はソースコードへのリンクを提供してください。サードパーティライブラリーはいかなる方法でも変更できないことに注意してください。

ソースコードの提出に関する詳細

Firefox アドオン配布同意事項
------------------

Firefox のリリース版、またはベータ版にインストールを行うために、拡張機能に署名する必要があります。署名は、addons.mozilla.org (AMO) で行われ、Firefox アドオン配布同意事項の条件に従います。この契約の目的は、Firefox ユーザーに対し、Firefox での体験を強化するような、十分にサポートされた高品質のアドオンを提供することにあります。

同意約内容を確認する

署名に関する詳細

レビュープロセス
--------

署名のためにブラウザー拡張機能が提出されると、自動審査の対象となります。また、自動審査においてマニュアル審査が必要と判定された場合には、マニュアル審査の対象となる場合もあります。ブラウザー拡張機能は自動審査を通過するまで署名は行われず、マニュアル審査を通過しなかった場合に署名が取り消されることがあります。この審査の過程は厳密なガイドラインに従っているため、審査で問題になりそうな点を確認して回避することは簡単です。

レビューポリシーとガイドラインに関する詳細

AMO のおすすめブラウザー拡張機能
------------------

AMO にブラウザー拡張機能を掲載することを選んだ場合、拡張機能は AMO のウェブサイト、Firefox ブラウザーのアドオンマネージャー、または Mozilla のウェブサイト上のいずれかの場所に表示されます。拡張機能がどのようにおすすめとして選ばれるかを取り上げたガイドラインの一覧を作成しました。これらのガイドラインに従うことで、拡張機能をおすすめされるための最高の機会を得ることになります。

アドオンのおすすめに関する詳細

学習体験を続ける
--------

これまでの内容を知ったところで、今度はブラウザー拡張機能の開発について詳しく説明します。以下のセクションを確認してください:

* ブラウザー拡張機能の裏にある基本的なコンセプトについて、JavaScript API の使い方の詳細から説明します。
* ブラウザー拡張機能で利用できる、ユーザーインターフェイスコンポーネント のガイド。
* 拡張機能の主な課題を達成する方法や、JavaScript API の使用方法に関するガイドのまとめ。
* 他のブラウザー拡張機能を Firefox に移行する方法に関する情報。
* ブラウザー拡張機能の開発で使用できる Firefox 特有のワークフローの詳細について。
* JavaScript API に関するリファレンスガイド。
* マニフェストキーに関するリファレンスガイド。
Content Security Policy
=======================

WebExtension APIs で開発される拡張機能には、既定で適用される CSP(Content Security Policy の略) があります。これは <script> と <object> リソースから読み込まれるソースを制限し、危険な行動、例えば `eval()` の使用を非許可にします。

この記事では CSP とは何かと、デフォルトポリシーとは何で拡張機能にはどんな意味があるのかと、拡張機能が既定の CSP を変更する方法を簡単に説明します。

Content Security Policy (CSP) はウェブサイトが悪意のあるコンテンツを実行するのを防ぐのに役立つメカニズムです。ウェブサイトは サーバーから送られてくる HTTP ヘッダーを使って CSP を指定します。CSP は主に、スクリプトや組み込みプラグインといったさまざまな種類のコンテンツの合法なソースを特定することに関心を持っています。例えば、ウェブサイトは、ウェブサイト自身からの JavaScript だけを実行し、他のソースは受け付けないように指定できます。CSP はブラウザーに `eval()`のような、潜在的に危険な行動を禁止するよう指示することもできます。

ウェブサイトと同様に、拡張機能はさまざまなソースからコンテンツを読み込めます。例えば、ブラウザーアクションのポップアップは HTML 文書として指定できて、通常のウェブページのようにさまざまなソースからの JavaScript と CSS を入れることができます:


```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <!--Some HTML content here-->

    <!--
 Include a third-party script.
 See also https://developer.mozilla.org/ja/docs/Web/Security/Subresource\_Integrity.
 -->
    <script
 src="https://code.jquery.com/jquery-2.2.4.js"
 integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
 crossorigin="anonymous"></script>

    <!-- Include my popup's own script-->
    <script src="popup.js"></script>
  </body>
</html>
```


ウェブサイトと比較して、拡張機能は追加の特権付き API にアクセスできるので、悪意のあるコードに感染した場合、リスクは大きくなります。このため:

* かなり厳密な CSP がデフォルトで適用されます。既定の content security policy を見てください
* 拡張機能のオーナーは `content_security_policy` manifest.json キーを使ってデフォルトのポリシーを変更できますが、許可できるポリシーには制限があります。`content_security_policy` を見てください。
既定の content security policy
---------------------------

拡張機能の既定の CSP は次のものです:
```

"script-src 'self'; object-src 'self';"
```


これは、`content_security_policy` の manifest.json key を使って明示的に CSP をセットしないあらゆる拡張機能にあてはまります。下記の結論になります:

* <script> と <object> リソースは拡張機能のローカルからのみ読み込みできる
* 拡張機能は JavaScript で文字列を評価 (eval) できない
* インライン JavaScript は実行されない
### スクリプトとオブジェクトリソースの場所

既定の CSP の下では、拡張機能のローカルにある <script> と <object> リソースだけを読み込みできます。例えば、拡張機能の文書内にこんな行があるとします:


```html
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
```


これは要求したリソースを読み込みません: 静かに失敗し、このリソースから取ってきたはずのいかなるオブジェクトも見つかりません。この解決方法が 2 つあります:

* リソースをダウンロードして、拡張機能にパッケージして、このリソース版を参照する
* 必要なリモートオリジンを許可するために `content_security_policy` を使う
### eval() とその仲間

既定の CSP の下で、拡張機能は JavaScript 内の文字列の評価を許可しません。つまり次のことは許可されません:


```js
eval("console.log('some output');");
```



```js
window.setTimeout("alert('Hello World!');", 500);
```



```js
var f = new Function("console.log('foo');");
```

### インライン JavaScript

既定の CSP ではインライン JavaScript は実行されません。これは `<script>` タグで直接置かれた JavaScript と、インラインイベントハンドラーの両方とも許可されず、つまり次のことは許可されません:


```html
<script>
 console.log("foo");
</script>
```



```html
<div onclick="console.log('click')">Click me!</div>
```


ページが読み込まれた時にスクリプトを実行するのに `<body onload="main()">` のようなコードを使っている場合、代わりに DOMContentLoaded か load をリッスンします。
ThunderbirdにおけるWebExtensionsによるアドイン開発
=====================================

 Thunderbird のアドイン開発は Firefox と同様の方法でコーディングすることが可能です。
 テキストエディタや、あなたの選んだコーディングツールで。

API の違い
-------

 両者とも Gecko ベースであるため、いくつかの違いはあるものの、Thunderbird では、Firefox で使える API の多くをサポートしています。
 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

参考
--

* Browser support for JavaScript APIs
* Browser compatibility for manifest.json
manifest.json のブラウザー互換性
=======================

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**メモ:** Microsoft Edge の互換性データは Microsoft Corporation により提供され、Creative Commons Attribution 3.0 United States License の下でこのページに含めています。

関連情報
----

* JavaScript API へのブラウザーのサポート