「〇〇人がメモを残しています」にイライラ

Udemy利用者なら、一度は経験したことがあると思います。

メモの箇所をクリックしてしまうと、「〇〇人がメモを残しています」と表示され、ずっと画面に残り続けます（勝手に「メモトラップ」と呼んでいます）。

日本語の動画でも、メモトラップの影響でプログラムが見切れてイライラする事がありましたが、
最近英語の動画を見るようになってから、以下の事象からストレス指数が高くなりました。

英語の字幕が見切れる
英語のものは課題形式（問題を画面に表示してから、「問題が解けるまで動画をストップしてね」形式）が多い
- 解説を飛ばすためにスキップを多用する→メモトラップに引っ掛かる確率が上がる

自分はメモ機能を利用する機会が全く無いので、
Chrome拡張機能を利用して、ページ読み込み時にメモトラップを削除するようにします。

メモトラップを消す方法について

一応ブラウザバックやリロードを行うことで、メモトラップを消すことができますが、間違える度行うのはかなり面倒です（メモトラップは残っている状態のためクリックすると、また表示されます）。

だだ、メモトラップもHTML/CSSで描写されているので消すことができます。
デベロッパーツールで該当のコードを確認すると、以下のように記述されていました。

.html

<textarea id="bookmark-title--〇〇" disabled="" rows="1" style="overflow: hidden; overflow-wrap: break-word; height: 32px;">△△人がここにメモを残しています。</textarea>

毎回デベロッパーツールで該当する要素を削除するのは面倒なので、
Chrome拡張機能を使用して、ページ呼び込み後にメモトラップの要素を削除するようにします。

ファイル構成とコード

ファイル構成.txt

.
└── src
     ├── content.js
     └── manifest.json

content.js

// 動画の読み込み後に処理を走らせるために遅延させている
let deleteMemoElement = setInterval(function () {
  // idが「bookmark-title--」に前方一致する要素を配列で取得
  const SEARCH_ELEMENT = [].slice.call(
    document.querySelectorAll('[id^="bookmark-title--"]')
  );
  if (SEARCH_ELEMENT.length > 0) {
    let eachElementId;
    // 配列を取り出し、要素を削除
    for (let i = 0; i < SEARCH_ELEMENT.length; i++) {
      eachElementId = document.getElementById(SEARCH_ELEMENT[i].id);
      eachElementId.remove();
    }
  }
}, 10000);

window.onload = function () {
  deleteMemoElement;
};

manifest.json

{
  "manifest_version": 2,
  "name": "UdemyMemoDelete",
  "version": "1.0",
  "description": "Udemyの「~人がここにメモを残しています。」を削除する",
  "icons": {},
  "content_scripts": [
    {
      "matches": ["https://www.udemy.com/course/*"],
      "js": ["content.js"]
    }
  ]
}

該当の要素を削除するだけなので、処理や構成は単純で、JSとmanifest.jsonのみの必要最低限の作りとなっています。
（デザインを変更したり、設定画面を表示する場合にはCSSやHTMLのファイルが必要）

manifest.jsonは設定ファイル（利用するファイルの名前や、オプションの利用、拡張機能の説明などを記述）です。
manifest.jsonを知りたい方は、参考の記事に詳しく記述されていたので、そちらをご参照下さい。

利用方法

以下の手順で設定することで、メモトラップの削除が適用されるようになります。
（Chromeウェブストアで公開するためにはアプリを登録する必要があり、現在申請を行い、審査待ちの状況です。）

ファイル構成とコードに記述したコードをコピーして、同様のファイル構成で作成します。
Google Chromeのアドレスバーに「 chrome://extensions/ 」と入力して、拡張機能の設定画面を開いてください。
右上の「デベロッパーモード」がONになっていることを確認します。
画面上部の「パッケージ化されていない拡張機能を読み込む」をクリックして、先ほど作成した「src」フォルダを選択します。

参考記事