風柳メモ

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

【アマゾン注文履歴フィルタ】キーワードによる絞り込み・返金情報CSVダウンロード機能などを追加しました

前回の記事後のアマゾン注文履歴フィルタ
furyu.hatenablog.com
への機能追加分をまとめます。
以下の機能説明は、2018/02/12時点(バージョン:0.1.0.1001)でのものです。




キーワードによる絞り込みができるようになりました

「絞り込み」フィルタを追加し、
f:id:furyu-tei:20180212195646p:plain
キーワードによる絞り込みが可能となりました。

f:id:furyu-tei:20180212195652p:plain
" "(スペース)区切りで AND 検索、" OR "区切りで OR 検索となります。

また、「☑ 除外」にチェックを付けると、
f:id:furyu-tei:20180212195700p:plain
キーワードで指定した以外のものが表示されます。

[クリア]ボタンは、キーワード入力をクリアするためのものです。

絞り込みの際の制限事項
  • 標準の [注文を検索] では
    「タイトル」「注文番号」「カテゴリー」「Eメールアドレス」「届け先」
    が対象ですが、アマゾン注文履歴フィルタでは
    「カテゴリー」「Eメールアドレス」
    については対象外となります。
    「届け先」は別途「お届け先」フィルタを組み合わせて指定してください。
  • 一件につき五品目以上を注文している場合には、五品目以降が検索にかかりません。
便利な使い方

より詳細に絞り込みが必要な方のために、ダウンロードしたCSVとExcelを用いる方法を記事にしました。
furyu.hatenablog.com


返金情報ファイルがダウンロードできるようになりました

領収書印刷用画面において、読み込み完了後、表示されている注文に対応した返金(払い戻し)がある場合には、右上に
f:id:furyu-tei:20180212194024p:plain
[返金情報CSV(参考用)ダウンロード]ボタンが表示されます。

これをクリックすると、返金情報が CSV 形式でダウンロードされ、Excel 等で開くことができます。
f:id:furyu-tei:20180212194035p:plain

その他

注文履歴 CSV ファイルに配送料、ポイント払い等の情報を追加・Amazonギフト券購入対応

配送料・手数料や、ポイント・ギフト券等による支払いの情報も、注文履歴 CSV ファイル中に含むようにしました。
また、Amazonギフト券購入情報が含まれていなかったので、これを追加しました

【アマゾン注文履歴フィルタ】注文履歴をCSVでダウンロードできるようになったり、いろいろ進化しました!

アマゾン注文履歴フィルタ
furyu.hatenablog.com

が思わぬ反響をいただいているようで、本人がいちばんびっくりしております。
ギフト券を送ってくださった方々、重ねてお礼申し上げます。

気をよくして(笑)、いくつかの機能追加等を行っております。いちど使っていただいた方も、新機能を試していただけると幸いです。
以下の機能説明は、2018/02/08時点(バージョン:0.1.0.601)でのものです。




注文履歴を CSV 形式でダウンロードできるようになりました

領収書印刷用画面で読み込みが完了すると、右上の方に[注文履歴CSV(参考用)ダウンロード]というボタンが表示されるようになります。
f:id:furyu-tei:20180208204609p:plain

これを押すと、
f:id:furyu-tei:20180208204626p:plain
現在開いている領収書の内容を元にしたデータが、CSV ファイルとしてダウンロードされます。

ダウンロードした CSV ファイルは Excel 等で開くことができますので、
f:id:furyu-tei:20180208204638p:plain
いろいろと使い道はあると思います。
CSV ファイルの文字コードは BOM付 UTF-8(改行コードはCR+LF)になっています。
ただ、Mac の Excel では開けない、というようなことを昔どこかで見た気がする……5年前(2013年)の記事か。今はどうなのかな?

なお、領収書印刷用画面に表示されるデータを適当に拾って並べただけですので、もともと表示されている以上のことはわかりません。
また、手抜きして領収書上には表示されているデータであっても CSV の中には含まれないもの(Amazonポイントとか送料・手数料とか)も存在しますので、悪しからず。
ボタンに「(参考用)」とあるのはそのためです。
Amazonポイントや送料・手数料等については、0.1.0.701以降反映するようになりました。
作りが甘いこともあって、間違っているところもあると思いますので、くれぐれもそのことを念頭に置いたうえで、ご利用ください。確定申告用等の重要な書類を作成される際には、必ず元データを確認するようにしてください。
結構ひどい古き良き時代を感じさせるHTMLだったため、スクレイピングには苦労しました……。

