Help us understand the problem. What is going on with this article?

LGTMをくれた人のプロフィールページに通知一覧から飛びたいので4行でChrome拡張作った。

何を作ったの?

通知一覧 - Qiita もしくは、上メニューの通知欄で、通知に表示されている人のアイコンから、その人のユーザーページに飛ぶためのChrome拡張です。

imgタグ以外の場所をクリックすると、従来どおり「LGTM(やストックやコメント)がついた記事」に飛べます。

なぜ作ったの?

自分の記事にLGTMやストックをしてくれた人がどんな記事を書いてるか知りたいのに、通知機能から一発で記事一覧に飛べなくてめちゃくちゃイライラしたからです。私はQiitaにポケモン関係の記事を投稿しているのですが、読者数が他の記事に比べて多くないので、ポケモン記事に何らかのアクションをしてくれた方の記事は特に読みたいです。
今のUIだと、「LGTMがついた記事に飛ぶ」->「LGTM欄をクリック」という動線になってしまうのと、ストックに至ってはユーザー名直打ちしか方法がなさそうに見えます。

どうやって作ったの?

正攻法で、content scriptで通知一覧ページにあるimgのouterHTMLを編集しました。ユーザー名はaltから取得可能です。きれいなHTMLなので編集しやすくて良いですね…。

const targets = document.querySelectorAll(".notification_icon > img");
targets.forEach((target) => {
  target.outerHTML = `<a href="https://qiita.com/${target.alt}" target="_top">${target.outerHTML}</a>`;
});

この方法の良いところは、imgタグ以外の場所をクリックすると、従来どおり「LGTM(やストックやコメント)がついた記事」に飛べる点です。

上部メニューの通知欄については、 https://qiita.com/notifications?iframe=1 をiframeで表示しているため、manifest.jsonに"all_frames": trueが必要です。
manifest.jsonは以下のように書きました。

{
  "name": "Qiitaで自分に通知した人のユーザーページに飛ぶやつ。",
  "description": "Qiitaで自分に通知した人のユーザーページに飛ぶための拡張です。",
  "version": "0.1",
  "content_scripts": [
    {
      "all_frames": true,
      "matches": [
        "https://qiita.com/*"
      ],
      "js": [
        "script.js"
      ],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

所要時間は15分程度でした。この記事を書くほうが時間がかかっています。
Chrome Web Storeに乗せるまでが筋かなと思ったので、登録して現在審査待ちです。

まとめ

  • Chromeの拡張はすぐ作れる。ドキュメントもわかりやすい。
  • querySelectorAllは便利。
  • Qiita夏祭り2020_Qiitaの記事数6つしかなくてびびった。(2020/07/13 20時現在)
retrorocket
Perlが好きだったが最近の衰退っぷりから別の言語を使い始めたほうがいいのではないかと悩み始めた。
https://retrorocket.biz
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした