Auf Vorschlag von Wizek können Sie Ihren Code in eine Daten- URL einfügen.
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>
Und speichern Sie das alles als Lesezeichen. ( Probieren Sie es aus! Ziehen Sie den Code in Ihre Registerkartenleiste.)
Leider funktioniert es nur in bestimmten Fällen (mehr unten).
Wie es funktioniert:
(Zumindest in Chrome) Es ähnelt einem Lesezeichen, das das Format verwendet, das javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"andere Lösungen vorgeschlagen haben. In diesem Fall wird der HTML-Code der Seite, auf der Sie sich befinden , durch den HTML-Code aus dem Lesezeichen ersetzt, der Speicherort bleibt jedoch unverändert und das Lesezeichen selbst hat immer noch keinen Speicherort, sodass Chrome kein Favicon dafür speichern kann.
Im Gegensatz dazu gehen wir mit einem Daten-Uri-Lesezeichen auf die andere Seite , es hat einen eigenen Speicherort und der Browser kann ein Favicon dafür speichern. Stellen Sie sich das als "Hosten einer Website in Ihrem Browser" vor, auf die Sie auf anderen Computern zugreifen können, wenn Sie Ihre Lesezeichen synchronisieren. Sie können anstelle einer URL auch ein base64-Image für das Favicon verwenden, wenn Sie alles lokal halten möchten.
Es hat Einschränkungen.
Wenn Sie darauf klicken, verlässt es die aktuelle Seite und lädt die Seite in die Daten . Daher können Sie es nicht für Bookmarlets verwenden, die mit der aktuellen Seite interagieren, sondern nur für Code, den Sie auf einer anderen Seite ausführen können.
Verwenden Sie // nicht für Kommentare. Da alles in einer Zeile gespeichert wird, wickeln Sie sie in / ** / ein und vergessen Sie Ihre Semikolons nicht
In FF wurde das Favicon gespeichert, aber ich konnte es nicht so einstellen, dass Popup-Fenster immer geöffnet werden, wenn ich window.open () verwenden möchte, da ich damit kein Standardverhalten für Daten-URLs speichern kann
Als Beispiel:
Mit dieser Technik habe ich ein kleines Lesezeichen mit Symbolgenerator erstellt. Sie können diesen Code in Ihre URL-Leiste ziehen (oder als Lesezeichen speichern), um ihn zu verwenden. Es ist eine einfache Seite mit einem Eingabebereich für Code und für ein Symbol, und anschließend wird ein Lesezeichen mit dem Symbol erstellt
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>
Ein weiteres Beispiel: Lesezeichen zum Öffnen des Facebook Messenger in einem eigenen kleinen Fenster (funktioniert möglicherweise nicht, wenn Ihr Browser standardmäßig Popups blockiert)
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>
Weitere Chrome-Problemumgehungen zum Abrufen von Lesezeichen-Symbolen:
Exportieren Sie die Lesezeichenleiste, bearbeiten Sie sie und importieren Sie sie erneut, wie in dieser Antwort beschrieben. Https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome
Das Lesezeichen in eine Erweiterung verwandeln. Es wird kein Lesezeichen mehr sein, aber es wird dieselbe Funktion haben. Hier ist eine einfache Website, die dies für Sie erledigt: http://sandbox.self.li/bookmarklet-to-extension/. Ändern Sie dann einfach die Symboldatei in die gewünschte Datei. Der Nachteil dabei ist, dass Erweiterungen RAM verbrauchen (etwa 10 MB für einfache?). Wenn Sie viel und wenig RAM haben, ist dies möglicherweise nicht die Lösung für Sie. Außerdem haben Sie keinen Text wie in einem Lesezeichen, sondern nur das Symbol.
