를 기반으로 Wizek의 제안 당신은 데이터 URI에 코드를 넣을 수 있습니다.
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico">
<script type="text/javascript">
alert('It works!')
</script></html>
그리고 그 모든 것을 북마크로 저장하십시오. (사용 해보세요! 코드를 탭 표시 줄로 드래그하세요)
불행히도 특정 경우에만 작동합니다 (아래 참조).
작동 원리 :
(적어도 Chrome에서는) javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"다른 솔루션이 제안한 형식을 사용하는 북마크릿과 유사합니다 . 이 경우 현재 페이지 의 html이 북마크릿의 html 로 대체 되지만 위치는 동일하게 유지 되고 북마크릿 자체에는 여전히 위치가 없으므로 Chrome에서 파비콘을 저장할 수 없습니다.
반대로 data-uri 북마크 를 사용하면 다른 페이지로 이동하여 자체 위치가 있고 브라우저가 파비콘을 저장할 수 있습니다. 북마크를 동기화하면 다른 컴퓨터에서 액세스 할 수있는 "브라우저에서 웹 사이트 호스팅"이라고 생각하세요. 모든 것을 로컬로 유지하려면 URL 대신 favicon에 base64 이미지를 사용할 수도 있습니다.
한계가 있습니다.
클릭하면 현재 페이지를 떠나 데이터에 페이지를로드합니다 . 따라서 현재 페이지와 상호 작용하는 소책자에는 사용할 수 없으며 다른 페이지에서 실행할 수있는 코드에만 사용할 수 있습니다.
주석에 //를 사용하지 마십시오. 모두 한 줄에 저장되므로 / ** /로 감싸고 세미콜론을 잊지 마세요.
FF에서는 파비콘을 저장했지만 window.open ()을 사용하려면 항상 팝업 창을 열도록 설정할 수 없었습니다. 데이터 URL에 대한 기본 동작을 저장할 수 없기 때문입니다.
예로서:
이 기술을 사용하여 작은 Bookmarklet With Icon Generator를 만들었습니다. 이 코드를 URL 표시 줄로 드래그 (또는 북마크로 저장)하여 사용할 수 있습니다. 코드와 아이콘을위한 입력 영역이있는 간단한 페이지로, 아이콘이있는 북마크릿을 생성합니다.
data:text/html;charset=utf-8,<html><head>
<title>Bookmarklet With Icon Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Write your javascript and specify a favicon, then drag the button to your bookmarks bar</div>
</h2>
<a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button">
Drag me to your bookmarks bar! </a><br /><br />
<div>
<label for="fav_href">Favicon:</label>
<input id="fav_href" value='https://stackoverflow.com/favicon.ico' style='width:100%'></input> </div><br />
<div>
<label for='ta'>Write your JavaScript below</label>
<textarea id="ta" style="width:100%;height:50%">
setTimeout(()=>{ &%2313
alert('hello world'); /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
window.history.back(); &%2313
},200);
</textarea></div>
</div>
<script type = "text/javascript">
fav_href.onchange = ta.onchange = function(){
bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
'<link rel="shortcut icon" href="'+ fav_href.value +'">'+
'<script type="text/javascript"> '+ ta.value +'<\/script>';
};
ta.onchange();
</script>
</body>
또 다른 예 : 자체 작은 창에서 Facebook 메신저를 여는 북마크릿 (브라우저가 기본적으로 팝업을 차단하는 경우 작동하지 않을 수 있음)
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico">
<script type="text/javascript">
url = 'https://www.messenger.com/';
w = 740; h = 700;
x = parseInt( screen.availWidth/2 - w/2 );
y = parseInt( screen.availHeight/2 - h/2 );
nw = window.open(url,'', 'width='+ w +',height='+ h +',top='+ y +',left='+ x);
nw.focus();
setTimeout(()=>{
window.history.back();
window.close();
},200);
</script>
북마크릿 아이콘을 얻기위한 기타 Chrome 해결 방법 :
