風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

Chrome拡張機能にてシークレットウィンドウとbackgroundとのメッセージ送受信時の注意


ハマったよ……

Twitter メディアローダ
furyu.hatenablog.com
にて、Google Chrome のシークレット ウィンドウ上で実行すると、ファイルダウンロード時に

失敗 - ファイルがありません

となって正常にダウンロードできない、という現象が発生した

シークレット ウィンドウでだけ発生するという訳の分からない状態だったので、途方に暮れていたのだが……。

何が起こっていたのか?

background → content_scripts に、ZIP化したコンテンツの Blob URL を sendResponse() で送信する仕組みにしていたのだが、なぜか受け取った content_scripts 側(シークレット ウィンドウ)で、その Blob URL にアクセスできない状態(404発生)になっていた。

原因

Manifest - Incognito - Google Chromeによると、manifest.json に指定できる "incognito" キーについて、シークレット ウィンドウ(匿名タブ)で動かせる拡張機能では"spanning"もしくは"split"が指定でき、

  • "spanning"(デフォルト)
    → 匿名タブ(ウィンドウ)と、その他の(一つのプロセス上で共有される)コンテキスト(これにはoptions_uiやbackgroundページも含む)とがあり、匿名タブは共有プロセスにアクセスできない
  • "split"
    →匿名タブ(と対応する background ページ)は、(匿名でないタブからみて)独立したプロセス上で動作し、メッセージ等のリソースもプロセス内のコンテキストのもののみを参照できる(それ以外のコンテキストとはやり取りできない)
    対応しているbackgroundとは共通のリソースにアクセスできると思われる

となっているように読める。
英語の解読に自信はないので、読み取り間違っているかもしれない。その場合はご指摘を……。

なので、manifest.json で明示していなかったために "spanning" モードで動いていた本拡張機能では、background で作成した Blob URL に匿名タブからアクセスできなかったのだと思われる。

対策

manifest.json に

,   "incognito" : "split"

を追加。

念のため、backgroundでの ZIP 化を無効化するオプションも付けておいた

副作用

Firefox では、"incognito" キーはサポートしているが、選択肢として "split" がサポートされていない
このため、manifest.json を Chrome と共通にしていると、アドオン登録の検証時に

"/incognito" should be equal to one of the allowed values
エラー: Your JSON file could not be parsed.

というエラーが発生し、撥ねられてしまう。
やむを得ず、Chrome と Firefox とで manifest.json を分ける羽目に……せっかく共通化していたのに(苦笑)。

拡張機能のアイコンをSVGで作ろうとInkscapeを入れてみたところ、はまった点


前書き

最近、近傍ツイート検索
furyu.hatenablog.com
の拡張機能用のアイコンをリニューアルした。

実は、2014年6月当時にやっつけで作ったまま(厳密には2016年2月にマイナーチェンジしているが)だったので、いつか作り直そう……と思いつつ、面倒なので長らく放置していた。

(2014/6/9作成)(2016/2/1微修正)

それが先日、ふと「アイコンを SVG で作ってみよう」と思い立ち、初めて Inkscape なる OSS のベクトル画像ドローソフトをインストールしてみた。
ところが、まっとうに使い始める前に例によって色々とはまってしまったので*1、それらの点についてメモ書きしておく。
導入したバージョンは、Inkscape 0.92.2 (5c3e80d, 2017-08-06)

はまった点

Python のエラー……?

Inkscape がデフォルトで出力する SVG ファイル(Inkscape SVG フォーマット)は色々と情報が入っていてサイズが大きいので、これを圧縮する方法を調べていると……

SVGのエクスポート – Inkscape@JP

標準で、『最適化 SVG』というフォーマットがあり、これはかなりサイズが小さくなるっぽい。

で、『名前を付けて保存』メニューから、その出力を試そうとしたら……

The fantastic lxml wrapper for libxml2 is required by inkex.py and therefore this extension. Please download and install the latest version from http://cheeseshop.python.org/pypi/lxml/, or install it through your package manager by a command like: sudo apt-get install python-lxml

Inkscapeは、実行したスクリプトから追加データを受け取りました。スクリプトはエラーを返しませんでしたが、実行結果が意図しないものになっていることを示唆している可能性があります。

というエラーが出てしまい、保存に失敗する。

Inkscape が自分でインストールする Python 2.7 と、別件で既にインストールされていた Python 2.7 と競合しているのかと思って、PYTHONHOME や PYTHONPATH の設定変更や削除、C:\Python27 のリネーム等、いろいろと試してみたが、

Traceback (most recent call last):
  File "C:\Python\Lib\site-packages/site.py", line 73, in <module>
    __boot()
  File "C:\Python\Lib\site-packages/site.py", line 3, in __boot
    import os
ImportError: No module named os

とかいったエラーに変わるだけで、どう設定してもうまくいかない。

