본문 바로가기

컴퓨터

유용한 bookmarklets

아마 '오른쪽 버튼 무력화'라고 해서 즐겨찾기에 저장하신 분들이 많았던걸로 기억되는데
이렇게 자바스크립트를 즐겨찾기에 저장해서 편하게 쓸 수 있는 기능들을 몇가지 소개 해드릴려고 합니다.


사용하는 방법은 url을 오른쪽 버튼을 통해서 즐겨찾기에 등록하시면 됩니다. 
위 사진 처럼 연결폴더에 등록하시면 바로 사용하실 수 있겠죠.



Show Password

javascript:(function(){var%20s,F,j,f,i;%20s%20=%20"";%20F%20=%20document.forms;%20for(j=0;%20j<F.length;%20++j)%20{%20f%20=%20F[j];%20for%20(i=0;%20i<f.length;%20++i)%20{%20if%20(f[i].type.toLowerCase()%20==%20"password")%20s%20+=%20f[i].value%20+%20"\n";%20}%20}%20if%20(s)%20alert("Passwords%20in%20forms%20on%20this%20page:\n\n"%20+%20s);%20else%20alert("There%20are%20no%20passwords%20in%20forms%20on%20this%20page.");})();
티스트에서 스크립트를 제대로 못보여주네요. 북마크 시킨 스크립트 주소를 위 스크립트로 바꿔주세요.

로그인 폼에 적혀진 패스워드를 보여주는 스크립트로  저 같은 경우 IEtoy의 자동로그인을 사용해서 필요가 없지만
인터넷 익스플로의 암호저장 기능을 사용하시는 분들 중 암호가 생각나지 않을 때 유용하게 사용하실 수 있습니다.
다음과 네이버 같이 일반적인 로그인폼이 아닌경우 (보안 강화된 사이트) 에는 작동을 안합니다.

제가 자주 가는 사이트 몇곳을 실험 해봤습니다.


하나포스에선 잘 보여지고요


다음과 네이버의 처럼 아에 반응을 보이지 않을 수도 있고 티스토리의 경우처럼
'There are no password in forms on this page'와 같은 메시지가 나오는 경우도 있습니다.


티스토리 홈페이지에서는 안되는데 위와 같이 본인의 티스토리 계정에서 로그인할 경우
비밀번호를 제대로 보여주고 있습니다.



파코즈 또한 제대로 작동합니다.


To English
두번째는 영문 이외에 다른 언어로 작성된 페이지에서 실행하면 보고 있는 사이트를 바로 구글 영문 번역기로 번역해줍니다.

제가 가끔가는 프랑스어로 된 사이트 입니다. 한국에 사시는지 한국에 친척이 있다고 했는지
너무 오래되어서 기억이 나지 않지만 한국사람도 구하기 힘든 한국 사진들을 올리고 있어서
가끔 가는 사이트입니다.


프랑스어로 되어있든 스페인어로 되어있든 언어 선택없이 바로 번역된 페이지를 보여주고 있습니다.


Print What You Like

javascript:(function(){if(window['ppw']&&ppw['bookmarklet']){ppw.bookmarklet.toggle();}else{window._pwyl_home="http://www.printwhatyoulike.com/";_pwyl_bmkl=document.createElement('script');_pwyl_bmkl.setAttribute('type','text/javascript');_pwyl_bmkl.setAttribute('src',_pwyl_home+'static/compressed/pwyl_bookmarklet_10.js');_pwyl_bmkl.setAttribute('pwyl','true');document.getElementsByTagName('head')[0].appendChild(_pwyl_bmkl);}})();
티스트에서 스크립트를 제대로 못보여주네요. 북마크 시킨 스크립트 주소를 위 스크립트로 바꿔주세요.

print what you like는 즐겨찾기에도 있었는데 이렇게 bookmarklet으로도 있는줄 몰랐네요.
직접 주소로 찾아가서 url을 적어줄 수도 있지만 요번에는 바로 편집 페이지로 이동합니다.
원래 주소는 http://www.printwhatyoulike.com 입니다.
 - 처음 사용하시는 분들을 위해서 간단하게 설명하자면 웹페이지 프린트 해보신 분들은 공감하시겠지만
   익스플로러 같은경우 정말 프린터 옵션이 저질이죠. 축소,확대, 머릿말, 꼬릿말 정도로 잘 모르시는 분들은
   그냥 프린트 버튼 누르기만 하는데 그럼 여기 잘리고 저기 잘려서 나오죠, 이 사이트의 경우 본인이 원하는
   부분만 프린트 할 수 있도록 해줘 잘리는 부분이 없도록 최소화 시켜주고 있습니다. -

