from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

WebExtensionについて

MDNやFirefox OSのドキュメントをみんなで翻訳! advent carendarの2日目の記事です。

そして初ブログ


翻訳途中で放置しててすいません。
流石にアレじゃ迷惑だったな・・・
時間がなかった。
こういう時はとりあえず翻訳しておいて編集レビューを出しておくのが大事なんだよ
ね。


今回はこれ(Walkthrough - Mozilla | MDN)に沿ってwebextensionアドオンの導入と改造をしていきたいと思う。

 

WebExtensions - Mozilla | MDN

簡単な概要:

WebExtensionはXULに代わる新しい拡張アドオン用APIです。

chromeoperaなどで使える拡張アドオン用API、chromeextensionと互換性があります。

つまり将来はW3Cブラウザー用アドオンAPIとして議論されるでしょう(たぶん)


アドオンの導入

1.データのダウンロード

Git clone https://github.com/mdn/webextensions-examples

リポジトリごと落とす。

Q.Git 何それ?

詳しくはググってください。

仕方がないから隣のDownload ZIPからzipで落として解凍してください。

2.アドオンの作成

webextensions-sampleフォルダの中のbeastifyフォルダを開いて中身を全部まとめてzipにしてください。

注:beastifyフォルダをzip化するのではなく、中身だからね。

その後、名前はなんでもいいけど拡張子は.xpiに変更してください。

 

3. アドオンの追加

firefoxを開いておもむろにドラッグandドロップ

ページはなんでもいいです。

するとこんなポップアップが出てきます。

f:id:lv7777:20151203001120p:plain

んでインストールってボタンを押せばおkです。

 

Q.できないんだけど

前提条件 - Mozilla | MDN

ここを参照して。

普通にfirefox使ってる人ならよっぽど大丈夫だと思うけど。。。。

(というのもfirefox42.0から通常リリース版でも使用可能になったので)

自分の環境でためしてみたところ、xpinstall.signatures.requiredがfalseになっていても出来ました。

ごめんなさい。デフォルトはtureでした。falseにしないとインストールできません。

 

4. 使ってみる

上のツールバーに追加された肉球?アイコンがあるのでおもむろにクリック。

なんかポップアップが出てくるのでその中のFlogボタンでもクリックしてみると背景がカエルの写真に代わります。

それだけ。

 

なんか表示されなかったと思ったらツールバーから隠れてるだけだった。
右側の≡の中のカスタマイズを開いたら見つかった。
こういうこともあるのでデバックするときに参考にして下さい。

 

そしたら忘れないうちにabout:addonを開いて今入れたアドオンを消しておきましょう。

アドオンの改造

1. manifest.jsonのタイトルとかの変更

manifest.jsonはアドオンの中の指令塔のようなものです。

ブラウザに「このファイルがこの機能を持つからそこんとこよろしく」って指定する感じです。

manifest.jsonを開いて"description"の値(隣の文字列)や"default_title"を好きなものに変更してみましょう

 

manifest.json(一部抜粋)

