FireFoxのアドオンmulti-account-containersのソースいじってGesturefyを使いマウスジェスチャーで新しいコンテナータブを開けるようにした

公開日:2018-12-21
最終更新:2018-12-21

記事で書き始めたけどログで良かったかも

適当記事

 

FireFoxを使い始めた、multi-account-containersってアドオンがある、そして、Gesturefyっていうマウスジェスチャーのアドオンは他のアドオンにメッセージを送る事が出来る、他のアドオン側がメッセージ処理出来る様になってれば色々出来るので良い。

multi-account-containers、ちょっと、新しいコンテナータブを開くのが面倒に思ったのでGesturefyのマウスジェスチャーで新しいコンテナータブを開けるようにすれば便利かもと思った。

って事でmulti-account-containersがメッセージを処理出来る様に改変する。ソースコード割とシンプルだったので…いけるかなと思って…

完全に思い付いて1時間足らずぐらいで適当にやったのでmulti-account-containersの事とかFireFoxアドオンの事とかよく分かってません。そして記事も適当です。

 

multi-account-containers

https://github.com/mozilla/multi-account-containers

ダウンロードしてyarn install(npm install)

 

まずはほぼ無改変の状態でとりあえずFireFoxアドオンとして使える状態にしてみる。

srcフォルダ内のmanifest.jsonを色々修正、applicationsのidを一意の適当な英数字に、nameにFireFoxなどの文字列は使えないので適当に変える

./node_modules/.bin/web-ext build -s src/でビルド、zipが出来る。が、

 

出来たzipは署名がされてなくて普通のFireFoxで使えないっぽい、よく分からないので以下の感じで署名した。

アドオン開発者センター
https://addons.mozilla.org/ja/developers/

でアドオン登録、配布手段は自分自身で。先程ビルドして出来たzipを上げる

問題無く完了すると、署名されたxpiをダウンロード出来る、それをFireFoxに入れると動く。

 

いじる

とりあえず無改変の状態が動いたのでここから改変していく。

どういうメッセージを受け取るかだけど、Gesturefyでメッセージを送る設定でメッセージをパースにONにして{"method" : "newTab", "userContextId" : 1}って感じのメッセージを送るという前提。そういうメッセージを受け取る前提。

 

アドオンのデバッグはabout:debuggingから出来る。

アドオンのデバッグを有効化にチェック入れて、デバッグ開始したいアドオンのデバッグを押す、リモートデバッグ接続要求をOKすると開発ツールが開く、そこにconsole.logとかで出力した奴とかエラーとかが表示される。

 

src/js/background/messageHandler.jsのbrowser.runtime.onMessageExternal.addListenerの所らへんをいじってメッセージを受け取れる様にする。

 

externalExtensionAllowedに外部操作を許可するアドオンのidを入れる

そもそも、permissionsにcontextualIdentitiesが含まれてるアドオンなら許可される様になってるっぽいが、GesturefyはパーミッションにcontextualIdentities含まれてないので、とりあえずGesturefyの拡張機能 IDをハードコードしてしまう方法でやる。

 

about:debuggingでGesturefyの拡張機能 IDを確認出来る。

そして、const externalExtensionAllowed = {"{506e023c-7f2b-40a3-8066-bc5deb40aebe}": true};って感じにする。{506e023c-7f2b-40a3-8066-bc5deb40aebe}がIDなんだけど、IDは人によって違うかも、たぶん違うと思う。ので上述の方法で拡張機能IDを確認する。

 

switch (message.method)のブロックにcase "newTab":を追加する。

そしてresponse = backgroundLogic.openNewTab(message);break;ってやる。

 

src/js/background/backgroundLogic.jsのopenNewTabを見る。

this.isPermissibleURL(url)が呼び出されてるんだけど、isPermissibleURL(url)はurlがundefinedだとうまくいかないっぽい

同ファイル内の関数isPermissibleURLの最初でif (url === undefined)return true;ってしといてundefinedの時trueにしとく。

 

たぶんこれでOK

作ってから思ったが、新しいコンテナータブを開くよりも現在見ているページを別のコンテナで開くを作った方が便利かもと思ったのでそれも出来るようにするか

それも出来た(適当)

async switchContainer(options){  
    var querying = browser.tabs.query({currentWindow: true, active: true});  
    return querying.then((tabs)=>{  
      const userContextId = ("userContextId" in options) ? options.userContextId : 0;  
      const currentTab = tabs[0];  
      const url = currentTab.url;  
      const tabId = currentTab.id;  
      const active = ("nofocus" in options) ? options.nofocus : true;  

      const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);  

      var newTabPromise = browser.tabs.create({  
        url,  
        active,  
        pinned: options.pinned || false,  
        cookieStoreId  
      });  

      newTabPromise.then((tab)=>{  
        const newTabId = tab.id;  
        const moveProperties= { "index" : currentTab.index };  
        browser.tabs.move(  
          newTabId,              // integer or integer array  
          moveProperties       // object  
        )  
      })  

      browser.tabs.remove(  
        tabId          // integer or integer array  
      )  


    }, (err)=>{console.log(err);});  
  },  

終わり  

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

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

0件のコメント

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

技術ブログをはじめよう

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

技術ブログを開設する

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

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

Markdownで書ける

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

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

技術ブログ開設

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

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