How to have favicon / icon set when bookmarklet dragged to toolbar?
I\'ve made myself a bookmarklet, and it functions just fine, but when added to a toolbar in Opera or Firefox, it just takes on the default bookmark icon for the browser (a g
-
I think that a possible way is using unicode char in bookmarklet anchor like your icon:
http://unicode-table.com/en/#cyrillic
sifting through all the possible symbols you might find the character that resembles more to the icon you want to
讨论(0) -
After reading the tapper[ware] and Restafarian site, here's the simplest solution I could come up with:
<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>Works great in Chrome and FF, but FF4 is the only browser that will save the icon in the bookmarks bar. Here's what it looks like: http://cl.ly/5WNR
讨论(0) -
Based on Wizek's suggestion you can put your code into a 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>And save all of that as a bookmark. (Try it! drag the code into your tabs bar)
Unfortunately it only works for certain cases (more below).
How It Works:
(At least in Chrome) It's similar to a bookmarklet using the format
javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"like other solutions have suggested. In that case, the html from the page you are on will be replaced by the html from the bookmarklet, but the location remains the same and the bookmarklet itself will still not have a location so Chrome can't save a favicon for it.In contrast, with a data-uri bookmark we go to the other page, it has it's own location, and the browser can save a favicon for it. Think of it as "Hosting a website in your browser", which you would be able to access in other computers if you sync your bookmarks. You can also use a base64 image for the favicon instead of a url if you want to keep everything local.
It has limitations.
When you click it, it leaves the current page and loads the page in the data. Therefore you won't be able to use it for bookmarlets that interact with the current page, only for code that you can execute in a different page.
Don't use // for comments. Since it will all be saved in one line, wrap them in /**/ and don't forget your semicolons
In FF it saved the favicon, but I was not able to set it to always open popup windows if I want to use window.open() because it doesn't allow me to save a default behaviour for data urls
As an example:
Using this technique I created a small Bookmarklet With Icon Generator. You can drag this code into your URL bar (or save it as a bookmark) to use it. It's a simple page with an input area for code, and for an icon, and then generates a bookmarklet with the icon
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>Another Example: Bookmarklet to open Facebook messenger in it's own small window (might not work if your browser blocks popups by default)
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>
Other Chrome workarounds for getting bookmarklet icons:
Exporting the bookmarks bar, editing it, and Importing it again, as described in this answer https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome
Turning the bookmarklet into an extension. It won't be a bookmarklet anymore, but it will have the same function. Here's a simple website that does it for you http://sandbox.self.li/bookmarklet-to-extension/ then just change the icon file to what you want. The drawback of this is that extensions use up ram (around 10mb for simple ones?), if you have a lot and little ram it might not be the solution for you. Also, you won't have text like in a bookmark, only the icon.
讨论(0)
加载中...
- 热议问题