비밀번호의 검은 원을 해제하는 북마크릿

(스마트폰에도 대응)

비밀번호를 잊어버린 당신에게

브라우저가 기억하는 비밀번호는 검은 원으로 표시되며, 그대로 복사하거나 값을 볼 수 없습니다.
이 검은 원 표시를 원 클릭으로 간편하게 해제할 수 있는 북마크릿을 만들었습니다

다음과 같은 상황에서 활용할 수 있습니다.

PC에서 항상 사용하는 웹 서비스에 스마트 폰에서 로그인하고 싶습니다

평소 사용하는 것과 다른 브라우저에서 웹 서비스에 로그인하고 싶습니다

상사와 동료에게 암호를 가르쳐야합니다

북마크릿을 다시 클릭하면 원래 검은색 원형 보기로 돌아갑니다.

또한 스마트 폰에서도 움직입니다.



책갈피 본문 코드

bookmarklet

javascript:(function(){if(typeof this.tgt==='undefined')this.tgt=document.querySelectorAll('input[type="password"]');var nit=(this.tgt.item(0).getAttribute('type')=='password')?'text':'password';for(var i=0;i<this.tgt.length;i++)this.tgt.item(i).setAttribute('type',nit);})();

「북마크란 무엇인가?」라고 하는 분은 이하의 링크처를 참조

알고 그렇게 모르는 북마크릿의 구조와 사용법(와 편리한 11점 정리) ｜ 라이프 해커[일본판]
h tp // w w.ぃふぇ c r. jp/2013/04/130402 보오 k마 rkぇt_정리. HTML

사용방법

비밀번호가 표시된 페이지에서 북마크릿 링크를 클릭하면,
비밀번호의 검은 원이 해제되어 복사할 수 있는 상태가 됩니다.

또한 검은 원이 해제된 상태에서 다시 북마크릿을 클릭하면 검은 원으로 되돌아갑니다.

사용 준비

▼PC의 경우
하테나렛을 사용하거나 수동으로 북마크릿을 북마크바에 등록

■하테나렛
view_pswd - 하테나렛

■수작업 버전
북마크 등록 방법 - Qiita

책갈피 본문 코드

bookmarklet

javascript:(function(){if(typeof this.tgt==='undefined')this.tgt=document.querySelectorAll('input[type="password"]');var nit=(this.tgt.item(0).getAttribute('type')=='password')?'text':'password';for(var i=0;i<this.tgt.length;i++)this.tgt.item(i).setAttribute('type',nit);})();

이상으로 준비 완료

▼스마트폰의 경우
적당한 페이지를 즐겨찾기 등록하고 이름과 URL을 북마크릿용으로 변경하면 OK입니다

동작 확인

아래 비밀번호 양식에 적절한 문자를 입력하고 이전 단계에서 등록한 북마크릿을 클릭하면 동작을 확인할 수 있습니다.

▼스마트폰의 경우
등록한 북마크릿명을 주소부에 입력하고 즐겨찾기를 호출하면 사용할 수 있습니다.
(잘못해서 검색해 버리지 않도록 주의)

passsword 1

passsword 2

일반 텍스트 양식에는 영향을 미치지 않습니다.

텍스트

( Qiita에서 input 요소의 value 또는 placeholder 속성이 작동하지 않았습니다 orz )

기술적 설명

개요

DOM내의 <input type="password"...> 요소를 모두 추출해,type 속성 값 "password"를 "text"로 바꾸기

이 처리에 의해, 패스워드 입력용의 폼이 단순한 텍스트 폼이 되어, 내용이 표시된다

또, 변경 대상의 DOM 요소를 기억하는 것으로,
동일한 페이지에서 북마크릿을 다시 시작하면 "비밀번호 입력 양식이었던 DOM 요소"를 원래 암호 입력 양식으로 되돌릴 수 있습니다.

소스 코드

이해하기 쉽도록 변수 이름을 변경하고 괄호를 추가합니다.

view_pswd.js

(function () {
    if (typeof this.target === 'undefined'){
        /* 初回起動時にtargetプロパティを定義 */
        this.target = document.querySelectorAll('input[type="password"]');
        /* すべてのパスワード入力用フォームのDOM要素を「変更対象のターゲット」として記憶 */
    }
    /* 
       以上の処理により、targetプロパティは同一ページでの2回目以降のブックマークレット起動時にも、
       「パスワード入力用フォームであったDOM要素」を覚えている
    */

    var new_input_type = (this.target.item(0).getAttribute('type') == 'password')? 'text' : 'password';
    for (var i = 0; i < this.target.length; i++){
        this.target.item(i).setAttribute('type', new_input_type);
    }
    /* 
       target内の最初の要素のtype属性が'password'のとき、target内のすべての要素のtype属性を'text'に置き換える
       そうでなければ(即ちtype属性が'text'のとき)'password'に置き換える
    */

})();

「한번 해제한 흑환을 원래 상태로 되돌릴 수 있다」라는 것이 쓸데없는 조건 포인트입니다

추가

@ 노만바 씨가 더욱 스마트한 북마크렛으로 업그레이드해 주셨습니다. 감사합니다.
기능은 동일하지만 안전성이 높아져 코드도 스마트하게 되어 있습니다. 다음의 Hatenalet 링크에서 사용할 수 있습니다.
+/-passwd