初めてchromeの拡張機能を作ってみた話

光栄なことにAdvent Calenderをやるから書かないかと誘っていただいたはいいものの、ネタに困っていた新卒が初めてchrome拡張機能を作る記事です
内容はとても薄いです

このchrome拡張機能をつくってみた背景

昔はよく顔文字に使われていたキリル文字ですが、最近はホモグラフ攻撃¹に使用されているそうです(ﾟДﾟ)

上記の画像はまったく同じURLに見えますが片方にはキリル文字の"і"が含まれています
これを肉眼で見分けられる人はいないと思います

そしてそのようなサイトがGoogleの広告枠を購入することで検索結果の上位に表示されてしまいクリックしてしまうということです
詳しくはこちらの記事を参考にしてください link

実装内容

フォルダ構成

append_test
|
|- manifest.json
|- content_script.js

各ファイルの役割

• manifest.json
  • 拡張機能の情報や説明を書きます、ファイル名は固定で必ずmanifest.jsonで作ってください
• content_script.js
  • webページに付け加えるスクリプトをここに書きます

manifest.json

{
  "name": "url_checker",
  "manifest_version": 3,
  "version": "0.1",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content_script.js"]
  }]
}

以上がmanifest.jsonの中身となります、一つ一つ見ていきましょう

name

このchrome拡張機能の名前を決める項目になります、好きな名前で問題ありません

manifest_version

このmanifestファイルがどの形式で書かれているかを示すものになります、現行は3なので3にしましょう

content_scripts

どのサイトにアクセスしたときにどのスクリプトを実行するかを決めるところになります
今回は全てのサイトでcontent_script.jsを実行しています

content_script.js

document.onselectionchange = function() {
  let text = window.getSelection();
  var regex = new RegExp(/[^(\w!?:/+\-_~=;.,*&@#$%()'[\]ぁ-んァ-ヶｱ-ﾝﾞﾟ一-龠\t\s\n　、。（）「」・<>› - ー【】—？！)]+/)
  if (regex.test(text)) {
    console.log('match: ' + text);
    alert("不適切な文字が含まれています");
  }
}

以上がcontent_script.jsの中身です

流れとしましては気になるurlを以下のように選択します

ドラッグし、青くハイライトされた部分がコードでいうtextに入ります
その後regexで定めた正規表現を用いてマッチするか判定をするといった流れになります

選択範囲内に変な文字が含まれていた際にはアラートが出ます

まとめ

URL部分のみを選択しないと不適切な文字が入りやすいですが、URL部分のみを選択するのがなかなか現実的ではないので流石にもっとスマートな方法を考えればよかったなぁといった感想です

ただchrome拡張機能を初めて作ってみましたが、ここまで簡単にできるとは思っていませんでした
何か日ごろの不便を感じる部分があればぜひ作ってみてください

1. ホモグラフ攻撃: あるサイトのURLと見た目が酷似している文字を用いることで偽のサイトに誘導する攻撃 ↩