A HN comment a while ago reported that you can switch to the 'reader mode' view of a website by prefixing the URL with 'about:reader?url=' - this can be useful for some pages where FF doesn't put the 'reader mode' button in the URL bar.
This seemed like an ideal use for a bookmarklet, so I created one as follows:
javascript:(function(){
window.location = "about:reader?url=" + window.location;
})()
But, this doesn't work. In the console I get the error:TypeError: Location.href setter: Access to 'about:reader?url=https://www.example.com/' from script denied.
Is there any way to work around this, or do bookmarklets simply not have the permissions to alter the URL like this?
Also, you don’t have to wrap it in a function; you can just do
javascript:location.href='foo:/bar/'+document.location.href;
at the bottom
Note: You must access about: protocol pages by typing them into the address bar. Attempts to navigate through window.location will throw — Error: Access to 'about:addons' from script denied.
I suppose it might work if I put it into an extension of some sort, if not then I think to make it work on Windows it would be easiest to have an AutoHotkey script that prepended about:reader?url= on the address line and pressed enter for you.
I have as yet to find a worthwhile AutoHotkey competitor on Linux or MacOs.
[1] https://www.crunchbase.com/organization/spritz#section-overv...
It also shows that "money raised" is not always a good metric for success.
I developed and sold a speed-reading app on iOS for a few years and users frequently wrote in to ask for Spritz support. Spritz had a patent (or patent application) and was known to shut down [1] non-licensees, so I looked over their API's terms of usage. Unfortunately they required users to create individual accounts with them. As this would enable them to track who was reading what with their technology, it was a non-starter for me and I'm sure many other devs felt the same way.
A couple of others I use frequently:
Go to referrer. This fixes an infuriating missing feature in browsers, where links opened in new tabs lose their history (why?). Often this workaround will work:
javascript:if(!document.referrer)%20alert(%22No%20referrer!%22);%20else%20document.location%20=%20document.referrer;%20void%200
Open in wayback machine. For when you follow a link and there's nothing there anymore. javascript:{var%20url=location.href;void(window.open("http://wayback.archive.org/web/*/"+url));}One that I also use regularly, related to your "Open in wayback machine", is "Save to wayback machine". That way it'll be there when you click it!
javascript:location.href %3D %27//web.archive.org/save/%27 %2B location.href.split(%27%3F%27)%5B0%5D%3BSubmitted title was "Show HN: Some Bookmarklets, I Use".
The benefit of using the add-on in Firefox is it a keyboard shortcut (that you can customize). So now instead of having to find+click a bookmarklet, I just hit cmd+shift+k on most sites I visit.
That said, we can't find the option to set a keyboard shortcut (Ctrl+Shift+k opens the web console), in Xubuntu 18.04, any clue as to why?
edited typo
As is, if you + - + -, you end up at 0.87890625 instead of 1.
CTRL+[ Decrease Speed
CTRL+] Increase Speed
CTRL+\ Set Increment Unit
CTRL+' Set Speed to Specific Rate
CTRL+; Reset Playback to Default
javascript:(function()%7B(function()%20%7Bvar%20rateUnit%20%20%20%20%3D%200.2%3Bvar%20osdTimeout%20%20%3D%203000%3Bvar%20eleOSD%2C%20osdTimer%3Bfunction%20showOSD(rate)%20%7Bif%20(eleOSD)%20%7BeleOSD.textContent%20%3D%20rate%20%2B%20%22X%22%3B%7D%20else%20%7BeleOSD%20%3D%20document.createElement(%22DIV%22)%3BeleOSD.style.cssText%20%3D%20%22position%3Afixed%3Bz-index%3A999999999%3Bright%3A5px%3Bbottom%3A5px%3Bmargin%3A0%3Bpadding%3A5px%3Bwidth%3Aauto%3Bheight%3Aauto%3Bfont%3Abold%2010pt%2Fnormal%20monospace%3Bbackground%3A%23444%3Bcolor%3A%23fff%22%3BeleOSD.textContent%20%3D%20rate%20%2B%20%22X%22%3Bdocument.body.appendChild(eleOSD)%3B%7DclearTimeout(osdTimer)%3BosdTimer%20%3D%20setTimeout(function()%20%7BeleOSD.remove()%3BeleOSD%20%3D%20null%3B%7D%2C%20osdTimeout)%3B%7DaddEventListener(%22keydown%22%2C%20function(ev)%20%7Bvar%20ele%20%3D%20document.querySelector(%22VIDEO%22)%2C%20rate%2C%20inp%3Bif%20(ele%20%26%26%20ev.ctrlKey%20%26%26%20!ev.shiftKey%20%26%26%20!ev.altKey)%20%7Brate%20%3D%20rate%20%3D%20ele.playbackRate%3Bswitch%20(ev.key)%20%7Bcase%20%22%5B%22%3Arate%20-%3D%20rateUnit%3Bif%20(rate%20%3C%200.1)%20rate%20%3D%200.1%3Bbreak%3Bcase%20%22%5D%22%3Arate%20%2B%3D%20rateUnit%3Bif%20(rate%20%3E%2016)%20rate%20%3D%2016%3Bbreak%3Bcase%20%22%5C%5C%22%3Aif%20((inp%20%3D%20prompt(%22Enter%20playback%20rate%20increment%2Fdecrement%20unit.%22%2C%20rateUnit))%20%3D%3D%3D%20null)%20return%3Bif%20(isNaN(inp%20%3D%20parseFloat(inp.trim()))%20%7C%7C%20(inp%20%3C%3D%200)%20%7C%7C%20(inp%20%3E%204))%20%7Balert(%22Number%20must%20be%20greater%20than%20zero%2C%20and%20less%20or%20equal%20to%204.%22)%3Breturn%3B%7DrateUnit%20%3D%20inp%3Breturn%3Bcase%20%22'%22%3Aif%20((inp%20%3D%20prompt(%22Enter%20playback%20rate.%5Cn(1.0%20%3D%20Normal)%22%2C%20rate))%20%3D%3D%3D%20null)%20return%3Bif%20(isNaN(inp%20%3D%20parseFloat(inp.trim()))%20%7C%7C%20(inp%20%3C%200.1)%20%7C%7C%20(inp%20%3E%2016))%20%7Balert(%22Number%20must%20be%20between%200.1%20to%2016%20(inclusive).%22)%3Breturn%3B%7Drate%20%3D%20inp%3Bbreak%3Bcase%20%22%3B%22%3Arate%20%3D%201%3Bbreak%3Bdefault%3Areturn%3B%7Drate%20%3D%20parseFloat(rate.toFixed(2))%3Bele.playbackRate%20%3D%20rate%3Bif%20(osdTimeout%20%3E%200)%20showOSD(ele.playbackRate)%3B%7D%7D)%3B%7D)()%7D)()data:text/html, <body contenteditable style="margin:2rem;">
Open the above as URL in a browser tab and bookmark.
javascript:if(document.body.contentEditable=="true"){ document.body.contentEditable="false"; document.designMode="off"; document.body.spellcheck=true;} else { document.body.spellcheck=false; document.body.contentEditable="true"; document.designMode="on";}; void(0);Shortened version of your bookmarklet, for fun:
javascript:document.designMode=(document.body.spellcheck=document.designMode=='on')?'off':'on'And then you can put bookmarklets into that.
I do not keep a bookmarks toolbar active, and also prefer to do things on the keyboard whenever possible.
The bones of it:
// ==UserScript==
// @name Personal jmapui tweaks
// @version 1
// @grant none
// ==/UserScript==
addEventListener("keypress", event => {
if (event.target …) { return; }
if (event.key == 'x' && event.ctrlKey && !event.metaKey …) {
window.eval('…');
}
});
You’ll want to do things like skip events targeted at form elements or within a contenteditable, perhaps unless you use a suitable modifier.It may be helpful to flatten the modifiers and key into a single string, like "Ctrl-Meta-Shift-S", and match on that.
The security interactions between your user script code and document code are fiddly and troublesome, and debugging is distressingly limited. I find using window.eval(`…`) to be a good technique for executing arbitrary code in the security context of the page itself.
https://chrome.google.com/webstore/detail/speed-dial-for-goo...
There are other more powerful ones i am playing with
head, title {
display: block;
position: sticky;
top: 0;
left: 0;
right: 0;
}
An example of using this technique (minus stickyness) in real life (for some loose value of “real life”): https://github.com/martenbjork/github-xp/issues/13You can apply this technique to <script> and <style> content as well to get other text nodes that are normally hidden to appear on-screen. You could also use ::before and ::after psuedoelements on other elements (and for bonus marks remember you can use attr() within their content). But no regular formatting within the head. Well, unless you append the nodes to the head with JavaScript. Yeah, the DOM lets you create nominally illegal structures that can’t be serialised again.
In case anyone is wondering, bookmarklets also work on mobile devices. You can simply go to the address bar and type the name of the bookmarklet (e.g.: 'remove sticky') and then click the option that shows up in the list.
Adding them to your mobile browser is a bit tricky though. I've written a small guide that helps users of my app [0] add my bookmarklet to Android/iOS devices. You can follow these steps/screenshots to add other bookmarklets - https://www.emailthis.me/web-page-to-email/how-to-save#andro...
(I've popped "Show HN" off the title now.)
> Blog posts, sign-up pages, curated lists, and other reading material can't be tried out, so can't be Show HNs.
It's a list, but it's not intended to be consumed the way a list of books or other resources is meant to. It's a list of useful scripts that can be tried right away.
javascript: var TIMER_WAIT = 1000; var timer = 0; var topComment = []; var list = document.getElementsByClassName('togg'); for (let item of list) { if (item.parentElement.parentElement.parentElement.parentElement.getElementsByTagName('img')[0].width == 0) topComment.push(item) }; for (let item of topComment) { setTimeout(() => { console.log("toggling comment by " + item.parentNode.getElementsByClassName('hnuser')[0].innerText); item.click(); }, timer + TIMER_WAIT); timer = timer + TIMER_WAIT; }They haven't been updated in a while but they work perfectly in latest FF (and Chrome I suppose).
Add jQuery to any page:
void((function(doc){if(typeof jQuery=='undefined'){var script_jQuery=document.createElement('script');script_jQuery.setAttribute('src','//code.jquery.com/jquery-latest.min.js');document.body.appendChild(script_jQuery);console.log('jQuery added');}else{console.log('jQuery already included');}})(document));
Edit any page: javascript:document.body.contentEditable = true; void 0;
Make the right click work again: javascript:void(document.onmousedown='return true');void(document.onmouseup='return true');void(document.oncontextmenu='return true') javascript: (function() {
void([].forEach.call(document.querySelectorAll('body*'), e => /fixed|sticky/.test(getComputedStyle(e).position) && e.parentNode.removeChild(e)));
document.body.style.overflow = 'auto';
document.body.style.height = 'auto';
document.all[0].removeAttribute("class")
})()My free service where you can create bookmarklets. I use them for various things. One thing I am quite happy about lately is generating random things for forms. I use this when I test things in the browser at work, signup flows, etc.
Another thing that is useful is turning on dark mode for things: https://bookmarkify.it/33985
I recently created this one to help with my particular GitHub workflow - instantly diff any commit with the current master branch: https://gist.github.com/zmarkan/503789d31acf385e44f13b0b3c3c...
It lets you directly edit most content on a site. Kind of nice for quickly changing the wording to see if it fits nicely in a layout.
You can paste it into the URL bar to test it out. Just manually add "javascript:" since browsers tend to strip that out on paste.
javascript:window.location=%22http://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)Open the oldest archive of the current url:
javascript:(function(){ document.location.href = "http://archive.is/oldest/" + document.location.href; })();
Open the most recent archive of the current url:
javascript:(function(){ document.location.href = "http://archive.is/newest/" + document.location.href; })();
javascript:(function(){for(i=0;i<document.links.length;i++)document.links[i].style.backgroundColor='#ffff00';})(); javascript:(function(){function%20init(){var%20newline=unescape(%22%%22+%220A%22);dead=false;oldCSS=null;x=opener;ta=document.f.ta;ta.select();ta.value=%22/*%20Type%20CSS%20rules%20here%20and%20they%20will%20be%20applied%20to%22+newline+%22whatever%20page%20is%20loaded%20in%20that%20tab,%20as%20long%20as%20the%20pages%22+newline+%22are%20from%20'%22+location.host+%22'%22+newline+%22and%20you%20keep%20this%20window%20open.%20*/%22+newline+newline;update();}function%20update(){try{if(!x||x.closed){ta.style.backgroundColor=%22#ddd%22;return;}x.bookmarkletStyleSheet;}catch(er){ta.style.backgroundColor=%22#fdc%22;setTimeout(update,150);dead=true;return;}if(dead){dead=false;ta.style.backgroundColor=%22%22;oldCSS=null;}if(!x.testStyles){var%20newSS;newSS=x.document.createElement(%22link%22);newSS.rel=%22stylesheet%22;newSS.type=%22text/css%22;x.document.getElementsByTagName(%22head%22)[0].appendChild(newSS);x.testStyles=newSS;oldCSS=null;}if(oldCSS!=ta.value){oldCSS=ta.value;if(window.opera)x.testStyles.href=%22javascript:unescape('%22+escape(ta.value)+%22')%22;else%20if(navigator.userAgent.indexOf(%22MSIE%22)!=-1)x.testStyles.href=%22javascript:unescape('%22+escape(escape(ta.value))+%22')%22;else%20x.testStyles.href=%22data:text/css,%22+escape(ta.value);}setTimeout(update,150);}y=window.open('','','resizable,width=500,height=300');y.document.write('<title>New%20CSS%20Style%20Sheet</title><style>.ec%20{%20width:%20100%;%20height:%20100%;%20border:%20none;%20margin:%200px;%20padding:%200px;%20}</style><body%20class=%22ec%22><form%20name=%22f%22%20style=%22margin:%200px;%22%20class=%22ec%22><textarea%20name=%22ta%22%20wrap=%22soft%22%20style=%22margin:%200px;%20border:%200px;%20width:100%;%20height:100%;%22%20class=%22ec%22></textarea><script>'+update+init+'init();<'+'/script>');y.document.close();})()
To quickly edit the css style of anything.And:
javascript:(function()%7Blet%20style%20%3D%20document.getElementById('__colorallblocks__')%3Bif%20(style)%7Bstyle.remove()%3B%7D%20else%20%7Bstyle%20%3D%20document.createElement('style')%3Bstyle.id%20%3D%20'__colorallblocks__'%3Bstyle.innerHTML%20%3D%20%60*%20%7B%20background-color%3A%20rgba(255%2C0%2C0%2C.2)%3B%20%7D*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C0%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C0%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C255%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(255%2C0%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C255%2C0%2C.2)%3B%20%7D*%20*%20*%20*%20*%20*%20*%20*%20*%20%7B%20background-color%3A%20rgba(0%2C0%2C255%2C.2)%3B%20%7D%60%3Bdocument.body.appendChild(style)%3B%7D%7D)()
To color all blocks in a page.But if the equivalent exist as a Firefox add on, I use that instead, because it bypasses many restrictions.
In this article, the video BM can be replaced with the excellent "Enhancer for Youtube", at least on Youtube: https://addons.mozilla.org/fr/firefox/addon/enhancer-for-you.... Just being able to change the speed of the video using the mouse wheel is a god send.
Same for archive.li or the way back machine.
But I'll steal the space scroll one, this red bar is nifty.
You can even add them as right-click menu options for those scripts which you rarely use!