ネットニュースのコメントをみると

あの○○のニュース見たくないんですが、この記事だけ見えなくする方法てありませんか??
サムネ写真見るだけでもイライラするので…

こんなコメントがあります。そこで指定した単語を非表示にするアドオンを作ることにしました。

みんなよろこべ。
俺が登録したNGワードを含む文やリンクを非表示にするアドオンをつくってやったぞ。

嬉々としてコメント返ししたのですが、なんと予想に反して(予想通り?)低評価の嵐です。
結局みんな○○のことが好きなんじゃね?

冗談はこれくらいにして作成することにします。

まずmanifest.jsonというファイルを作成して以下の書きます。

manifest.json

前回との違いは非表示にするキーワードを指定するための設定ができるようにするためにoptions.htmlを用意していることです。options.htmlは以下のようにします。

除外したいキーワードとそれをどんな文字に置き換えるか、このアドオンが動作しているときはそれが一目でわかるようにページが色つきの枠で囲われるようにします。枠で囲うだけなら前回のFirefoxのアドオンをつくって公開してみるを流用することができそうです。

options.html

設定を保存したり読み出す処理はJavaScriptでおこないます。

SaveボタンがクリックされたらSaveOptions関数が実行されます。そして設定欄に入力した文字列がストレージ内に保存されます。

options.js

また設定のページが読み込まれたら保存されているデータを読み出して、現在どのような設定がされているか確認できるようにします。ここでは保存されているデータをテキストボックスに表示させているだけです。ただし除外するキーワードは改行区切りとし、空白行は除外します。

RestoreOptions関数は”color”、”keywords”、”aftertext”をストレージに保存します。

options.js

RestoreOptions関数内で呼び出されている関数を示します。

options.js

次にネットサーフィン時に設定されているキーワードを含む文とリンクを非表示にする処理を示します。manifest.json内にある”hide-ng-words.js”部分です。

ここではストレージから”color”、”keywords”、”aftertext”を読み出してグローバル変数に格納しています。最後に後述する自作関数 HideNgWords関数を呼び出しています。

hide-ng-words.js

自作関数 HideNgWordsはページにcolorで指定された色の枠をつけます。そしてkeywordsを改行で区切って配列に変換してからこれらの要素を含む文やリンクを非表示にしています。

hide-ng-words.js

HideNgElements関数を示します。第一引数で渡された要素の配列のなかに第二引数で渡された文字列の配列の要素のどれかが一致する場合、その要素をaftertextで置き換えます。

hide-ng-words.js

OnError関数はエラー時にそれをコンソールに表示させるためのものです。

hide-ng-words.js

Firefoxユーザー 動作確認用