ตามคำแนะนำของ Wizekคุณสามารถใส่รหัสของคุณลงใน data-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) คล้ายกับ bookmarklet โดยใช้รูปแบบjavascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"เหมือนที่โซลูชันอื่นแนะนำ ในกรณีนี้ html จากหน้าที่คุณเปิดอยู่จะถูกแทนที่ด้วย html จาก bookmarklet แต่ตำแหน่งยังคงเหมือนเดิมและ bookmarklet เองจะยังไม่มีตำแหน่งดังนั้น Chrome จึงไม่สามารถบันทึกไอคอน Fav สำหรับมันได้
ในทางตรงกันข้ามกับบุ๊กมาร์ก data-uri ที่เราไปที่หน้าอื่นมันมีตำแหน่งของตัวเองและเบราว์เซอร์สามารถบันทึกไอคอน Fav ไว้ได้ ให้คิดว่าเป็น "การโฮสต์เว็บไซต์ในเบราว์เซอร์ของคุณ" ซึ่งคุณจะสามารถเข้าถึงได้ในคอมพิวเตอร์เครื่องอื่นหากคุณซิงค์บุ๊กมาร์กของคุณ คุณยังสามารถใช้รูปภาพ base64 สำหรับไอคอน Fav แทน url ได้หากคุณต้องการเก็บทุกอย่างไว้ในเครื่อง
มันมีข้อ จำกัด
เมื่อคุณคลิกมันออกหน้าปัจจุบันและโหลดหน้าในข้อมูล ดังนั้นคุณจะไม่สามารถใช้สำหรับ bookmarlet ที่โต้ตอบกับเพจปัจจุบันได้เฉพาะสำหรับโค้ดที่คุณสามารถรันในเพจอื่นได้
อย่าใช้ // สำหรับความคิดเห็น เนื่องจากทุกอย่างจะถูกบันทึกไว้ในบรรทัดเดียวให้ห่อด้วย / ** / และอย่าลืมอัฒภาคของคุณ
ใน FF มันบันทึกไอคอน Fav ไว้ แต่ฉันไม่สามารถตั้งค่าให้เปิดหน้าต่างป๊อปอัปได้ตลอดเวลาหากฉันต้องการใช้ window.open () เพราะไม่อนุญาตให้ฉันบันทึกพฤติกรรมเริ่มต้นสำหรับ URL ข้อมูล
ตัวอย่างเช่น:
การใช้เทคนิคนี้ฉันสร้าง Bookmarklet ขนาดเล็กพร้อม Icon Generator คุณสามารถลากรหัสนี้ลงในแถบ URL ของคุณ (หรือบันทึกเป็นบุ๊กมาร์ก) เพื่อใช้งานได้ เป็นหน้าที่เรียบง่ายที่มีพื้นที่ป้อนรหัสและสำหรับไอคอนจากนั้นจะสร้าง bookmarklet พร้อมกับไอคอน
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>
อีกตัวอย่าง: Bookmarklet เพื่อเปิด Facebook Messenger ในหน้าต่างเล็ก ๆ ของตัวเอง (อาจไม่ทำงานหากเบราว์เซอร์ของคุณบล็อกป๊อปอัปตามค่าเริ่มต้น)
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 ในการรับไอคอน bookmarklet:
