ブラウザ拡張作成時のメモ
何の因果かブラウザ拡張を作ったので、忘備録としてのメモ。
https://github.com/tailpiece/colored-glassescontent_scriptsは、機能によっては、いらないはず
最近chrome拡張を提出する際に「content_scriptsで"matches": [ "http://*/*", "https://*/*" ],している機能拡張は、審査に時間がかかるよ。」と、何度もアラートを出してくれます（実際、時間がかかります）。
例えばこれは、content_scriptsで書き出すJaavscriptに、直接（addListenerしてイベントを監視するのではなく、ダイレクトに）下記を記載すると、
const aTag = document.getElementsByTagName('a');
for (let i=0,l=aTag.length; i<l; i++) {
let href = aTag[i].getAttribute('href');
if (/^http/.test(href)) {
console.log(href);
}
}ユーザーが何もしなくても、ページにアクセスするだけで。
こんな感じでコンソールが出るようになります。
（※そもそもこんな状態で申請したらリジェクトされそうですが・・・）
なので、やろうと思えば、現在のページURLと、例えばinputの値全てをname付きで拾って、jsonでまとめて関係ないサイトに勝手に送信する。みたいなことも、やろうと思えば出来てしまうわけです（すぐバレると思いますが）。
・・・むしろ、機能拡張を入れまくっているブラウザが重くなる原因の１つはコレなんじゃ？という気さえしてきます。
（JSを２～３ファイル読み込んだところでタカが知れていますが、全タブに自動で加えるとなると、ちりも積もってるんじゃないかなと・・・）
activeTabを使おう
ブラウザの機能拡張次第（例えば広告ブロックとかは自動適用のほうが良い）ではありますが、
「機能拡張をクリックするまでは、ページに何もアクションしなくても問題ない」場合、
content_scriptsそのものの利用は止めて、activeTabを使ったほうが、良いかもです。
manifest.json
例えば、content_scriptsが下記の場合、
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["content/gradientmaps.min.js", "content/content.js"]
}
],上記は削除し、代わりに、permissionsのactiveTabをリクエストする
"permissions": [ "activeTab" ]
Popup用のJS
例えばcontent_scriptsに対してqueryを送っていた場合（ここまではactiveTab不要）
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, msg);
});と記載していた個所を、こんな感じにすると、うまくいきます。
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
// content_scriptsで書き加えていたJSを、開いているページに書き出す（activeTabが必要）
chrome.tabs.executeScript(tabs[0].id, {
file: "/content/addGradientMaps.js"
});
chrome.tabs.executeScript(tabs[0].id, {
file: "/content/content.js"
});
// 上２つの追加が完了する前にsendMessageが行われると1回目が失敗するので、少し待つ
setTimeout(() => {
chrome.tabs.sendMessage(tabs[0].id, msg);
}, 100);
});※上記のchrome.tabs.queryを行うたびに書き出されるので、書き出すJSには「自分自身の重複登録確認」を行うほうが良いかも。
（sendMessageした内容が、何度も実行されるのを回避する）
ブラウザ拡張 作成時の雑感
１ブラウザぶん作れば、他に流用できる
chromeで作成すると、ほぼ、そのまま、edgeとfirefoxの機能拡張としても利用可能になります。
・・・ただし。
例えば、input.colorは、firefoxだとOS標準のカラーピッカーを呼び出すので、ブラウザ拡張のPOPUPが強制的に閉じられる（閉じられてしまうので、POPUPの編集内容は その時点で失われてしまう）など、ブラウザごとの細かい仕様の違い は、どうしても発生します。
webpackでパッケージしないほうがいい
これだけで審査が長くなります。
※webpackしている場合、firefoxはソースコードの提出が求められます。
もし、どうしても、webpackを使いたい場合は、presetsをminifyにしましょう。
それ以外のプリセットやオプション（難読化など）は、chromeでリジェクトの対象になるようです。
firefoxの審査は、滅茶苦茶早い
言い換えれば、chromeは滅茶苦茶しっかり見てくれる、という事でもありますが。
機能やタイミングにもよりますが、自分の場合は、こんな感じでした
| ブラウザ | 1回の審査にかかった日数 |
| firefox | 1日 |
| edge | 2日 |
| chrome | 5日くらい |
※審査は、バージョン更新毎に行われます。
firefoxはソースコード自体を提出していますが、それが速度向上に繋がっているのであれば。
ぜんぜん、いくらでも出しますとも！！！
逆にchromeは、時間かかってリジェクトかけてくるので、なんというか、
がっつり心をへし折ってきます。
もう技術者やだ。転職したい。
こんな単純拡張に、どんだけ時間かけさせるんだよ、この野郎・・・。という感じ。
（なんか気づけば結局1か月くらいは掛けてしまっている気がします・・・恐ろしい。）
可能であれば、機能は単純にしよう
説明に書いてある機能だけを提供しよう。
作った拡張機能は、当初、「某SNSサイトでは、なるべく表示が崩れないようにしよう」と、下記の処理を加えていたのですが。
- mainタグがあったら mainタグに対してのみ適用する
- 上記はポップアップした内容に影響できないので、さらに特定のIDがあったら、特定のDIV構造に対してstyleが当たるように、CSSを書き加える
- canvasタグがあったら canvasタグに対してのみ適用する（1よりも優先）
googleから返ってきた審査結果は、
デベロッパー様が最近提出されたアイテムが残念ながら却下されたことをお知らせいたします。詳しくは下記をご覧ください。
違反事項:
説明に表記されている機能を提供していない。
最初このメッセージを見た時は、正直「？？？」だったのですが、
その時に説明に表記していた内容は、こちら。
見ているページ全体を、色眼鏡を通して金や銀、chocolate mintに染めます。
確かに、mainタグやcanvasが存在する場合、ページ全体に対しては変化しない。って事なんですよ。
（いや、まあ、正直「面倒くせえええ」とは思ったよ？）
さらに、バナー等でcanvasが存在した場合、画面はごく一部しか変わらない（下手したらcanvas自体が非表示になっていて、全く変わらない）事もあり、指摘されている内容はごもっとも。という事で。たまたまチェックに使われたサイトで当たらなかったっていうだけでもあるのですが・・・。
なので、ページがCSS filterの仕様で一部崩れようが、関係なく。
bodyタグにガッツリ当てて、ほぼ全サイトに適用されるように機能を単純化しました。
とりとめもなくおわる。