現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。2017の22日目の記事です。一覧はこちらこんにちは、ヤフオク!でフロントエンド開発をしている新卒1年目の中村(ぱちお)です。Firefoxがバージョン57になった影響で、従来使っていた拡張機能が使えなくなってしまったため、対応した話をします。今まで私自身は拡張機能の開発をやったことがなかったので、いい経験になるかなと思い挑戦してみました。Extensions」のみをサポートし、従来型の拡張機能はサポートが打ち切られました。(参考)そのためSNSなどでも、「普段使ってた拡張機能が、ブラウザーの更新をしたら動かなくなった!」という声があがっていました。いう圧縮ファイルに落とし込んで配布していました。いうコマンドラインツールもあったようですが、現在はどちらもDeprecatedになっています。Extensionsは、ざっくりいうと様々なブラウザーで利用できる、互換性のある拡張機能のことです。Extensionsに対応していなかったわけではなく、後発だったため従来型の拡張機能が多かったんだと思います。配布の流れは従来型と似ていて、zip形式でまとめたソースコードを基に配布する形をとります。ブラウザーで動かすものなので、もちろんソースコード自体も同じくJavaScriptです。動かなくなったのかではなぜ従来型は動かなくなったのでしょうか。原因はSDK側にありました。FirefoxのSDKの機能でブラウザのタブ操作や、DOMの取得を行ってるためです。上記で紹介したjpmチュートリアルにあるスクリプトを見てみます。ページジャンプするスクリプトです。最初の1,2行目がSDK依存の部分です。拡張タブ上のボタンのアクションを取得するためにSDKを利用しているため、変数が全部使えなくなり動かなくなりました。Extensionsに則った形で書き直します。Extensionsに書き換える」ことです。先程のスクリプトが動作するように変更を加えていきます。background.js(新しく作成)package.jsonを参考に、manifest.jsonを書きます。}}manifest_version、name、versionは必須項目です。追加で指定する必要があります。scriptsに記述します。scriptsには制限が多く、使えるAPIが少ないです。)storageではどうすればいいのかというと、backgroundを利用します。backgroundは、読み込んだ時に1度だけ実行すればいい処理や、裏で監視してほしい処理を実行してくれます。"myAction");});従来は以下のように記述していました。このbackground.jsですが、実行されているのが「現在の表示されているページ」ではない場所(おそらくタブのところ?)のため、DOM、グローバル変数などが操作(参照)できません。scripts側に処理を渡す必要があります。第一引数で受け取ることができます。index.jsを以下のように書き換えます。window.open("http://www.mozilla.org/");}これで、元のFirefoxのアドオンと同じ機能になりました。デバッグする実際に動作するかどうか、デバッグしてみます。FirefoxでWebExtensionを一時的に読み込ませる方法は、Firefoxのアドレスバーに「about:debugging」と打ち込んでアクセスします。一時的なアドオンを読み込むのボタンからmanifest.jsonを選ぶと自分の書いたスクリプトが実行されるようになります。今回はデバッグまでですが、実際に公開・配布する方法はこちらです。Extensionに対応するのは少々骨が折れます。ExtensionのAPIが存在しているので、比較的簡単に実装できます。});これでダウンロードディレクトリ配下に、filenameで指定した名前でurlの内容がダウンロードされます。scriptsはchrome.downloadsのAPIを実行できないため、backgroundに一度処理を渡しています。scriptsからはtabsのAPIを実行できないので、tabsではなく、rumtimeでsendMessageします。※downloadもpermissionあるのでmanifest.jsonへの記述忘れずにさいごに触れないであろうと思ってたことに触れる機会ができて良かったです。Extensions思ってたより簡単に書けたのでみなさんもどんどんやっていきましょう!記事内容とは関係ないですが、今回環境としてはGulp+Browserifyを採用しました。配布用のzip作成などは、Gulpのタスクに加えると楽です。なんてのも出てきましたね。あとFirefoxなのにchrome.*とソースコードに書くのは、違和感がめちゃくちゃあって面白かったです。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。