はじめに

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 = [
  "&#x2665;&#xFE0F;", 
  "&#9824;&#65039;",
  "&#9827;&#65039;",
  "&#9830;&#65039;"];
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の拡張機能に触れつつ、勉強に疲れたときの息抜きが増えるのはいいですね。
ありがとうございました。もう使いません。

wikiを読むのが憂鬱だったのでヒソカに読んでもらった

はじめに

完成物

作り方

ファイル構造

manifest.json

script.js

課題点

おわりに