Dựa trên gợi ý của Wizek, bạn có thể đặt mã của mình vào 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>
Và lưu tất cả những thứ đó dưới dạng đánh dấu. ( Hãy thử! Kéo mã vào thanh tab của bạn)
Thật không may, nó chỉ hoạt động cho một số trường hợp nhất định (thêm bên dưới).
Làm thế nào nó hoạt động:
(Ít nhất là trong Chrome) Nó tương tự như một bookmarklet sử dụng định dạng javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"như các giải pháp khác đã đề xuất. Trong trường hợp đó, html từ trang bạn đang truy cập sẽ được thay thế bằng html từ bookmarklet, nhưng vị trí vẫn giữ nguyên và bản thân bookmarklet sẽ vẫn không có vị trí nên Chrome không thể lưu biểu tượng yêu thích cho nó.
Ngược lại, với một bookmark data-uri, chúng ta chuyển đến trang khác , nó có vị trí riêng và trình duyệt có thể lưu một biểu tượng yêu thích cho nó. Hãy coi nó như là "Lưu trữ một trang web trong trình duyệt của bạn", mà bạn có thể truy cập trong các máy tính khác nếu bạn đồng bộ hóa dấu trang của mình. Bạn cũng có thể sử dụng hình ảnh base64 cho biểu tượng yêu thích thay vì url nếu bạn muốn giữ mọi thứ cục bộ.
Nó có những hạn chế.
Khi bạn nhấp vào nó, nó sẽ rời khỏi trang hiện tại và tải trang đó trong dữ liệu . Do đó, bạn sẽ không thể sử dụng nó cho các trang đánh dấu tương tác với trang hiện tại, chỉ cho mã mà bạn có thể thực thi trong một trang khác.
Không sử dụng // để nhận xét. Vì tất cả sẽ được lưu trong một dòng, hãy đặt chúng trong / ** / và đừng quên dấu chấm phẩy của bạn
Trong FF, nó đã lưu biểu tượng yêu thích, nhưng tôi không thể đặt nó luôn mở cửa sổ bật lên nếu tôi muốn sử dụng window.open () vì nó không cho phép tôi lưu hành vi mặc định cho url dữ liệu
Ví dụ:
Sử dụng kỹ thuật này, tôi đã tạo một Bookmarklet nhỏ với Icon Generator. Bạn có thể kéo mã này vào thanh URL của mình (hoặc lưu nó dưới dạng dấu trang) để sử dụng. Đó là một trang đơn giản với vùng nhập mã và biểu tượng, sau đó tạo một bookmarklet có biểu tượng
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>
Một ví dụ khác: Bookmarklet để mở Facebook Messenger trong cửa sổ nhỏ của riêng nó (có thể không hoạt động nếu trình duyệt của bạn chặn cửa sổ bật lên theo mặc định)
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>
Các cách giải quyết khác của Chrome để nhận các biểu tượng bookmarklet:
Xuất thanh dấu trang, chỉnh sửa và Nhập lại thanh, như được mô tả trong câu trả lời này /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- google-chrome
Chuyển bookmarklet thành một tiện ích mở rộng. Nó sẽ không còn là một bookmarklet nữa, nhưng nó sẽ có chức năng tương tự. Đây là một trang web đơn giản thực hiện điều đó cho bạn http://sandbox.self.li/bookmarklet-to-extension/, sau đó chỉ cần thay đổi tệp biểu tượng thành những gì bạn muốn. Hạn chế của việc này là các phần mở rộng sử dụng hết ram (khoảng 10mb đối với các phần mở rộng đơn giản?), Nếu bạn có nhiều và ít ram thì nó có thể không phải là giải pháp cho bạn. Ngoài ra, bạn sẽ không có văn bản như trong dấu trang, chỉ có biểu tượng.
