意外と簡単なのでGoogleChromeの拡張機能を作ってみました

昔難しいChromeの拡張機能を作ろうとして挫折しましたが、あるプログラミングスクールの記事にアクセスした瞬間にブラウザバックするという機能でしたら意外と簡単に実装できました。

［1番簡単な作り方］

・main.js
・manifest.json
の２つのファイルを何かしらのフォルダに入れてください。

main.jsはメインのプログラム、manifest.jsonが設定ファイルです。

［manifest.jsonの設定例]

manifest.jsonの設定の必須項目は３つです。
「manifest-version, name, version」
この3つは必ず必要です。
また、manifest-versionはたまにバージョンアップします。
現在の時点では3に設定すればokです。

その他のパラメータの意味や設定方法は以下が参考になりました。

Chrome拡張の作り方 (超概要) - Qiita

MDN Web Docs

以下設定例

{
	"name" : "SchoolBlocker",
	"version" : "0.0.1",
	"manifest_version" : 3,
	"description" : "PGSCHOOL IS BLOCK!!",
	
	"content_scripts" : [{
		"matches" : ["URL"],
		"js" : [
			"content.js"
		]
	}]

}

［main.js］

動かすだけなら組み込みオブジェクトが1番簡単に試せると思います。
window.alertとか。
記載例。

window.onload = function() {
	
	history.back();
	
};
	

機能を説明するまでもないのですが、ドメイン名＋*で某プログラミングスクールの解説記事をブロックしちゃう、という目的で作りました。
今のところはどうやって複数のサイトをブロックしてやろうか悩んでいます。
右クリックから嫌いなサイトはブロック。
ブラックリストに入ったサイトは検索結果からも除外されるようにしたいです。
Githubの勉強もしたいのでリポジトリを作ってアプデしていこうかなと思っています。

ちなみにuBlacklistという拡張機能が私がやりたいことを全部実現してる気がします。

［オリジナルの拡張機能を使う方法］

chromeのURL欄に「chrome://extensions/」を入力すると拡張機能の設定画面に入り、デベロッパーモードがONにできます。

すると設定画面が生えてくるので「パッケージ化されていない拡張機能を読み込む」から最初に作成したフォルダを指定すると、main.jsもmanifest.jsonも読み込まれて、オリジナルの拡張機能が使えます。

私のここに載せているスクリプトも「URL」の部分を適当なURLに変更すれば動くことを確認しています。

とりあえず、昔はjsonという言葉だけで逃げてたけど動かすことができました！！