Scroll to text bookmarklet

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I forgot that <a href="https://wicg.github.io/ScrollToTextFragment/">Scroll to Text fragment</a> was a thing that is <a href="https://chromestatus.com/feature/4733392803332096">launching soon in Chrome (81 and not 80 as mentioned in Chrome Status)</a>, until I saw this <a href="https://twitter.com/stefanjudis/status/1225133056736088065?s=20">Tweet</a>.</p> <p>I love this feature, it let's you link to more than just named elements. Domenic Denicola asked if there was an extension that did this. I don't think you need one, because bookmarklets are awesome and underused. I decieded that it should be pretty quick to write up a simple bookmarklet that creates a link with a scroll to text anchor that you can share with people.</p> <p>Here it is. It get's the selected text, and creates a new URL and opens a window. I've noticted that 'scroll to text' can only scroll to whole words so I might need to add some logic that extends the selection so that it picks up partial words correctly.</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-Javascript" data-lang="Javascript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">selectedText</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getSelection</span>().<span style="color:#a6e22e">toString</span>(); <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newUrl</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">URL</span>(<span style="color:#a6e22e">location</span>); <span style="color:#a6e22e">newUrl</span>.<span style="color:#a6e22e">hash</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`:~:text=</span><span style="color:#e6db74">${</span>encodeURIComponent(<span style="color:#a6e22e">selectedText</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>; window.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">newUrl</span>); </code></pre></div><p>If you have Chrome 81 then you can drag this <a href="javascript:(function()%7Bconst%20selectedText%20%3D%20getSelection().toString()%3Bconst%20newUrl%20%3D%20new%20URL(location)%3BnewUrl.hash%20%3D%20%60%3A~%3Atext%3D%24%7BencodeURIComponent(selectedText)%7D%60%3Bwindow.open(newUrl)%7D)()">Find in page</a> bookmarklet to your address bar and easily create links that link to content.</p> <figure><video src="https://paul.kinlan.me/videos/2020-02-11-scroll-to-text-bookmarklet-0.mp4" alt="findbookmarklet1.mp4" controls></video></figure> <p>It's not too hard to extend this, for example if you wanted to just paste on to the clipboard you could do that by replacing the <code>window.open</code> line.</p> <p>Triff and Marv.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan