C-MOON

主にプログラミング勉強中のメモを書いていきます。

情報技術者試験 過去問道場で解説が半透明になるのを防ぐ拡張機能

前回、 応用情報技術者過去問道場|応用情報技術者試験.com で解説が半透明になり見えにくくなる問題の原因を調査しました。

thenewsinpu.hatenablog.jp



今回は、解説が透明になるのを防ぐブラウザ拡張機能(アドオン)を開発してみます。

開発は、Firefoxで行います。

拡張機能の開発は以下のページを参考に行います。

developer.mozilla.org

1. ディレクトリの作成

任意の場所に任意の名前のディレクトリを作成します。

今回は、デスクトップに「KakomonDontOpacity」という名前のディレクトリを作成しました。

2. manifest.jsonを作成

作成したディレクトリ「KakomonDontOpacity」内に「manifest.json」ファイルを作成し、以下のように記述します。

{
    "name": "KakomonDontOpacity",
    "description" : "過去問道場で解説が透明になるのを防ぎます。",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts":[
        {
        "matches":["*://www.ap-siken.com/*", "*://www.db-siken.com/*", "*://www.nw-siken.com/*"],
        "js":["kakomon_dont_opacity.js"]
        }
    ]
}


"content_scripts"配列内の"matches"では、対象となるURLを選択できます。
今回は、「応用情報技術者試験.com」「データベーススペシャリスト.com」「ネットワークスペシャリスト.com」を指定しました。

3. kakomon_dont_opacity.jsの作成

ディレクトリ「KakomonDontOpacity」内に「kakomon_dont_opacity.js」ファイルを作成し、以下のように記述します。

var insertText = '<ins class="adsbygoogle">abc</ins>';
document.body.insertAdjacentHTML('afterbegin', insertText);


前回の記事で調査した通り、情報技術者試験 過去問道場ではinsタグでadsbygoogleクラスの1つ目の要素の文字数が0のとき解説を半透明にする処理を行っていました。

「適当な文字を入れたinsタグでadsbygoogleクラスの要素」をbodyタグ先頭に追加すれば、上記条件に引っかからなくなります。

【2018/05/16 追記】
過去問道場の半透明化処理の条件式が変更されていました。
上記処理では半透明化を防げません。
以下のソースに変更してください。
詳細はこちら

var ads = document.getElementsByClassName('adsbygoogle');

for (var i = 0; i < ads.length; i++){
    ads[i].innerHTML = 'abc';
}

4. インストール

"about:debugging" を Firefox で開いたら "一時的なアドオンを読み込む" をクリックし、アドオンのディレクトリにあるファイルをどれか 1 つ選択します。

5. テスト

μBlock等のコンテンツブロッカーを有効にします。
次に、応用情報技術者過去問道場|応用情報技術者試験.com にアクセスし、解説を表示させます。
解説が透明になっていなければ、成功です。
f:id:thenewsinpu:20180507005323p:plain

今回は以上です。