{
  "description": "this is description",
  "manifest_version": 2,
  "name": "beast_senpai",
  "version": "0.1",

  "applications": {
    "gecko": {
      "id": "beastify@mozilla.org"
    }
  },

  "permissions": [
    "http://*/*",
    "https://*/*"
  ],

  "browser_action": {
    "default_icon": "button/beasts.png",
    "default_title": "hello_world",
    "default_popup": "popup/choose_beast.html"
  },

 

結果:

about:addonsに表示されるタイトルとか説明とかが変わる。

ブラウザアクション(アイコン)のimageのalt属性みたいな奴が変更された。

browser action files: ツールバー回りを実装する。これぞXULっていえばわかりやすいかな。


2.デフォルトアイコンをjpgに変更


名前が正しく指定されていないとこんな感じになる。(アイコンは表示されないけどクリックは出来る)
なんかスクショ取ったらポインタが消えて謎な感じになってるけど許して。

f:id:lv7777:20151203003358p:plain


3.ポップアップとかいじってみる

3.1 console.logを入れまくる

当たり前だけどwebextensionはブラウザコンテキスト


と思ってたけどポップアップはブラウザコンテキストで
コンテンツスクリプトは普通のコンソールでも出来るっぽい。
バックグラウンドスクリプトはブラウザコンテキストっぽい。
ブラウザコンテキストのログを見るときはブラウザconsole(Ctrl+Shift+J)で見れる

コンテキスト周りよくわかってないので辛い・・・(だれか教えて)

 

結果:

どうもバックグラウンドスクリプトはインストールされてから削除されるまでが1ライフ
サイクルらしく、ページを更新したり、新しくタブを開いたりしても意味なかった。

 

3.2 コンテンツスクリプトやバックグラウンド周りをいじる

このアドオンの流れとしては

アドオンインストールされる→popupの中のchoose_beast.jsがclickイベント登録→クリックする→popupの中のchoose_beast.jsがイベント発火して関数内のchrome.tabs.executeScriptがコンテンツスクリプト(content_scripts/beastify.js)を実行→ページのDOMにアクセスしていろいろやる

 

って感じ

 

用語解説

コンテンツスクリプト:webextensionを構成する一部分。主にwebページにアクセスしたり、XHRするために使ったりする。

できること:

  • クロスドメインXHRリクエストを作成できる
  • WebExtension APIの一部分を使用できる
  • "background script"とメッセージの交換ができ、この方法ですべてのWebExtension APIに間接的にアクセスできる
  • webページにアクセスして、DOMの読み書きができる。


コンテンツスクリプトとバックグラウンドスクリプトは違うので注意しよう。俺はそこでつまずいた。

バックグラウンドスクリプトの指定方法
manifest.jsonに書く
注意:記述する時に配列を使う
詳しいことはMDNでも見て

コンテンツスクリプトの指定方法
2つある
1.manifest.jsonに書く
2.ブラウザアクションでtabs.executeScript() APIを使う

バックグラウンドスクリプトの作成:

test.jsを作る。

   console.log("injecting");
    chrome.tabs.create({
      "url": ""
    });  

 

 

chrome.tabs.createは新しくタブを開く。

webextensions-examples/open-my-page-buttonのアドオンを実行してみるとわかりやすいかも。

バックグラウンドスクリプトではwebextensionAPIが使える。

API - Mozilla | MDN

いろいろやってみるといいかもね。

 

manifest.jsonと同じフォルダに入れて以下の記述を追加する。

 

  "background": {
      "scripts": ["test.js"],
     }

 

 

どうもバックグラウンドスクリプトはインストールされてから削除されるまでが1ライフ
サイクルらしく、インストール時に実行されたら、ページを更新したり、新しくタブを開いたりしてもバックグラウンドスクリプトは実行されなかった(ただしポップアップ定義してないときはイベントとして関数を登録できるらしい)。

自分はpopupを定義するとバックグラウンドスクリプトが使えないと思っていたけど違
うっぽい。
popupもバックグラウンドスクリプトも普通に使えた

コンテンツスクリプトはウェブページと同じコンテキストで実行される(だからその
ページの色んな要素にアクセス出来る)


If a browser action does not have a popup, then when the user clicks it, a click event will be sent to its extension. Background scripts can listen for click events using code like this:
chrome.browserAction.onClicked.addListener(handleClick);

完全に見間違えてた。やっぱ英語力足りないな

 

4.webextensions-examplesのほかのアドオンもやってみる

結果:面白い(KONAMI

 

以上!!

バックグラウンドスクリプトとコンテンツスクリプトを主に紹介した

また今度webextensionAPIの紹介とか上記二つの相互メッセージングとか紹介したい。

 

次はchikoskiさんからES6関連です。

みなさん使えてます?自分は50%くらいしかわかってません。。