{"id":6981,"date":"2021-06-09T18:18:39","date_gmt":"2021-06-09T18:18:39","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6981"},"modified":"2021-09-01T01:36:53","modified_gmt":"2021-09-01T01:36:53","slug":"bookmarklets","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6981","title":{"rendered":"Bookmarklets part 1"},"content":{"rendered":"\n<p>I was looking at a Wassat (Wellington Open Source Show &amp; Tell) notice and looked back at one of the organisers, Grant, presentation on Bookmarklets on YouTube and slides. I thought it was an interesting idea and decided to explore it further. <\/p>\n\n\n\n<p>Basically you do add Javascript to the Address bar on a browser. This Javascript usually loads after the page has loaded, then it creates an event on that page. You can have it as a simple bookmark on your Bookmark Toolbar, just like any other Bookmark and with Firefox you can even assign a hotkey to it as well. <\/p>\n\n\n\n<p>As you are doing the JS event after the page has loaded, and you have a script that changes the background colour of the page, you can go back to prior running of Bookmarklet by just refreshing the page and it brings you back to the original page load state. <\/p>\n\n\n\n<p>Sounds cool and I was intrigued by it. So I started by wonder exactly what you could do to on mr YouTube. The code train one shows how to build them and challenges (no new lines in JS) but his examples are a bit weak. The 2nd video discusses a <strong><a href=\"https:\/\/mrcoles.com\/bookmarklet\/\" target=\"_blank\" rel=\"noreferrer noopener\">webpage mrColes<\/a><\/strong> that takes your JS and converts it into a Bookmarklet:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"11.2: Bookmarklets - Programming with Text\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/DloHqUfPbJc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Bookmarklets\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/_Ms7zqf4a1s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>All the above videos do not show any examples that made me jump out and go mad on them, so I started looking on web search and came across  this site <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.squarefree.com\/bookmarklets\/\" target=\"_blank\">Jesses Bookmarklet<\/a><\/strong>s and there are quite a few examples to test and you can browse by topic.  I quite liked the ^Highlight Word^ (<em>my quotes don&#8217;t seem to work in wordpress at the moment)<\/em> and the ^zap white background^ which changes background colour on the page you are reading. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"300\" height=\"249\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-300x249.jpg\" alt=\"\" data-id=\"6984\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox.jpg\" data-link=\"https:\/\/max-drake.cc\/?attachment_id=6984\" class=\"wp-image-6984 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-300x249.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-1024x851.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-768x638.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-50x42.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-60x50.jpg 60w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-100x83.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-120x100.jpg 120w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-770x640.jpg 770w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-640x532.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-924x768.jpg 924w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-1299x1080.jpg 1299w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_01-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox.jpg 1404w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/249;\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"300\" height=\"246\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-300x246.jpg\" alt=\"\" data-id=\"6983\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox.jpg\" data-link=\"https:\/\/max-drake.cc\/?attachment_id=6983\" class=\"wp-image-6983 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-300x246.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-1024x841.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-768x631.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-50x41.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-61x50.jpg 61w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-100x82.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-122x100.jpg 122w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-779x640.jpg 779w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-640x526.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-935x768.jpg 935w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-1315x1080.jpg 1315w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox.jpg 1372w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/246;\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">^zap white background^ Bookmarklet on a webpage. A simple page refresh will bring back original colour (white) and you can code for a different background colour of your choosing<\/figcaption><\/figure>\n\n\n\n<p>At <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/sites.google.com\/site\/satznstuff\/home\/bookmarklets\" target=\"_blank\">Statz n stuff site<\/a><\/strong> there is one bookmarklet that allows you to play snakes and another with Asteroids (actually that one I want to play with), there is also this website <strong><a rel=\"noreferrer noopener\" href=\"http:\/\/websiteasteroids.com\/\" target=\"_blank\">Website Asteroids<\/a><\/strong> where you can get the bookmarklet more easily. <\/p>\n\n\n\n<p>Another site I found is <strong><a rel=\"noreferrer noopener\" href=\"http:\/\/dmcritchie.mvps.org\/dolphin\/lesson_from_newtab.htm\" target=\"_blank\">Bookmarklets, history, exported bookmarks, extensions for Chrome &amp; Firefox (2020-08-17)-David McRitchie<\/a><\/strong> and there are some nice ones on this site, I found a nice one that sends you email of the tab URL you are currently on, <strong><a rel=\"noreferrer noopener\" href=\"max.s.drake@gmail.com?subject='+document.title+'&amp;body='+escape(location.href)\" target=\"_blank\">Send<\/a><\/strong>, where you put your email address in and when you use the link it will send an email to that address:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> javascript:{var s=&#91;],metas=document.getElementsByTagName('head')&#91;0].getElementsByTagName('meta');for(var i=0,L=metas.length;i&lt;L;i++){if(metas&#91;i].name.toLowerCase()=='description')s&#91;s.length]=metas&#91;i].content;}s=s.join(',');}location.href='<strong>mailto:max.s.drake@gmail.com<\/strong>?subject='+document.title+'&amp;body='+escape(location.href) <\/code><\/pre>\n\n\n\n<p>A couple of practical ones are where you highlight text, press Bkmklet and it takes you to Wiki or Google for searching , I&#8217;ve now set a couple of these up, they are useful and predictable. <\/p>\n\n\n\n<p>Another video on BkmkLets I thought was really good and the demo for testing in Chrome is very educational (firefox does not have developer snippets):<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"JavaScript Bookmarklets Tutorial - How to create bookmarklet, amend DOM to add HTML links to page\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/M4NnLlffh2w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I saw on the Statz page a Timer, but couldn&#8217;t get it to work, but found this site <strong><a rel=\"noreferrer noopener\" href=\"http:\/\/7is7.com\/otto\/countdclock.html\" target=\"_blank\">7is7.com<\/a><\/strong> where you can setup your own bookmarklet to start a timer from a specific date &amp; time, slightly fiddly as you have to set start time, but form other articles I&#8217;ve done on getting a timer running for projects this is pretty simple and handy. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"220\" height=\"300\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-220x300.jpg\" alt=\"\" data-id=\"6988\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-scaled.jpg\" data-link=\"https:\/\/max-drake.cc\/?attachment_id=6988\" class=\"wp-image-6988 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-220x300.jpg 220w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-752x1024.jpg 752w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-768x1046.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-1127x1536.jpg 1127w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-50x68.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-37x50.jpg 37w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-100x136.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-73x100.jpg 73w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-470x640.jpg 470w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-640x872.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-564x768.jpg 564w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-1024x1395.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-793x1080.jpg 793w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_48_21-Countdown-Clocks-for-Websites-\u2014-Mozilla-Firefox-scaled.jpg 1174w\" data-sizes=\"(max-width: 220px) 100vw, 220px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 220px; --smush-placeholder-aspect-ratio: 220\/300;\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"183\" height=\"300\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-183x300.jpg\" alt=\"\" data-id=\"6994\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1.jpg\" data-link=\"https:\/\/max-drake.cc\/?attachment_id=6994\" class=\"wp-image-6994 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-183x300.jpg 183w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-50x82.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-30x50.jpg 30w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-100x164.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1-61x100.jpg 61w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_45_24-Add-New-Post-\u2039-Vast-\u2014-WordPress-\u2014-Mozilla-Firefox-1.jpg 371w\" data-sizes=\"(max-width: 183px) 100vw, 183px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 183px; --smush-placeholder-aspect-ratio: 183\/300;\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Left is web page for setting up the code, the right image is the timer running from date\/time and counting up- I suppose I&#8217;ve just got a pop-up clock, but it works for me<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Open in New Tab\/New Window<\/h3>\n\n\n\n<p>This has been a bit of a challenge for me. I had a couple of Bkmklts that I put on my browser bar so that I could access them right away, one being selecting a bit of text in a web page and then looking it up on Wiki or looking it up in DuckDuckGo. The only issue being it did it in the tab that you had selected the text in, rather than opening another tab. At the time I did a bit of searching on the topic and didn&#8217;t have much success. I&#8217;ve since had another attempt that has been more successful.  Now they are much more usable.<\/p>\n\n\n\n<p>the <strong>window.open <\/strong>JS code does different things depending on your browser seetup. I have firefox and the <strong>window.open<\/strong> default is Open a New TAB, that is a FireFox default, in other browsers it might be  open a new Browser Window, so the Bookmarklet will open in a completely new browser window. If you want to chage the browser default you have to go into the specific browser settings to do so. <\/p>\n\n\n\n<p> I&#8217;ve been testing them on a dummy Bkmklt, editing the JS until I get it to work.  So for <a rel=\"noreferrer noopener\" href=\"\/\/en.wikipedia.org\/wiki\/&quot; + escape(q))}; void 0\" target=\"_blank\">Wiki after highlighting text on a pag<\/a>e, cut past code below into a bookmark:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript:q = \"\" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);if (!q) q = prompt(\"You didn't select any text.  Enter a search phrase:\", \"\");if (q!=null){window.open(\"https:\/\/en.wikipedia.org\/wiki\/\" + escape(q))}; void 0<\/code><\/pre>\n\n\n\n<p>And <strong><a rel=\"noreferrer noopener\" href=\"\/\/duckduckgo.com\/?q=&quot; + escape(q))}; void 0\" target=\"_blank\">for DuckDuckGo<\/a><\/strong>, cut past code below into a bookmark:<\/p>\n\n\n\n<p>javascript:q = &#8220;&#8221; + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);if (!q) q = prompt(&#8220;You didn&#8217;t select any text. Enter a search phrase:&#8221;, &#8220;&#8221;);if (q!=null){window.open(&#8220;https:\/\/duckduckgo.com\/?q=&#8221; + escape(q))}; void 0<\/p>\n\n\n\n<p>Anothjer that I think is useful for me is finding an address and then looking it up on google maps, so you <strong><a rel=\"noreferrer noopener\" href=\"\/\/maps.google.com?q='+escape(d).replace(\/ \/g,'+'))};void 0\" target=\"_blank\">select\/highlight the address then hit the bookmarklet and it opens a new Google Maps tab<\/a><\/strong> with a pin for the address, cut past code below into a bookmark:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript:d=''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(\/\\r\\n|\\r|\\n\/g,' ,');if(!d)d=prompt('Enter the address:', '');if(d!=null){window.open('https:\/\/maps.google.com?q='+escape(d).replace(\/ \/g,'+'))};void 0<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">GreaseMonkey<\/h3>\n\n\n\n<p>I&#8217;d heard of Greasemonkey doing the JS injection into a web page. There is a<strong><a rel=\"noreferrer noopener\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/greasemonkey\/\" target=\"_blank\"> Firefox add in<\/a><\/strong> for it. The video below goes through the fundamentals of what its trying to do:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Introduction to Greasemonkey\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/EiYi4EuqgpE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This allows you to programmatically change specific websites that you visit and store the script related to the actions. You can filter which websites it effects and create a library for different actions on different sites. As it sits in the background it automatically runs when you open the specified URL. <\/p>\n\n\n\n\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<p>I like the idea of being able to do more things with bookmarks and the bookmarklet is a nice feature to use, especially being able to alter some of the structure on existing pages, one I was playing with was transposing rows , altering bullet points to numbers and adding row numbers <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"300\" height=\"200\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-300x200.jpg\" alt=\"\" data-id=\"7002\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2.jpg\" data-link=\"https:\/\/max-drake.cc\/2021\/06\/09\/bookmarklets\/2021-06-10-15_52_43-covid-live-update_-175173365-cases-and-3777011-deaths-from-the-coronavirus-1-2\/\" class=\"wp-image-7002 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-300x200.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-1024x683.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-768x512.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-1536x1024.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-600x400.jpg 600w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-50x33.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-75x50.jpg 75w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-100x67.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-150x100.jpg 150w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-960x640.jpg 960w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-640x427.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-1152x768.jpg 1152w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-1620x1080.jpg 1620w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2-1920x1280.jpg 1920w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_52_43-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-2.jpg 1971w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/200;\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"1024\" height=\"586\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1024x586.jpg\" alt=\"\" data-id=\"7001\" data-full-url=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1.jpg\" data-link=\"https:\/\/max-drake.cc\/2021\/06\/09\/bookmarklets\/2021-06-10-15_53_13-covid-live-update_-175173365-cases-and-3777011-deaths-from-the-coronavirus-1-1\/\" class=\"wp-image-7001 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1024x586.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-300x172.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-768x440.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1536x880.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-2048x1173.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-50x29.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-87x50.jpg 87w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-100x57.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-175x100.jpg 175w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1118x640.jpg 1118w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-640x366.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1341x768.jpg 1341w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1886x1080.jpg 1886w, https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-15_53_13-COVID-Live-Update_-175173365-Cases-and-3777011-Deaths-from-the-Coronavirus-1-1-1920x1099.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/586;\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">This is transposing table on Covid data and adding line numbers <\/figcaption><\/figure>\n\n\n\n<p>I think these might have their place as productivity tools if they are in a handy location. Im please with colouring white background one for reducing eye strain on web pages, also the google and wiki searches too. I&#8217;ll bear them in mind for finding simple, practical uses. <\/p>\n\n\n\n<p>Searching for popular bookmarklets and articles such as the best 10 BMLets a lot I&#8217;d never use as they do not do much for me, but there is a potential for bespoke code for repetitive tasks like autofill forms and uploading data onto a form or database through a webpage, or even for some validation testing on websites. A handy button to run some simple code may be just the right process to use. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was looking at a Wassat (Wellington Open Source Show &amp; Tell) notice and looked back at one of the organisers, Grant, presentation on Bookmarklets on YouTube and slides. I thought it was an interesting idea and decided to explore it further. Basically you do add Javascript to the Address bar on a browser. This [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6983,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,42,29],"tags":[],"class_list":["post-6981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-productivity","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-600x400.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2021\/06\/2021-06-10-14_20_18-Bookmarklet-Creator-with-Script-Includer-Peter-Coles-\u2014-Mozilla-Firefox-600x600.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6981"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6983"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}