사용해 보시면 위와 같은 창이 왼쪽에 뜹니다. 간단히 설명해 드리자면 
 Select 의 경우 more, less, clear 가 있는데 선택한 틀을 더 키우거나 줄이거나, 아에 없엘 수 있습니다.
 Selection의 경우 isolate - 선택한 프레임만 나오고 , remove - 선택한 프레임 삭제, fit to width - 가로에 크기 맞추기
                        resize - 선택한 프레임 사이즈 조절
텍스만 원할 경우 'remove images' 를 선택하면 텍스트를 제외한 이미지들이 삭제 됩니다. 
(틀은 그대로 있어서 보는데 문제는 없습니다. 물론 잉크 절약에도 도움이 되겠죠)


첫번째 사진에서 선택한 화면들은 반투명 노란색으로 표시가 되는데 remove를 클릭하면 두번째 사진과 같이 삭제 할 수 있습니다.


Aardvark
Ardvark의 경우 웹디자이너들에게 좋은 bookmarklet인데요.

H키를 누르면 단축키들이 나타나고 마우스를 원하는 곳에 가져면 div id, img, li 등이 어떤 태그가 사용되고 있는지
툴팁으로 나오며 원하는 테이블만 따로 뺄 수도 있고 테이블 삭제도 가능합니다. 가장 큰 특징은 전체적인 테이블
구성을파악하는 많은 도움을 주고 있습니다.


Capture Screenshot
Capture Screenshot은 이름에도 알 수 있듯이 특별한 프로그램이 필요 없고 웹에서 바로 본인이 원하는
부분을 스크린 샷으로 찍을 수 있습니다. 이 bookmarklet의 가장 큰 특징으로는 저장이 필요 없다는 것입니다.
즉 본인이 원하는 부분을 캡쳐 한후 나오는 embed 태그를 html을 적용할 수 있는 게시판에 올리기만 하면
바로 볼 수 있습니다. (아래 그림에서 추가 설명해 드리겠습니다.)

bookmarklet을 실행하게 되면 새로운 창이 뜨면서 두개의 독립된 창이 뜹니다.
 size - 현재 보고 있는 화면을 크게 하거나 줄일 수 있습니다.
 x, y - 클릭한 곳의 좌표입니다.
 width, height - 마우스로 직접 캡쳐할 곳을 선택할 수 있고, 여기에 특정 크기를 입력하여 자를 수도 있습니다.


저는 제 티셔츠 앞에 있는 그림을 선택했습니다.
그다음에 cut out을 클릭하면 됩니다.


이제 본인이 원하는 스타일에 맞춰 선택해주시면 됩니다.
저는 기본 옵션에서 round(테두리 곡선 효과)만 줬습니다.

그런 다음 embed 태그에 있는 태그를 복사합니다.


본인이 원하는 게시판에 html 태그를 사용할 수 있다면 체크 해주신 후
복사한 태그를 붙여 넣으시면 됩니다.


글쓰기 완료 후 제대로 나옵니다. 밑에 주소는 태그에서 없엘 수도 있지만 출처 주소를 적어야 하는 곳이라면
자동으로 출처 주소가 나오기 때문에 훨씬 시간이 절약 되겠죠?

단, 단점이 있다면 사이트 전체가 나오지 않고 짤려서 나오는 경우가 있습니다.


Show RSS feed
Show RSS feed는 어느 사이트에 접속 했는데 도무지 RSS 피드 주소를 찾지 못할 경우 사용하실 수 있습니다.

RSS를 사용하는 사이트에서 bookmarklet을 사용하면 위와 같은 화면을 보실 수 있습니다.
feed2js에서 제공하는 RSS feed 창으로 구글이며 야후등에 RSS를 쉽게 추가 하실 수 있고

원본 RSS 주소는 상단에 'View the original feed'에 나와있습니다. 클릭해서 보시거나 바로가기 복사를 한 후
본인이 사용하는 RSS feeder에 추가시켜 주시면 됩니다.

이상 몇가지 안되는 bookmarklet들이었습니다. 저한테 맞는것만 즐겨찾기에 넣어 두다보니
다른 분들 한테는 그다시 효용성이 없을 수도 있지만 그대로 저장해 두면 필요할 때 펼리하게 사용하실 수 있을겁니다.
또한 파이어폭스, 사파리, 익스플로러 어느 브라우저에서도 작동하기 때문에 누구나 사용할 수 있습니다.


ps. 블로그에 맞춰 작성하다보니 (가로 734px기준) 파코즈에서는 이미지들이 줄어들거나 문장들이 제멋대로
     다음줄에 나올 수도 있습니다.