結局、いったん Inkscape をアンインストールしたあと、インストール時のコンポーネント選択で、
f:id:furyu-tei:20171202111555p:plain
☑ Python 2.7 のチェックを外してインストールしてみると、上記エラーが出なくなった。

なお、代わりに、自身が構築している Python 2.7 の環境上に、いくつかのライブラリを手動でインストールしておく必要があるので注意。

> python -m pip install lxml numpy scour
デフォルトは mm 単位で、A4 サイズ……?

インストールした Inkscape を起動すると、新規ドキュメントが開くが、デフォルトではこれがサイズの単位が mm で、かつ、A4 サイズになっている。
f:id:furyu-tei:20171202113915p:plain

ドキュメントのプロパティ(ファイル(F)→ドキュメントのプロパティ(D))はこんな感じ。
f:id:furyu-tei:20171202111611p:plain

この設定ではアイコンを作るのには不便そうなので、Chrome 拡張機能の基本サイズ 96px × 96px にしようと思い、
f:id:furyu-tei:20171202113835p:plain
のように設定。
※変更したのは、

  • 『Display units』→ px
  • 『カスタムサイズ』→幅(W):96.0000、高さ(H):96.0000、単位(N):px
  • 『拡大縮小』→ Scale x:1.00000
  • 『Background』→☑ Checkerboard background(チェックを付ける)
  • 『境界線』→☑ 描画より前面に境界線を表示する(T)(チェックを付ける)、□ 境界線に影を表示する(S)(チェックを外す)

これで、ドキュメントは
f:id:furyu-tei:20171202113901p:plain
といった感じになる。

よく見てみたら、ドキュメントのプロパティの『ページサイズ』に、"Icon 48x48" といったものもあった。

ただ、毎回設定するのは大変なので、デフォルトを変えたい。

Setting up page template - InkscapeForum.com

などを参考に、↑のように設定変更したドキュメントを

%UserProfile%\AppData\Roaming\inkscape\templates

の下に、default.ja.svg というファイル名で保存しておく。
すると、新規ドキュメントを開いたときに、上記設定が反映されるようになる。

『最適化 SVG』形式で保存すると……画面いっぱいのアイコンが?!

苦戦しつつもアイコンを描き終わり、『最適化SVG』形式で保存し、これをブラウザで表示してみると……
f:id:furyu-tei:20171202115705p:plain
……でかっ!!

エディタで当該 SVG ファイルを見てみると……

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

viewBox は指定されているものの、width と height が抜けている……?
そこで、SVG タグを修正し

<svg version="1.1" viewBox="0 0 96 96" width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

「width="96" height="96" 」を付け加えたところ、

f:id:furyu-tei:20171202120010p:plain
なんとか普通に表示されるようになった。

なお、『Inkscape SVG』形式や、『プレーン SVG』形式の場合には、width・height は入っているため、『最適化 SVG』形式の場合の不具合かもと考えている。
ちなみに、

  • 『カスタムサイズ』→幅(W):25.4000、高さ(H):25.4000、単位(N):mm

にしておくと、『最適化 SVG』であっても width・height が入り、

<svg width="25.4mm" height="25.4mm" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

見た目上の表示もまっとうになる。
ただし、ピクセルとの変換が面倒。

他のサイズで出力するには……?

96px × 96px で作成しているが、例えば Chrome 拡張機能用には、48px、96px、128px というサイズのアイコンが必要になる。
しかも、128pxは、96px のアイコンの周囲を 16px の透過ピクセルで囲んだもの。

SVG 形式の場合
ドキュメントのプロパティをその都度変更しつつ、名前を付けて保存してもよいが、96px の最適化 SVGを出力しておき、これをコピーして、テキストエディタで width、height、viewBox を書き換える方が簡単かも。
※ 96px

<svg version="1.1" viewBox="0 0 96 96" width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

※ 48px

<svg version="1.1" viewBox="0 0 96 96" width="48" height="48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

※ 128px(周囲16pxは透過)

<svg version="1.1" viewBox="-16 -16 128 128" width="128" height="128" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

ちなみに、viewBox と width・height の関係は、以下のサイトの解説が分かりやすかった。
old-pine.net

私的に、こんな↓感じだと理解。
f:id:furyu-tei:20171203003948p:plain
間違っていたらご指摘を。
なお、preserveAspectRatioの指定によって、viewBox を width-height の矩形に投影する際の動作が異なってくる模様。
developer.mozilla.org

追記:@rikuoさんにご紹介いただいたわかりやすい記事
www.sarasoueidan.com

Interactive SVG Coordinate System


PNG 形式の場合
Inkscape の『PNG 画像にエクスポート(E)』(Shift+Ctrl+E)により出力するのが簡単。
通常は、『画像サイズ』欄に出力したいサイズを入力して、エクスポートするだけでよい。
ただし Chrome 拡張機能の 128px の場合には、エクスポート領域で、透過ピクセル部分を含んだ x0、y0、x1、y1(-16, -16, 112, 112)を指定してやる必要がある。
f:id:furyu-tei:20171202124108p:plain

