북마크릿을 만들었고 제대로 작동하지만 Opera 나 Firefox의 툴바에 추가되면 브라우저의 기본 북마크 아이콘 (각각 지구본과 별표)을 사용합니다. 내 사이트에는 파비콘이 있고 창, 탭, 심지어 [사이트] 북마크는 내가 지정한 파비콘을 사용합니다. 내 북마크릿이 아닙니다.
북마크릿이 파비콘도 가져 오도록 내 사이트 또는 북마크릿을 코딩하려면 어떻게해야합니까?
사용자가 사후에 파비콘을 설정하는 데 사용할 수있는 다양한 수동 해커 기술을 알고 있지만 이는 바람직하지 않은 솔루션입니다.
답변
북마크릿은 javascript://스키마를 사용하므로 파비콘을로드 할 수있는 도메인이 없습니다.
따라서 현재 북마크릿에 파비콘을 제공 할 방법이 없습니다. 다음과 같이 생각해보십시오. Javascript 샌드 박스 전체를 기억하십시오. Javascript가 실행중인 웹 페이지의 도메인 외부에있는 어떤 것도 액세스하지 못할 수 있습니다. 현재보고있는 페이지의 모든 도메인에 연결되어야하는 북마크릿은 웹 사이트의 파비콘에도 연결될 수 없습니다.
업데이트 : Hans Schmucker의 답변에 따르면 브라우저가 북마크 메뉴에로드하면 파비콘이있는 HTML 문서를 생성하는 북마크릿을 만들 수 있습니다. 추론은 효과가있는 것처럼 보이지만 아직 이와 같은 행동을 보지 못했고 테스트 결과가 부정적이었습니다.
답변
이를 수행하는 방법은 다음과 같습니다.
- 북마크를 북마크 바로 드래그하세요.
- 그 옆에 북마크릿에 사용할 파비콘이있는 사이트의 북마크를 만듭니다.
- 북마크 관리자를 열고 구성 드롭 다운을 클릭 한 다음 내보내기를 선택하고 북마크를 html 파일로 저장합니다.
- 텍스트 편집기에서 해당 html 파일을 엽니 다.
- 방금 만든 북마크 를 찾고 Gmail 북마크라고 말하면 다음과 같은 html 코드가 있어야합니다.
<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>
- 전체 ICON 태그 복사
- 동일한 파일에서 생성 한 북마크릿을 찾고 복사 한 ICON 태그를 북마크릿 태그에 삽입합니다 .
<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>
- 이 파일 저장
- Chrom 북마크 관리자로 돌아가서 다시 구성을 클릭하고 가져 오기를 선택합니다.
- 방금 편집 한 HTML 파일을 가져 오면 북마크릿에 파비콘이 생깁니다 .
기본적으로 절차는 아이콘 속성을 얻는 것입니다 북마크 태그 및 삽입 북마크 태그
답변
정답이 아닙니다. 북마크릿에는 도메인이 없지만 위치 (북마크릿 자체)가 있으며 여기에 아이콘을 할당 할 수 있습니다. 그 후에는 브라우저가 아이콘을 저장하는 방법이 중요합니다 (Firefox는 북마크 아이콘을 영구적으로 저장하므로 다른 브라우저에서는 운이 좋지 않을 수 있습니다).
PS Security는 그 안에서 작동하지 않으며 아이콘은 어디에서나 올 수 있습니다. 제한이 없습니다.
답변
tapper [ware]와 Restafarian 사이트를 읽은 후, 제가 생각해 낼 수있는 가장 간단한 해결책은 다음과 같습니다.
<a href="javascript:
var title = window.location.href;
if (title.indexOf('http://yourwebsite/bookmarklet/') == 0) {
'<head><link rel=\'shortcut icon\' href=\'favicon.ico\'></head>Bookmarklet';
} else {
(function(){document.body.appendChild(document.createElement('script')).src='http://yourwebsite/bookmarklet.js';})();
}">Click Me!</a>
Chrome 및 FF에서 잘 작동하지만 FF4는 북마크 바에 아이콘을 저장하는 유일한 브라우저입니다. 다음과 같이 표시됩니다. http://cl.ly/5WNR
답변
여기에 당신이 원하는 것을 거의 할 수있는 좋은 기술이 있습니다.
내 Mac에서 잘 작동하지만 Windows 7⃣에서는 작동하지 못했습니다 .❌
“Emoji”?를 사용하십시오. 그들은 유니 코드 문자로, 화려한 아이콘처럼 보입니다. 미리 정의 된 이미지 목록에서만 선택할 수 있지만 실제로하려는 모든 작업은 북마크릿이 수행하는 작업을 상기시키기 위해 사용자에게 볼 수있는 것을 제공하는 것뿐입니다.
예를 들어 “보안 키”북마크릿을 만들고 있습니다 ?. 그래서 북마크릿 이름에 ?을 사용합니다! ??
따라서 기본적으로 북마크 바에 이미지 ?이 표시됩니다 .?
이 사이트를 사용하여 북마크릿에 적합한 이모티콘을 찾을 수 있습니다. http://emojipedia.org/symbols/
답변
를 기반으로 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 해결 방법 :
-
이 답변 /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-에 설명 된대로 북마크 바 내보내기, 편집 및 다시 가져 오기 구글 크롬
-
북마크릿을 확장 기능으로 전환합니다. 더 이상 북마크릿이 아니지만 동일한 기능을 갖습니다. 다음은 http://sandbox.self.li/bookmarklet-to-extension/ 을 수행하는 간단한 웹 사이트입니다 . 아이콘 파일을 원하는대로 변경하면됩니다. 이것의 단점은 확장 프로그램이 램을 사용한다는 것입니다 (단순한 것의 경우 약 10MB?). 램이 많고 적은 경우 솔루션이 아닐 수도 있습니다. 또한 북마크와 같은 텍스트가 아니라 아이콘 만 표시됩니다.
답변
javascript와 canvas를 사용하여 favicon을 favicon에 할당하고 수정할 수 있습니다 (놀라운 favicon 게임 Defender of the Favicon 참조 ). 게임의 소스 코드는 그렇게하는 데 도움이 될 것입니다 (기본적으로 소스의 554 행에서 볼 수 있듯이 캔버스의 toDataUrl () 함수 사용에 의존합니다).
// set favicon
if( !stupidBrowser && useIcon )
{
var icon=$('favicon');
(newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
icon.parentNode.replaceChild(newIcon,icon);
}
이 방법으로 파비콘을 설정하는 소책자를 클릭하거나 저장하면 어떻게됩니까? 잘 모르겠지만 한 번 시도해 보면 좋을 것 같습니다. 브라우저가 그것을 저장할 수 있습니까?
