Edited at

Qiitaのユーザーページにタグ検索のリンクを追加するChrome拡張機能「Qiitag Link」を作った


ユーザーが投稿した記事中からタグ検索したい

ユーザーごとにどんな記事を投稿しているのかはユーザーページを見ればグラフで表示されているので一発でわかるのですが、

じゃあそのタグの記事を見たいとなると、ユーザーページから絞れないし、検索の時にオプション指定する必要があったりでめんどくさい

ので、グラフで表示されてるタグを見て検索リンクを表示させるChrome拡張を作ってみました

↓からインストールしてください

Qiitag Link - Chrome ウェブストア


画面表示例

この拡張を有効にしてユーザーページ( https://qiita.com/sola-msr )へ行くと↓こんな感じでグラフで表示されているタグの検索リンクが表示されます

qiitag_link.jpg

「PHP」のリンクをクリックすると以下のようにユーザーとタグを絞り込んだ状態の検索結果画面へ遷移します。

WS000008.JPG


ソース

実質処理的にはこれだけです。

JavaScriptわかんないので間違いは普通にありそうです。


contents.js

let qiitaUrl = location.pathname.split('/');

let addTagLinkHtml = '';

if (qiitaUrl[1] !== '' && typeof qiitaUrl[2] === "undefined") {
window.onload = function() {
let userTagElem = document.getElementsByClassName('c3-legend-item');
addTagLinkHtml = '<div id="qiita-tag-search-link">';

if (userTagElem.length > 0 && qiitaUrl[1] !== '') {
addTagLinkHtml += '<ul style="text-align:center;"><li style="display: inline-block; width: 5%;">タグ:</li>';
for (var i = 0; i < userTagElem.length; i++) {
if (typeof userTagElem[i] !== "undefined" && userTagElem[i].textContent != '' && userTagElem[i].textContent != 'Others') {
addTagLinkHtml += '<li style="display: inline-block; width: 10%;"><a href="https://qiita.com/search?utf8=%E2%9C%93&sort=&q=user%3A' + qiitaUrl[1] + '+tag%3A' + userTagElem[i].textContent + '" style="color:#337ab7;">' + userTagElem[i].textContent + '</a></li>';
}
}
addTagLinkHtml += '</ul></div>';

document.getElementById('main').insertAdjacentHTML('afterbegin', addTagLinkHtml);
}
};
}



GitHub

sola-msr/qiitag-link


おわり


  • 一度Chromeの拡張機能作ってみたかったんでいい機会でした(?)

  • なにかおかしな所あれば指摘おねがいします


参考URL