5
0

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 1 year has passed since last update.

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

Last updated at Posted at 2022-07-17

はじめに

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);
}

課題点

  • めっちゃ重い
    ページ読み込み時に一括で変換してるので、句読点数に比例して処理が走ります。
    このため、長いページになると一時的に固まるなどの弊害が出てしまいました。image.png
    自分が出てるタイトルのページで固まってて恥ずかしくないんか?

  • ページ更新に弱い
    ページ読み込み時の一回のみ処理を行っているため、urlにカーソルを合わせると出るポップアップなど、動的に変化する部分に対応してません。イベントを拾えば実装できそうですが、癪なので忙しい身の上なのでやりません。

おわりに

chromeの拡張機能に触れつつ、勉強に疲れたときの息抜きが増えるのはいいですね。
ありがとうございました。もう使いません。

5
0
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
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?