On a phone or tablet there is no bookmarks bar to drag to. Use Copy the code, then follow the phone and tablet steps below.
Drag this button to your bookmarks bar:
Clicking it here does nothing. Drag it to the bookmarks bar, then click it while reading any page with some text selected.
Read the code before you install it
javascript:(function(){var s=window.getSelection?String(window.getSelection()).trim():'';if(!s){alert('Select some text on the page first, then click Highlight this.');return;}function e(t){return encodeURIComponent(t).replace(/-/g,'%2D');}var u=location.href.split('#')[0],w=s.split(/\s+/),f;if(w.length>12){f=e(w.slice(0,5).join(' '))+','+e(w.slice(-4).join(' '));}else{f=e(s);}var link=u+'#:~:text='+f;try{var r=window.getSelection().getRangeAt(0),m=document.createElement('mark');m.style.cssText='background:#f5c400;color:#1c1b17;padding:0 .1em;border-radius:3px';r.surroundContents(m);}catch(x){}var d=document.createElement('div');d.setAttribute('role','dialog');d.setAttribute('aria-label','Awesome Highlighter');d.style.cssText='position:fixed;top:12px;right:12px;z-index:2147483647;width:340px;max-width:92vw;font:14px/1.45 -apple-system,Segoe UI,Inter,Roboto,sans-serif;background:#1c1b17;color:#f6f4ec;padding:14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)';var h=document.createElement('div');h.textContent='Link to this highlight';h.style.cssText='font-weight:700;margin:0 0 8px;color:#f5c400';var i=document.createElement('input');i.value=link;i.readOnly=true;i.setAttribute('aria-label','Highlight link');i.style.cssText='width:100%;box-sizing:border-box;font:13px/1.3 inherit;padding:8px;border:1px solid #5a4700;border-radius:6px;background:#232328;color:#f1efe6';var b=document.createElement('button');b.textContent='Copy link';b.style.cssText='margin:10px 8px 0 0;padding:8px 12px;border:0;border-radius:6px;background:#f5c400;color:#1c1b17;font:600 14px inherit;cursor:pointer';b.onclick=function(){i.select();var ok=false;try{if(navigator.clipboard){navigator.clipboard.writeText(link);ok=true;}}catch(x){}if(!ok){try{document.execCommand('copy');}catch(x){}}b.textContent='Copied';};var c=document.createElement('button');c.textContent='Close';c.style.cssText='margin-top:10px;padding:8px 12px;border:1px solid #6f6b60;border-radius:6px;background:transparent;color:#f6f4ec;font:600 14px inherit;cursor:pointer';c.onclick=function(){d.parentNode.removeChild(d);};d.appendChild(h);d.appendChild(i);d.appendChild(b);d.appendChild(c);document.body.appendChild(d);i.select();})();It reads your selection and the page address, wraps the selection in a yellow mark, builds a text fragment link and shows a small panel with a Copy button. It loads nothing from any server and sends nothing anywhere.
Installing it
Show your bookmarks bar
Chrome, Edge, Brave: press Ctrl (or Command) + Shift + B. Firefox: right-click the toolbar, choose Bookmarks Toolbar, Always Show. Safari: View, Show Favourites Bar.
Drag the yellow button onto the bar
Drag "Highlight this" from the box above and drop it on the bookmarks bar. It becomes a bookmark called Highlight this. You can rename it.
Use it
On any page, select some text and click the bookmark. The selection turns yellow and a panel appears at the top right with a link. Press Copy link and send it.
| Browser | Show the bookmarks bar | Then |
|---|---|---|
| Chrome, Edge, Brave | Ctrl (or Command) + Shift + B | Drag Highlight this onto the bar |
| Firefox | Right-click the toolbar, choose Bookmarks Toolbar, Always Show | Drag Highlight this onto the bar |
| Safari | View, Show Favourites Bar | Drag Highlight this onto the bar |
| Any browser, no drag | Not needed | Use Copy the code, add a new bookmark and paste the code as its address |
On a phone or tablet
On a phone or tablet there is no bookmarks bar to drag to, so installation is a paste: bookmark any page, edit the bookmark, and replace its address with the code shown in "Read the code" above. Run it from the bookmarks menu while viewing a page. It is clumsy but works; on phones you may prefer the share-sheet method described in highlighting on a phone.
- Press Copy the code above.
- Bookmark any page.
- Edit that bookmark: name it Highlight this and replace its address with the code.
- On the page you are reading, select some text, then open your bookmarks and choose Highlight this.
Try it on this page
You do not need to install anything to see what it does. Select a few words in the practice text below and press the button: this page runs the same steps the bookmarklet runs.
Practice text
A bookmarklet is exactly as safe as its code, and the code is printed above and stored inside your bookmark where you can read it any time. The highlight is carried inside the link, so it depends on nothing but the page keeping the same words.
Select some words in the practice text, then press Highlight my selection.
Link to this highlight
What it does, exactly
- Reads the text you have selected on the page. If nothing is selected, it says so and stops.
- Wraps the selection in a yellow mark so you can see it while you stay on the page. This is visual only; reloading the page removes it.
- Builds a text fragment link to the selection: the page address plus
#:~:text=and your words. For long selections it uses a range (the first five words to the last four) so the link stays short. - Shows a small panel with the link, a Copy button and a Close button. Copy puts the link on your clipboard.
- Loads nothing from any server and sends nothing anywhere. The full code is printed above so you can check.
About the link it makes
The link opens the page in any current browser scrolled to your selection with it highlighted; the person receiving it needs nothing installed. The highlight is carried inside the link, so it depends on nothing but the page keeping the same words. If the page later changes the sentence, the link still opens the page, just without the highlight. The guide to linking to highlighted text explains the format and the ways links break; the link generator makes the same links from an address and a sentence when you are not on the page.
Where it does not work
| Situation | What happens | What to do |
|---|---|---|
| A site blocks inline scripts (strict security policy) | Nothing happens when you click | Copy the sentence and use the link generator |
| The selection crosses into a different block (heading to paragraph) | The link is made but the yellow mark may not appear | Select within one paragraph |
| Text inside a frame from another site | Selection cannot be read | Open the framed page directly |
| Phones and tablets | No bookmarks bar | Paste-install, or use Share from the selection |
| Very long selections | Link uses a start and end phrase | Fine; or select less |
Troubleshooting the install
- A message says to select text first. Nothing was selected when you clicked. Drag across the words, then click the bookmark.
- The button will not drop onto the bar. The bar is hidden, or the browser is in full screen. Show the bar (step 1) and try again, or use Copy the code.
- Clicking the bookmark opens this page instead. You bookmarked the page itself (for example with the star in the address bar), not the yellow button. Delete that bookmark and drag Highlight this.
- Nothing at all happens. The site blocks bookmarklets with a strict security policy. Use the link generator for that page.
What happened to the Firefox add-on
Many people arrive here from links to AwesomeHighlighter.xpi, the Firefox add-on the original site offered alongside the bookmarklet from 2008. That add-on relied on the old extension system Firefox retired in 2017 and on servers that closed around 2015; it cannot be installed or made to work. We have not published a new extension, deliberately: the bookmarklet does the job with no permissions, and if you want highlights that are saved and re-applied across visits, our comparison of highlighter extensions points you to well-maintained options. The history page tells the full story.
Is it safe?
A bookmarklet is exactly as safe as its code, and the code is printed above and stored inside your bookmark where you can read it any time. Three checks for any bookmarklet: does it load a script from another server (this one does not), does it send anything anywhere (no), does it read more than it needs (it reads your selection and the page address only). Our page on what bookmarklets are explains how to apply those checks to anything else you find.
Common questions
How do I install the highlighter bookmarklet?
Show your bookmarks bar, then drag the yellow Highlight this button onto it. On phones, bookmark any page and replace its address with the code printed on this page.
Does the bookmarklet save my highlights?
No. It marks the selection on your screen and gives you a link to it. Save the link if you want to come back; use an extension if you want highlights re-applied automatically.
Does it work on Chrome, Firefox, Safari and Edge?
Yes, on the desktop versions of all of them. Some sites block bookmarklets with a strict security policy; use the link generator there.
Why does it say to select text first?
It needs a selection to know what to highlight. Drag across the words, then click the bookmark.
Can I change the highlight colour?
The bookmarklet uses the classic yellow. You can edit the colour value in the bookmark's code if you like; it is the #f5c400 near the start.
Is this the same bookmarklet as the 2008 one?
Same purpose, new code. The original sent your page to a server and saved a copy; this one builds a standard text fragment link in your browser and stores nothing.
Sources
- WICG URL Fragment Text Directives specification
- Mozilla: legacy extensions retired with Firefox 57 (November 2017)