Teamsの詳細表示をクリックするEdge/Chromeの拡張機能

はじめに

Teamsでは、長い投稿があると次のように折りたたんで表示されます。

これを「常に詳細表示にするという動作と、ユーザーごとの設定を追加してほしい」という要望は以前から出ているもののなかなか実装されません（というか、UserVoce自体なくなってしまいました😢）。今回はEdgeとChromeの拡張機能としてTeamsの詳細表示が表示されたら常に展開する機能を実装してみます。

方針

詳細表示ボタン付近のHTMLは次のようになっているようです。詳細ボタン(ts-see-more-button)をクリックすると、see-more要素のclass属性にexpandedが付与されるようです。
雰囲気、画面上に詳細ボタン(ts-see-more-button)が表示されたら、このボタンを自動的にクリックし、ボタン自体を消してしまえば常に詳細表示された状況になりそうです。

詳細ボタンクリック前のHTML

詳細ボタンクリック後のHTML

詳細表示

ということで、ts-see-more-foldを探して、クリックして、ボタンを消す処理を3秒ごとに呼び出す処理をcontent_script.jsに組み込んであげます。

content_script.js

function expansionDetailViews() {
  const elem = document.getElementsByClassName("ts-see-more-fold");
  if (!elem) return;

  Array.from(elem).forEach((e) => {
    e.click();
    e.outerHTML = "";
  });
}
setTimeout(async () => {
  while (true) {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    expansionDetailViews();
  }
});

展開されて、詳細表示、簡易表示ボタンそのものが消えてくれましたね。

おわりに

ブラウザーの拡張機能と同じようにTeamsの表示も拡張できる機能が欲しいなぁ
というか、UserVoiceどこ行った！？