そうそう、「商品小計」「注文合計」「請求額」「クレカ請求額」の項目が、同一の注文(搬送)内では最初(一番上)の行にしか含まれていないのは、わざとです。
縦の合計を計算するときなどに重複してしまうのを避けるため。

「お届け先」フィルタを追加しました

注文を「お届け先」で絞り込み出来る機能を追加しました。
f:id:furyu-tei:20180208204700p:plain
経費とその他に分けたい時などにご利用ください。
この機能は、ぬん。さん(@)よりご要望いただいたものです。

領収書の宛名を指定できるようになりました

領収書印刷用画面で読み込みが終わったら、
f:id:furyu-tei:20180208204718p:plain
[宛名変更]ボタンが表示され、これを押すと、
f:id:furyu-tei:20180208204736p:plain
プロンプトが出て、宛名を入れることが出来るようになります。

f:id:furyu-tei:20180208204756p:plain
「___様」に重なるように指定した宛名が表示されます。

元は宛名欄が空白なので、手動で入れないといけないのですが、あまりこれに関する愚痴などは聞きませんね……確定申告用の領収書は宛名は別に必要ないのでしょうか。まあ、必要な人だけ使ってください、ということで。

Firefox 向けに、印刷プレビューボタンが付きました

Firefox アドオン版のみですが、領収書印刷用画面で、
f:id:furyu-tei:20180208204857p:plain
[印刷プレビュー]ボタンが表示されるようになりました。
これを押すと、
f:id:furyu-tei:20180208204821p:plain
すぐプレビューできるので、わざわざハンバーガーメニュー(≡)を開いて、印刷をクリックしなくてもよくなります。
こっそりショートカットキーがもともとあったりしたら笑えますが。

その他

安定性の向上

最初の方の版では、いつまで経っても領収書読み込みが完了しない、という現象が、状況によっては割と頻繁に発生していました。
特に、一度に処理する領収書数が多い方の場合。

ひとつの原因として、領収書の取得を行うには認証状態であることが条件なのですが、読み込み処理中に認証期限が切れてサインインを要求されて(ログインフォームが表示されて)しまい、バックグラウンドで読んでいるページが処理が続けられなくなる、というのがありました。
処理が止まるタイミングは前回のサインインをいつ行ったかに依存するため(期間もかなり短くしてある模様・15分くらい?)、なるべく認証期間を有効に使うために、開始直前にサインインを行うように修正しました。

デメリットとして、領収書印刷用画面を開く毎に必ずサインイン画面が表示されるため、少し煩わしくなってしまいましたが、あと少しのところで固まるよりはマシだと割り切ってくださるよう、お願いします。

領収書読み込み時のカウンタ追加

領収書読み込み中、画面右上に
f:id:furyu-tei:20180208214629p:plain
のようにカウンタが表示されるようになったので、進行状況がすぐわかります。
また、何らかの不具合で固まってしまっても、見ていれば止まっているのが分かるようになりました……(汗)。
一応、一定時間待っても変化が無ければ、ダイアログが表示されて中断できるようにはしています。

蛇足

これがきっかけでブログに訪れて下さった方、他には Twitter 用の拡張機能(本人は便利だと思っている)も公開しておりますので、そちらもよかったら合わせてご覧ください。
furyu.hatenablog.com

【アマゾン注文履歴フィルタ】確定申告にも便利かも?! アマゾン(Amazon.co.jp)の領収書をまとめて表示する拡張機能/アドオン/ユーザースクリプト

漫画家の方などが、確定申告用にアマゾン(Amazon.co.jp)の注文履歴から Kindle を検索して領収書を個別に表示・印刷するのが手間がかかる、というようなことを Twitter でつぶやいておられたので、まとめて印刷出来たら少しは楽かな?と思い、スクリプトを書いてみました。
デジタルコンテンツ(Kindle等)以外でも、注文履歴に表示されるものについては対応しています。
2018/02/12現在、印刷(PDF出力)する他にも、注文履歴のCSVダウンロード機能がつき、データとしてより扱いやすくなりました
また、お届け先キーワードによる絞り込みなど、フィルタ機能も当初よりも充実しています。