サゲ


苦労して(?)作成した SVG ファイルも、Chrome 拡張機能の manifest.json や、拡張機能のアイコン登録画面などでは、指定できない罠。

*1:絵心が無いとかそういう、人間のソフトウェアに依存したどうしようもない理由ではなく

近傍ツイート検索で最近リツイートしたユーザーを表示する機能を追加しました(version 0.2.6.100)


前書き

近傍ツイート検索
furyu.hatenablog.com
にて、個別ツイートをリツイートした最近のユーザーを表示する機能を追加しました。
また、該当するユーザーが RT 前後の 10 分間にツイートしていた内容(概要)を表示することも出来るようになりました。

早い話が、『RtRT』("(Find the) Reference to ReTweet")や、
リツイート直後のツイートを表示するやつみたいなことを、ユーザースクリプトや拡張機能でもやりたかったのです……サイトに行って調べるのが面倒なので(苦笑)。
とは言っても色々と制限が厳しく、Webサービスみたいにはいきませんが……。
調子に乗ってあちこちのツイートで試していると API 制限(時間当たりの回数制限)に引っかかるかも知れません。悪しからずご了承ください。

新機能について

当然ながら、ブラウザに近傍ツイート検索の最新版がインストールされていることが前提です。
まだの方は、お使いのブラウザ環境に合わせて
github.com
chrome.google.com

近傍ツイート検索 – Firefox 向けアドオン

からインストールしてください。

使い方

インストール/更新後に Web 版公式ツイッターを開くと、リツイートされているツイートの下の方に [Re:RT] というボタンがついています。
f:id:furyu-tei:20171125034556p:plain

これをクリックすると、当該ツイートを RT したユーザーのうち、最近行った方々が表示されます。
f:id:furyu-tei:20171125034607p:plain

ユーザーのプロフィールの右側に [↓↑] というボタンが表示されますが、
f:id:furyu-tei:20171125034626p:plain

これをクリックすると、
f:id:furyu-tei:20171125034640p:plain

RT 前後 10 分間のツイート概要が表示されます。
RTした人は、その前後に当該ツイートについて言及していることもよくある、という経験則に基づきます。

オプションとしては、表示するユーザー数を変更できます。
f:id:furyu-tei:20171125034653p:plain
これは、最大 100 ユーザーまでです。
Twitter API の仕様による制限です。

注意書き

更新の際に無効化されてしまう

上記の機能に関して、拡張機能に新たな権限が追加されています。
f:id:furyu-tei:20171127045119p:plain

0.2.5.200以前バージョンから更新された場合、いったん拡張機能が無効化され、有効化しようとすると、

「近傍ツイート検索」の最新バージョンは、さらに許可が必要なため無効になっています。

のようにメッセージが表示されて、再度有効にするかどうかの確認があります。
f:id:furyu-tei:20171127034910p:plain

[再度有効にする]ボタンを押してください。
上記は Chrome の場合ですが、Firefox の場合にも同様のダイアログが表示されることがありますので、その場合は[更新(U)]ボタンを押してください。

※キャンセルを押してしまった場合などは……
 Google Chrome → 拡張機能の画面 chrome://extensions/ (「≡」(右上のハンバーガーメニュー)→「その他のツール(L)」→「拡張機能(E)」)を開き、「近傍ツイート検索」を探して、「□ 有効にする」のチェックボックスにチェックを入れてください。
 Firefox Quantum → アドオンマネージャー about:addons ([Ctrl]+[Shift]+[A]、「≡」(右上のハンバーガーメニュー)→アドオン)を開き、「近傍ツイート検索」を探して、[有効化]ボタンを押してください。

ここで、Google Chrome の場合には

・twitter.com の全サイト、twitter.com 上にある自分のデータの読み取りと変更

とあるので(特に『変更』と出てしまっているので)不安に思われる方もいらっしゃるようですが、「ユーザーデータには変更を加えてはいません」のでご安心ください。
Firefox Quantum の場合、同様のダイアログでは、「・twitter.com の保存されたデータへのアクセス」という表現になっていると思います。
作者本人がそう言っても不安だ・信用できない、という方は、公開しているソースコードをご覧になるか、使用をお控えください。

これは、今回の機能の中で、「個別ツイートをリツイートした最近のユーザー」の情報を取得するために、新たにアクセス権を追加したためです。
Twitter 側に設定してある本拡張機能用のアクセス権限は、「読み取り専用」(Read-only)としているのですが、
f:id:furyu-tei:20171127035554p:plain
拡張機能には「読み取り専用」という権限はなく、アクセスを許可しようとすると自動的に「読み取りと変更」ということになってしまいます。

なお、上記の権限に関して、実際に使用している Twitter の API は以下の通りです。

POST oauth2/token — Twitter Developers
GET application/rate_limit_status — Twitter Developers
GET statuses/retweets/:id — Twitter Developers

余談