侍エンジニアの広告を自作Chrome拡張機能で消す

6044 ワード
Chrome jQuery 拡張機能 Chrome テキストリンク

作成経緯

侍エンジニアの記事にはうんざりしてしまっていることだろう。
そして、検索から侍エンジニアを消す...

本当にそれでいいのか？

個人的に初級者にはわかりやすい内容になっていると感じる。

「広告なしで必要な部分だけ見たい...」

というのが率直な気持ちだ。
@thr3aさんの以下の記事を見つけた
爆速でChrome拡張機能を作成する
これを使えばCSSを書き換えて、いい感じの情報閲覧サイトへ変えられそう！

概要

Sarumrai Blocker
github上に置いてあるコードをChromeに読み込ませれば終わりだが、簡単に何をやっているのか説明していきたい。
contentscript.jsをちょっと書き換えているだけで、jQueryの基本さえわかればすぐできる。
chrome拡張機能については爆速でChrome拡張機能を作成するを見るべし。

$(function () {
    //jQueryでCSSを変更する
    $('.main-header').remove();
    $('header').html('<h1>さむらいえんじにあ!</h1>');
    $('aside').remove();
    $('div.header-sticky').remove();
    $('footer').remove();
    $('.fade-in').remove();
    $('.eye-catch-content-wrapper').remove();
    $('.mbt-border-top').remove();
    $('.vce-related-box').remove();
    $('.p-entry_push').remove();
    $('.wp_social_bookmarking_light').remove();
    $('blockquote').remove();

    var id = Number.MAX_SAFE_INTEGER;
    $('#text,span,p,h5,div,ul,a').html(function (index, element) {
        if (element == 'まとめ') {
            id = index;
        }
        if (index >= id) {
            return '';
        }
    });
});

まず、.remove()して不要な要素を削る。
侍エンジニアのサイトがwordpress使ってコーディングサボっていて、要素がついていない部分があるので、そこが指定しにくい。
共通して"まとめ"というワードの下に不要な情報が突っ込まれているので、"まとめ"以下の記述を表示させなくする。しかし、何も囲まれていないテキストがちょっとあるので完全に消せはしない...

あとがき

もっとやり方があると思うし、アップしたコードも全然改善の余地があると思う。
これから、うざいサイトを見つけたらどんどんいい感じに加工していきたい。