[Firefox][Extension]初めてと2つ目の拡張機能

公開日:2019-02-17
最終更新:2019-02-17

こんな話がありまして

乗っかっていくつもりで始めました。

refs

Process

初めての拡張機能

Produced : https://github.com/sogaoh/FirefoxExtensionPractice/tree/master/borderify

  • 素直に ガイド[^1] に従って拡張機能を作成
  • about:debugging を利用して動作確認
  • コマンドで zip に固め
      ~/src/sogaoh/FirefoxExtensionPractice/borderify   
      ❯ zip -r -FS ../ant-in-giant-borderify_ffExtension.zip *  
        adding: README.md (deflated 54%)  
        adding: borderify.js (stored 0%)  
        adding: icons/ (stored 0%)  
        adding: icons/LICENSE (deflated 23%)  
        adding: icons/border-48.png (deflated 3%)  
        adding: manifest.json (deflated 44%)
    
  • アドオン開発者センター > 新しいアドオンを登録 へログインし
    • 下の選択肢をとり自主配布可能となるように、アップロード
  • 結果はこんな感じ(青い枠線が、効果)

2つ目の拡張機能

Produced : https://github.com/sogaoh/FirefoxExtensionPractice/tree/master/beastify

  • これも素直に ガイド[^2] に従って写経してたら、ドキュメントにおかしなところを発見
  • 性格上?放置できず、Contributeにまで至る
  • お勉強に戻り、今度は web-ext で zip を作成
      ~/src/sogaoh/FirefoxExtensionPractice/beastify master*  
      ❯ web-ext build  
      Building web extension from /Users/sogaoh/src/sogaoh/FirefoxExtensionPractice/beastify  
      Your web extension is ready: /Users/sogaoh/src/sogaoh/FirefoxExtensionPractice/beastify/web-ext-artifacts/ant-in-giant_beastify-1.0.zip
    
    • さらに更新(上書き)の場合は --overwrite-dest を付けることを把握
        ~/src/sogaoh/FirefoxExtensionPractice/beastify master*  
        ❯ web-ext build --overwrite-dest  
        Building web extension from /Users/sogaoh/src/sogaoh/FirefoxExtensionPractice/beastify  
        Destination exists, overwriting: /Users/sogaoh/src/sogaoh/FirefoxExtensionPractice/beastify/web-ext-artifacts/ant-in-giant_beastify-1.0.zip  
        Your web extension is ready: /Users/sogaoh/src/sogaoh/FirefoxExtensionPractice/beastify/web-ext-artifacts/ant-in-giant_beastify-1.0.zip
      
  • 2回目の、 アドオン開発者センター > 新しいアドオンを登録 へログインし
    • 下の選択肢をとり自主配布可能となるように、アップロード
  • 結果はこんな感じ

Others

Note

[^1]: (MDN web docs) Mozilla > アドオン > ブラウザー拡張機能 > 初めての拡張機能
[^2]: (MDN web docs) Mozilla > アドオン > ブラウザー拡張機能 > 2つ目の拡張機能

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@sogaohの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする