はじめに
wikipedia、読んでますか?
どうも。
最近資格試験にフォーカスしているのですが、wikiを含め難しい記事を参照する機会が増えてきました。
wikiの文って読んでればわかるんですが、
- 長い
- 難しい
- 息苦しい(見やすさのための改行とかない)
って感じでバカほど読みづらいんですよね。
斜め読みマスターの私から申し上げれば非常にめんどくさいです。
ということで、ヒソカさんに読んでいただきました。
完成物
作り方
備忘録も兼ねて作り方を残しておきます。
ファイル構造
script_name
├ manifest.json
└ script.js
manifest.json
{
"name": "hisoka_wiki",
"action": {},
"manifest_version": 3,
"version": "0.1",
"description": "wikiを、読むよ...♠",
"permissions": [
"activeTab",
"scripting"
],
"content_scripts": [{
"matches": ["https://ja.wikipedia.org/*"],
"js": ["script.js"]
}]
}
特筆すべきはcontent_scripts
の部分。
-
matches
-> スクリプトが反映されるurlの指定 -
js
-> スクリプトファイルの指定
と言ったかんじ。
script.js
実装要件は以下の通り
- HTML内部から「句読点(。)」を探し出す
- 句読点を「❤、♠、◆、♣」のいずれかに置き換える
- ついでに記号の前に三点リーダー(...)をランダムに付ける
let trump_marks = [
"♥️",
"♠️",
"♣️",
"♦️"];
let dot = "";
let str = "";
while(document.body.innerHTML.includes("。")) {
dot = (Math.random() > 0.5) ? "..." : "";
str = `${dot}${trump_marks[Math.floor(Math.random() * trump_marks.length)]}`;
document.body.innerHTML = document.body.innerHTML.replace("。", str);
}
課題点
-
めっちゃ重い
ページ読み込み時に一括で変換してるので、句読点数に比例して処理が走ります。
このため、長いページになると一時的に固まるなどの弊害が出てしまいました。
自分が出てるタイトルのページで固まってて恥ずかしくないんか? -
ページ更新に弱い
ページ読み込み時の一回のみ処理を行っているため、urlにカーソルを合わせると出るポップアップなど、動的に変化する部分に対応してません。イベントを拾えば実装できそうですが、癪なので忙しい身の上なのでやりません。
おわりに
chromeの拡張機能に触れつつ、勉強に疲れたときの息抜きが増えるのはいいですね。
ありがとうございました。もう使いません。