Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

作成経緯

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

本当にそれでいいのか?

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

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

というのが率直な気持ちだ。
@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使ってコーディングサボっていて、要素がついていない部分があるので、そこが指定しにくい。
共通して"まとめ"というワードの下に不要な情報が突っ込まれているので、"まとめ"以下の記述を表示させなくする。しかし、何も囲まれていないテキストがちょっとあるので完全に消せはしない...

あとがき

もっとやり方があると思うし、アップしたコードも全然改善の余地があると思う。
これから、うざいサイトを見つけたらどんどんいい感じに加工していきたい。
スクリーンショット 2019-02-11 16.43.25.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした