├── README.md ├── index.html ├── quickedit.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Quick-edit-bookmarklet 2 | 3 | A bookmarklet to make quick edits to any web site 4 | 5 | [Go to the page for more info](https://codepo8.github.io/Quick-edit-bookmarklet/) 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quick Edit Bookmarklet 7 | 8 | 9 | 10 |
11 |

Quick Edit Bookmarklet

12 |
13 |
14 |

This is a bookmarklet that make the current website editable. You can change the content around and when you hit `ESC` you go back to normal mode. Notice that this is not permanent, reloading the page will undo your changes. This should only make it easier to edit a page before creating a screenshot or similar tasks.

15 |

Drag the following link to your bookmarks bar to get the functionality.

16 | 17 |

Quick Edit

18 |
19 | 25 | 32 | 33 | -------------------------------------------------------------------------------- /quickedit.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | document.designMode='on'; 3 | const s=document.createElement('style'); 4 | s.innerHTML=`body::before{content:'✏️ Edit Mode (ESC to end)';z-index:64;padding:1em;background:white;color:black;display:block;margin:1em;font-size:30px;border:5px solid green;}`; 5 | document.body.appendChild(s); 6 | window.scrollTo(0,0); 7 | document.addEventListener('keyup',e => { 8 | if(e.key==='Escape'){ 9 | document.designMode='off'; 10 | s.remove(); 11 | document.removeEventListener('keyup',e); 12 | } 13 | }); 14 | })(); 15 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --canvas: #eee; 3 | --body: #f8f8f8; 4 | --text: #000; 5 | --shadow: #666; 6 | --h1: green; 7 | --separator: #999; 8 | --link: #369; 9 | --bookmarkbg: #369; 10 | --bookmarkcolour: #fff; 11 | --buttonhover: #69c; 12 | --buttonhovertext: #333; 13 | --footercolour: #999; 14 | --footerbg: #666; 15 | } 16 | @media (prefers-color-scheme: dark) { 17 | :root { 18 | --canvas: #111; 19 | --body: #222; 20 | --text: #ccc; 21 | --h1: orange; 22 | --shadow: #000; 23 | --separator: #999; 24 | --link: #369; 25 | --bookmarkbg: #369; 26 | --buttonhover: #69c; 27 | --buttonhovertext: #333; 28 | --bookmarkcolour: #fff; 29 | --footercolour: #999; 30 | --footerbg: #666; 31 | } 32 | } 33 | html { 34 | background: var(--canvas); 35 | padding: 1em; 36 | } 37 | body { 38 | font-family: Segoe UI, Arial, Helvetica, sans-serif; 39 | color: var(--text); 40 | font-size: 2vh; 41 | margin: 0 auto; 42 | max-width: 30em; 43 | padding: .5em 1em; 44 | background: var(--body); 45 | box-shadow: 2px 2px 10px var(--shadow); 46 | } 47 | h1 { 48 | border-bottom: 1px solid var(--separator); 49 | font-weight: normal; 50 | color: var(--h1); 51 | } 52 | a { 53 | color: var(--link); 54 | } 55 | .bookmarklet { 56 | display: flex; 57 | align-items: center; 58 | } 59 | .bookmarklet a:not([href]) {display: none} 60 | .bookmarklet a[href] { 61 | border-radius: 10px; 62 | display: inline-block; 63 | padding: .5em; 64 | text-decoration: none; 65 | font-weight: bold; 66 | margin: 1em auto; 67 | background-color: var(--bookmarkbg); 68 | color: var(--bookmarkcolour); 69 | } 70 | .bookmarklet a:hover { 71 | background: var(--buttonhover); 72 | color: var(--buttonhovertext); 73 | } 74 | footer { 75 | color: var(--footercolour); 76 | } 77 | footer a { 78 | color: var(--footerbg); 79 | } 80 | --------------------------------------------------------------------------------