PC 用ブラウザ向けの拡張機能/アドオン/ユーザースクリプトであり、Google Chrome/Firefox Quantum (ユーザースクリプトは Tampermonkey)上で動作確認しています。
拡張機能版は、Vivaldi、および、Opera+Install Chrome Extensionsでも動作する模様。
なお、MS-Edgeでは、拡張機能版/ユーザースクリプト版共に正常に動作せず(2018/02/05現在)。
→2018/02/06現在、拡張機能版は一応 MS-Edge でも動作するようになりました(でも重いです)。GitHubからソース一式をダウンロードして後はこちらの記事を参考にしてやれば、試すことはできると思います。なお、ユーザースクリプト(Tampermonkey)版は依然として動作しません。



インストール

Chrome 拡張機能版(Google Chrome/Vivaldi/Opera+Install Chrome Extensions対応)

chrome.google.com

より、[+CHROME に追加] ボタンを押してインストール。
ボタンの名称はブラウザによって異なります([+(ブラウザ名)に追加])。

Firefox Quantum アドオン版(WebExtensions)

https://addons.mozilla.org/ja/firefox/addon/amzorderhistoryfilter/addons.mozilla.org

より、ページ上に表示されている [+ Firefox へ追加] ボタンを押してインストール。

使い方

インストール後、注文履歴を表示し、対象となる年を選択します。
動作するのは、年を選択した場合だけです。「過去6カ月間」「過去30日間」では動作しませんので、ご注意を。→バージョン 0.1.0.1101 より、「過去6カ月間」「過去30日間」にも対応済。
すると、対象月を選択するためのプルダウンメニュー、および絞り込み用チェックボックスが表示されます。
f:id:furyu-tei:20180204193820p:plain
対象月を選択すると、該当する注文一覧が表示されます。
表示されるまでに読み込みに時間がかかることがあります。

f:id:furyu-tei:20180204193814p:plain
[領収書印刷用画面]ボタンを押すと、別タブが開き、対象となる注文の領収書を読み込みます。
ログインを行った後、領収書の読み込みが開始されます。
「☑デジタル」「☑デジタル以外」の両方にチェックしている場合、それぞれは別々のタブに開きますので、ご注意願います。
f:id:furyu-tei:20180305070223p:plain
なお、両方のタブで同時に読み込みを行うと、表示されていない方の処理が遅くなってタイムアウトする等の不都合が発生する場合があります。
片方にログインして読み込みが完了してから、もう片方にログインして読み込みすることをお勧めします。

f:id:furyu-tei:20180204193810p:plain
領収書の読み込みが完了するまでお待ちください。
対象となる注文の数が多いほど、読み込み時間も長くなります。

f:id:furyu-tei:20180204193806p:plain
読み込みが完了すると、同じページ内に複数の領収書がまとめて表示されます。
各領収書は横罫線で区切られ、便宜上のNo.が振られます。No.は個別領収書へのリンクになっています。
印刷時には、横罫線は表示されず、改ページとなります。また、No.リンクも非表示となります。

これで、ブラウザの機能により(「このページを印刷してご使用ください」リンクをクリックするか、[Ctrl]+[P]を押します)
f:id:furyu-tei:20180204193802p:plain
複数の領収書がまとめて印刷できます。
Firefox では、この方法ではプレビューは表示されません。プレビューを表示したい場合、右上のメニュー(≡)→「印刷...」とします(もしくは、アドオン版0.1.0.601以降で追加された、[印刷プレビュー]ボタンを押してください)。
まとめて印刷する関係上、ヘッダがあると 、URL 等の項目が領収書と一致しなくなってしまいますので、気になる場合にはヘッダ・フッタを印刷しないようにした方が良いでしょう。
また、白紙が出力される場合には、印刷プレビュー画面の設定で、余白を減らしたり、Firefoxの場合は「拡大/縮小(S)」から「用紙に合わせて縮小」を選択するなどして、調整してください。

Google Chrome では、印刷プレビュー画面左上にある「送信先」を「PDF に保存」に変更すると、印刷する代わりに PDF ファイルとして出力することができます。
後で見直したり、必要なものだけを印刷したりする場合には、PDF に保存しておいた方が便利かもしれません。

FIrefox では、標準では PDF で保存する機能は無いようですので(当方が知らないだけかも知れませんが)、別途そのためのアプリが必要になります。

無料のものだと、
www.cube-soft.jp
といったものがあるようです。

