機能

@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イベントは除外して)

Qiitaのユーザー画面からそのユーザー記事のフリーワード検索へ移動する

機能

動機

動作検証環境

コード