xvideos閲覧時に強制的にサザエさんのキャラクター紹介ページに遷移させるchrome拡張を作りました

こんにちは、ニート(@emono_dev)です。
タイトルの通りxvideos (会社やカフェでの閲覧注意) を見た際に、サザエさん公式ホームページのキャラ一覧ページに強制的にリダイレクトするxblockというchrome拡張を作成しました。
禁欲したい男性陣は是非使ってみてください。

chrome拡張作ったのは初めてで手探りだったのですが案外とさっくりできました。
リリースまでの流れを備忘録的な感じでメモしたいと思います。

実施したかったこと

めっちゃシンプルです。

• https://www.xvideos.com/* のページかどうか判定する。
• 判定にかかっていたら、サザエさん公式ホームページのキャラクター紹介ページにリダイレクトする。

以上です。ソースコードはこちら

公式ドキュメントとか参考にしたページ

https://developer.chrome.com/extensions です。
これ見ればだいたいわかります。
以下も参考にしました。
https://qiita.com/mdstoy/items/9866544e37987337dc79
https://qiita.com/guru_taka/items/37a90766f4f845e963e5

フォルダ構成

今回の拡張は以下のフィルダ構成です。viewがなければだいたいこんな感じになるのかなと思います。

manifest.json
main.js
icons
|--icon_128.png
|--icon_32.png
|--icon_48.png

各ファイルについて

manifest.json： 各種設定を書く必須ファイル(名前・説明・バージョン)
main.js: 実行するスクリプト
png: アイコンのファイル

マニュフェストファイル

必須な設定ファイルです。
https://qiita.com/mdstoy/items/9866544e37987337dc79 を参考にしました

manifest.json

{
  "manifest_version": 2, // 最新版が2
  "name": "xblock",  // 名前
  "short_name": "xblock", // 略称
  "version": "1.0.0", // バージョン
  "description": "xvideos redirect for japanese anime(sazaesan)", // 説明
  "icons": { // アイコン
    "32": "icons/icon_32.png", // アイコンの相対path
    "48": "icons/icon_48.png", / アイコンの相対path
    "128": "icons/icon_128.png" // アイコンの相対path
  },
  "content_scripts": [
    {
      "matches": [ // urlが以下の場合に
        "https://www.xvideos.com/*" 
      ],
      "js": [
        "main.js"　// main.jsを実行する
      ]
    }
  ]
}

実行するスクリプト

ファイル名は、 manifest.json で定義した名前

main.js

document.OnLoad = start();
// リダイレクトする
function start() {
  location.href = "http://www.sazaesan.jp/charactors.html";
}

動作確認してみる

• chrome://extensions/
• パッケージ化していない拡張機能を読み込み クリック
• 該当のディレクトリの選択

リリースする

• https://chrome.google.com/webstore/developer/dashboard
• developerアカウント登録(初回登録: $5)
• zipでフォルダを固めてアップロード

最後に

えぇ――――っ!!
xvideos見るとか暇人なのかい――――っ!!