Help us understand the problem. What is going on with this article?

KaggleでもMouse Dictionaryを使えるようにする

Mouse DictionaryとKaggleと私

Mouse Dictionaryを、Kagglerな方々の一部で便利に使っていただいているようでした。

一方で、Kaggleのサイトの一部でMouse Dictionaryが反応しないという問題があるようでした(カーネルのNotebookとか)

そこで今回は、Mouse DictionaryをKaggleのサイト上コンテンツ全般に対して使用できるようしてみました。

結論だけ知りたい

このChrome拡張をインストールしてください。

Mouse Dictionary Kaggle support

  • 上記拡張は、Mouse Dictionaryがインストールされていることを前提として動作します
  • Mouse Dictionaryは1.1.9以降にアップデートしてください

Mouse Dictionary Kaggle supportのソースコード

https://github.com/wtetsu/mouse-dictionary-iframe

背景を知りたい

なぜKaggleで使えなかったのか

iframeのせいです。

Kaggleが https://www.kaggle.com/ で、一部コンテンツの中身がiframeになっていて https://www.kaggleusercontent.com/ にあります。

拡張とはいえJavaScriptなので、クロスオリジンなiframe内のコンテンツをMouse Dictionary側に渡すことは、ストレートにはできません。

解決案1(採用せず)

もっとも簡単な解決案として、Mouse Dictionary自身が各iframe内にmousemoveなどのイベントを仕込み、そのイベントから取得したコンテンツを都度Mouse Dictionary本体側に渡す、という方法があります。

iframe内JS → Mouse Dictionary拡張のJS → トップレベルドキュメントのJS → Mouse Dictionary小窓の更新

みたいな流れですね。

このようなデータのやり取りは、メッセージ送受信する拡張の仕組みで実現することができます。詳しくはこちらを御覧ください。

Message Passing:
https://developer.chrome.com/extensions/messaging

しかしひとつ問題があります。クロスオリジンなiframe内にイベントを仕込んでメッセージ送受信をするためには、Mouse Dictionaryのパーミッションを追加する必要があるという点です。

これを、

"permissions": ["storage", "unlimitedStorage", "activeTab"],

こんな感じにする必要があります。

"permissions": ["storage", "unlimitedStorage", "activeTab", "https://www.kaggleusercontent.com/*"],

大多数のユーザにとって関係のないパーミッションを追加するのは、あまりうまい手とはいえません。また、拡張のアップデートの際にパーミッションが追加されていると、ユーザが明示的に許可しないとMouse Dictionaryが使用できなくなってしまいます。セキュリティ面でもユーザ体験面でも、よろしくありません。

また、将来Kaggleのページ構成が変わってしまったときに、Mouse Dictionary本体を追従する必要が出てくるかもしれません。Web上の1サイトに過ぎないKaggleを、Mouse Dictionaryが特別扱いして対応し続けないといけないのも、変な話です。

解決案2(採用)

ということで、Mouse Dictionary本体にパーミッションを追加しないで済む、別の案を考える必要がありました。

ここでは、別の拡張(Kaggle support)を、Mouse Dictionaryの追加機能的に提供する仕組みにしてみます。Kaggle利用者だけがこれをインストールすればいいので、Mouse Dictionary側のパーミッションを追加する必要はありません。Mouse Dictionaryのインストールだけで完結しないのは面倒ですが、まあ仕方がありません。

仕組みとしては、iframe内のマウスカーソル下コンテンツ取得は、Kaggle supportにまかせます。Kaggle supportは、Mouse Dictionary側にデータを送信して、小窓内のコンテンツを更新してもらいます。

拡張から拡張へのデータのやりとりには、Cross-extension messagingという仕組みを利用します。

https://developer.chrome.com/extensions/messaging#external

(おおまかな仕組み図)

image.png


これでKaggleのiframe上でもMouse Dictionaryが反応するようになりました。

Kaggle supportをインストールするときに下記のようなことを訊かれるのは、これがどうしても必要なパーミッションであるためです。上図を見るとご理解いただけるのではないかと思います。

image.png

このやり方であれば、もし仮にKaggleのページ構成が変わってしまっても、Mouse Dictionary本体には影響はなく、Kaggle supportの方だけ変更すれば追従できそうです。

謝辞

私はKagglerではないので、Kaggle利用者的にいい感じに動いているかの確認は、かえるるるさんにご協力いただきました。ありがとうございます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした