사용자가 게시한 기사 중에서 태그를 검색하고 싶습니다.

유저마다 어떤 기사를 투고하고 있는지는 유저 페이지를 보면 그래프로 표시되고 있으므로 한발로 알 수 있습니다만,
그럼 그 태그의 기사를 보고 싶다면, 사용자 페이지에서 좁히지 않고, 검색시에 옵션 지정할 필요가 있거나로 귀찮아.
그래서 그래프에 표시되는 태그를보고 검색 링크를 표시하는 Chrome 확장 프로그램을 만들려고했습니다.

↓에서 설치하십시오
개 Qiitag Link - Chrome 웹 스토어

화면 표시 예

이 확장을 활성화하고 사용자 페이지 ( htps : // 코 m / 소 msr )로 이동하면 ↓ 이런 식으로 그래프로 표시되는 태그의 검색 링크가 표시됩니다.


「PHP」의 링크를 클릭하면 아래와 같이 사용자와 태그를 좁힌 상태의 검색 결과 화면으로 천이합니다.

출처

실질 처리적으로는 이것뿐입니다.
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

Chrome 확장 프로그램 개발은 의외로 간단합니까? ! 그 1 | 시모타 책

Chrome의 오리지널 확장 기능 개발 (소스 코드 있음) | 도쿄 우에노의 웹 제작 회사 LIG

Google 크롬 확장을 만드는 방법 – ajike developer's blog – UX 디자인 회사 아지케 개발자 블로그

Chrome 확장 비망록 1에서 10까지 - Qiita

Chrome 확장 프로그램 매니페스트 파일을 작성하는 방법 - Qiita