機能
@Qiita のユーザーページでプロフィールアイコン画像をクリックすると
user:Qiita
が入力済みの検索画面へ移動する。
(赤枠は編集追加)
動機
良い記事を見つけて、そのユーザーのその分野の記事をもっと見たい!と思ってユーザーの記事画面 https://qiita.com/Qiita/items (itemsはもうないのですが) に飛ぶものの、時系列で並ぶだけで投稿数とジャンルが多彩な方の場合は目的の記事を探すことが難しいです。
最初からフリーワード検索をすればいいのですが、
どうしてもそのユーザーの記事を探したいときの行動がユーザーページ訪問、と身についてしまっていることと、
ユニークなユーザー名の入力が苦手なので入力補助的な意味合いで作成。
動作検証環境
- Firefox 64bit 66.0.5
- Tampermonkey v4.9.5921
コード
// ==UserScript==
// @name Qiita add search user items link to profile icon
// @namespace http://tampermonkey.net/
// @version 0.1
// @description ユーザーページのアイコンをそのユーザーの記事検索へのリンクにします
// @author khsk
// @match https://qiita.com/*
// @exclude https://qiita.com/
// @exclude https://qiita.com/timeline*
// @exclude https://qiita.com/tag-feed*
// @exclude https://qiita.com/notifications*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const iconDiv = document.querySelector('.newUserPageProfile_avatar')
if (!iconDiv) {
return
}
const link = document.createElement('a')
const id = document.querySelector('.newUserPageProfile_name>span').textContent
link.href = 'https://qiita.com/search?q=user%3A' + id
const icon = iconDiv.querySelector('img')
link.appendChild(icon.cloneNode(true))
iconDiv.replaceChild(link, icon)
})();
直接フリーワード検索ができるinput
を追加しても良かったのですが、レイアイウトを崩さないことと、アイコン画像をクリックしても意味がなくさびしかったので、ユーザーを調べたい意図ということでアイコンに機能を持たせました。
img
の子要素にa
を追加してもダメなので、アイコンをクローンしてリンクで覆い、元のアイコン画像と置換します。
ちょっと迂遠な方法だと思いますが、他に方法があったかな?(click
イベントは除外して)