はてなブックマークは好きだけどあまり目にしたくないエントリもあるので、iPhone/iPadのSafari用NGフィルタ機能拡張を作った。

Genki Sugawara
ユーティリティ
無料

apps.apple.com

ChromeやFirefoxの拡張はすでにいくつか存在する。

anond.hatelabo.jp

しかし普段使っているiOSのSafariは作り方がやや特殊なせいかまだなかったので自作した。といっても基本的にはWeb Extensionsなので、Chrome拡張の作り方がそのまま流用できる。

iOSのSafariの場合、ネイティブアプリにバンドルされる形で機能拡張がインストールされるのでXcodeが必要になるが、New > Project > Safari Extention Appでプロジェクトを作って各種js、manifest.jsonを修正したらほとんどの実装は完了した。

雑感

はてなブックマーク、ヘッダのエントリだけdivのclassが違ったり遅延して表示されるエントリがあったりと、ユーザースクリプトだけでカバーするのは結構厳しそうな感じがした
- 遅延表示エントリについてはchrome.tabs.onUpdated.addListenerでも消せなかったので、画面を表示してから3秒間は走査しつづけるという力技で対応した
キーワードの保存にはchrome.storage.local.setを使っている。
- content.jsからネイティブアプリに通信することは可能なので、SwiftData+iCloud同期で端末間の設定を共有することはできると思うがそこまでやっていない
iPhoneとiPadでポップアップのレイアウトが違いすぎる
- 「divでmarginとmin-widthを設定して〜」みたいなことを久々にやった
デバッグがややめんどい
- 母艦であるMac miniでWebデベロップ機能を有効にしたSafariを立ち上げてiOSのSafariに接続する
- jsファイルの編集はVSCodeでやっていたので、VSCode・Xcode・母艦のSafari・iOSのSafariを行ったり来たりしていた
- しかもポップアップを閉じるとポップアップ用のWeb開発コンソールは閉じてしまうので、console.logを確認するのもめんどくさかった
機能拡張そのものの話ではないけれど、ネイティブアプリの画面から設定画面を開くためのURLスキームを探すのがめんどくさかった

*1:シミュレーターだとポップアップのレイアウトがおかしくなる

so what

iPhone Safari用のはてブNGフィルタ機能拡張「はてブフィルター」を作った

雑感