TomoProgの技術書

底辺プログラマーが達人プログラマーになるまで

YouTube禁止令を発動してみた

皆さん
こんにちは、こんばんは
TomoProgです。

前回書いたブログが3月20日
今日は4月3日。

久しぶりの更新です。

今週一週間は頑張ろうとか書いた記事は完全に意味が無かったですね。
過ぎたことは流しておきましょう・・・

それはさておき、

今回はChrome拡張機能YouTubeを禁止してみました。

それでは頑張っていきましょう。

Chrome拡張機能を勉強する

まずはChrome拡張機能を自分で作れないと話にならないので、勉強することにしました。

勉強にはドットインストールの動画を使用するのが効果的でした。
http://dotinstall.com/lessons/basic_chrome_v2dotinstall.com

Chrome拡張機能には目的に合わせて4つの機能があるみたいです。

・Browser Action
ツールバーに常駐し、いつでも起動することが出来る
・Page Action
特定のページで起動することが出来る
・Content Scripts
特定のページで自動で実行する
・Context Menu
右クリックメニューから起動することが出来る

これら4つの機能すべてを動画で簡単に説明しているので、動画を一通り見れば簡単な拡張機能は作れるようになると思います。

どんな拡張機能を作るか考える

さて、勉強が終わったところで、どんな拡張機能を作るかを考えてみます。

私が思いついた禁止する方法は、

  • YouTubeのサイトを開けなくする。
  • YouTubeのサイトを開いたときに自動で違うページに飛ばしてしまう。

この2つでした。

今回は後者の機能を実装してみたいと思います。

実際に作ってみる

勉強も終わり、実装したい機能も考えたので、あとは実際に作るだけです。

自動で違うページに飛ばす方法が良く分からなかったので、以下のサイトを参考にさせていただきました。
stackoverflow.com

以下の3つのスクリプトが今回の拡張機能に使用するスクリプトです。

manifest.json

{
    "name": "Stop YouTube",
    "version": "0.1",
    "manifest_version": 2,

    "description": "YouTubeのサイトを開くとGoogleホームページへ飛びます。",

    "permissions":[
        "tabs"
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "content_scripts": [
        {
            "matches": ["https://www.youtube.com/*"],
            "js": ["myscript.js"]
        }
    ]
}

background.js

chrome.runtime.onMessage.addListener(function(request, sender) {
    chrome.tabs.update(sender.tab.id, {url: request.redirect});
});

myscript.js

chrome.runtime.sendMessage({redirect: "https://www.google.com"});

manifest.jsonChrome拡張機能のタイトルなどのメタ情報を書いておくjsonファイルです。

基本的にはbackground.jsに指定したページへ移動させるスクリプトを書いておき、myscript.jsに移動したいURLを記述しておきます。

また、myscript.jsが起動するサイトはmanifest.jsonのmatchesに指定したサイトにアクセスしたときに起動するようにしています。

文章にしてみるとあまり詳しいことは分かっていないことが露呈しますね・・・。

あとは上記の3つのスクリプトを一つのフォルダにまとめて、Chrome拡張機能として追加するだけで、簡単にYouTubeを開いたときにGoogleのホームページに飛ばすことができました。

まとめ

今日はChrome拡張機能を自作してみました。

これでYouTube生活からおさらば出来ると信じています。

拡張機能をOFFにしなければ・・・

それではまた。

TomoProg

GitHub
TomoProg (TomoProg) · GitHub

Twitter
TomoProg (@tomoprog_xxx) | Twitter