7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

N高等学校 (1)Advent Calendar 2020

Day 9

N予備校の拡張機能作成のすゝめ

Last updated at Posted at 2020-12-08

この記事は、N高等学校 (1) Advent Calendar 2020 9日目の記事です。

はじめに

はじめまして"N予備校を自分好みにカスタマイズするだけして勉強やらない人"です。
N高等学校の5期生でピチピチの一年生です。
※ この記事はレポートの日程を考えないでadvent calenderに申請した人が書いています。
内容が雑かもしれませんがよろしくおねがいします:pray::pray::pray:

今回書くこと

今回はN予備校の大雑把にですがいちからN予備校の作る方法や
知っておくと便利な事を書いておこうと思います。
具体的にこんなのが作れます(露骨な宣伝)
※Chromeの拡張機能の基本的な作り方は省きます。

作り方其の一

https://www.nnn.ed.nico/courses/*/chapters/*
のページにcontent_scriptを適用したい場合
これは簡単ですね。

manifest.json
{
	/* 省略 */
	"content_scripts": [{
		"matches": ["https://www.nnn.ed.nico/courses/*/chapters/*"],
		"js": [
			"content_script.js"
		]
	}]
}

manifest.json の content_scripts の matches にURLを入力するだけです。
工夫が必要になってくるのは次からです。

作り方其の二

レポートやテストのページに適用したい場合
レポートやテストのページはiframeになっているのでmanifest.jsonに一項目追加しなければなりません。
URLはhttps://www.nnn.ed.nico/contents/courses/*/chapters/*/*/* で

manifest.json
{
	/* 省略 */
	"content_scripts": [{
		"matches": ["https://www.nnn.ed.nico/contents/courses/*/chapters/*/*/*"],
		"js": [
			"content_script.js"
		]
		// 追加
		"all_frames": true
	}]
}

all_iframes: trueを追加することでiframeで読み込んだときも適用されるようになります。

作り方其の三

動画ページに適用した場合 ※ズルはしちゃダメヨ!単位剥奪がまってる!!
動画ページも上同様iframeなのですが
何故か動画ページだけ複数URLあるので虱潰しで記述しないといけないです。
私が知ってるURLは以下です

manifest.json
{
	/* 省略 */
	"content_scripts": [{
		"matches": [
				"https://*.tokyo-shoseki.co.jp/*",
				"https://www.nnn.ed.nico/contents/links/*",
				"https://www.nnn.ed.nico/contents/courses/*/chapters/*/movies/*",
				"https://cdn.fccc.info/*"
		],
		"js": [
			"content_script.js"
		]
		// 追加
		"all_frames": true
	}]
}

誰かURL一覧まとめてください☆(他力本願寺)

その他tip

私は勉強しないで拡張機能を作ってるときに気づいた便利そうなものおいておきます。

いろんなデータを取得する

https://www.nnn.ed.nico/courses/*/chapters/*
には理由はわかりませんが其のページの教材のデータがjsonで記述されています。
それを使って色々拡張機能作れると思います。

const data = JSON.parse(
	document
		.querySelector('div[data-react-class="App.Chapter"][data-react-props]').dataset.reactProps
)

データの中身は貼っていいものなのかわからないので貼りませんが
上のコードで取得できます。
reactがわからないので何であるかはほんとにわかりません。
教えて強い人!!

終わりに

以上レポートがまだあるのに考えなしにadvent calenderに
申し込みして初めて書いたQiita記事です。

見にくい点、誤字脱字があったらぜひご指摘お願いします:pray::pray:

それとそれと

ここで宣伝(ゴホンゴホン)皆様のレポート活動を潤滑に進めれるように
作成した拡張機能を紹介させていただこうと思います。

文字数カウンタ
github
これは単純に文字数をカウントしてくれるものになります。

ボリュームセッター
こちらは動画の音量を保存して毎回適用してくれるようにする拡張機能です。

読みにくいを記事最後まで読んでくださりありがとうございました:pray::pray:

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?