免責事項(念のため)

ご利用の際には全て自己責任でお願いします。
不具合があったり、使用した結果等により万一何らかの損害を被ったりした場合でも、作者は一切関知いたしませんので、悪しからず。

データとして正確(正式)なものが必要な個人事業主や会社の方等は、
www.amazon.co.jp
を利用するのがよいでしょう。

Amazon 等の通販サイトとの連携機能のある、
www.freee.co.jp
biz.moneyforward.com
www.yayoi-kk.co.jp
といったオンライン会計ソフトの使用もお勧めです。

お問い合わせ先

お問い合わせやご要望などありましたら、この記事のコメント欄か、@までお願いします。
不具合報告やご要望などは、GitHubのIssuesへもどうぞ。

「気に入った!」のお気持ちは、ギフト券で!

せっかくのアマゾン用の拡張機能/アドオンなので(笑)、「気に入った」「役に立った」と思われたら、いくらかでも Amazon ギフト券で頂けると、大喜びします!

Amazonギフト券(Eメールタイプ)

  • 受取人メールアドレス:「furyutei@gmail.com」
  • メッセージで何かひとこといただけると嬉しいです


贈り方は、

Amazonギフト券Eメールタイプとは?使い方を写真付で解説

等をご参照ください。

開発経緯

Twitter 上で、




のようなツイートを見かけたことがきっかけです。

もっとも、自分自身は確定申告の経験が無いため、これで役に立つのかどうかは不明です(苦笑)。

オチ


野間美由紀さんはMacユーザーで、Safari を使っていらっしゃるため、Chrome も Firefox も入れていない模様……。
うーん、Safari 用 Tampermonkey を入れればユーザースクリプト版がもしかしたら動作するかもしれないのですが、手元に Mac が無いので試せないのですよね……。
来年……果たしてどうなっていますかねぇ……。
まさか節分過ぎたばかりでもう来年の話をするとは、この拡張機能を作るまでは思いもしませんでしたが(笑)。

覚書を兼ねた独り言

作成中にハマった点など

今回も思わぬところでハマりまくりました……。

  • 領収書専用のウィンドウを開いて、そこに領収書分だけタブを開き、後で全タブ選択して印刷すればできたりしないか?
    →タブを複数選択しても、印刷されるのは現在表示されているページだけだったのでダメ
  • 注文履歴ページを $.ajax() で取得すると、よくわからない(HTMLではない)ファイルが返る
    →リクエストヘッダに X-Requested-With : XMLHttpRequest が含まれると、Amazon から HTML ではない形式で返されてしまう模様
    →crossDomainパラメータをtrueで指定してやるとX-Requested-Withが送られなくなり、HTMLファイルが取得できるようになった(参考1参考2
  • Firefox のアドオン版として動かしたときだけ、$.ajax() によるページ読み込みが失敗する
    →$.ajaxに指定する際、url は相対パスだとだめ("SyntaxError: The URI is malformed."エラー)
    → new URL() で絶対パスに変換して大丈夫になった
  • 注文履歴を取得して表示する際、件数が多いと表示が固まってしまう
    →ブラウザのウィンドウ内で見えない分は非表示にし、スクロールしたときに必要分だけ表示するようにして対応
  • 領収書を $.ajax() 等で取得すると、支払情報等の欄が入っていない(デジタルコンテンツ等の領収書)
    →スクリプトで動的に表示するようになっているらしい
    →裏で(IFRAMEで)開いて、表示が落ち着くまで監視し、落ち着いたら HTML を取得して親ウィンドウに postMessage() で送信することで対応
  • 領収書の数が多いと、ブラウザが固まる・応答しなくなる等の現象が発生
    →領収書の数だけIFRAME作っていたので(開きすぎだよ……)、一定数だけ開き、終わったら使いまわすことで対応
  • 領収書を取得している最中にログイン画面になってしまい、処理が止まってしまう
    →領収書取得開始時にログイン画面を必ず出すようにし、不意のタイミングでログイン画面になってしまうのを抑制
  • アイコン作成が面倒
    →面倒だけど、やるしかなかった(苦笑)
その他に気付いたことなど

関連記事(追記・機能追加のお知らせなど)

furyu.hatenablog.com
furyu.hatenablog.com
furyu.hatenablog.com

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:絵心が無いとかそういう、人間のソフトウェアに依存したどうしようもない理由ではなく