fabio revised this gist . Go to revision
1 file changed, 124 insertions
platypush-ext-reader-mode.js(file created)
| @@ -0,0 +1,124 @@ | |||
| 1 | + | /** | |
| 2 | + | * A custom script for the Platypush browser extension that simplifies the | |
| 3 | + | * current page by extracting the main content and displaying it in a clean | |
| 4 | + | * format. | |
| 5 | + | * | |
| 6 | + | * This script uses the Mercury parser to extract the main content of the page | |
| 7 | + | * and formats it for better readability. | |
| 8 | + | * | |
| 9 | + | * The parsed content will be added inside a new <div> element with a | |
| 10 | + | * simplified style, and the previous page content will be hidden. | |
| 11 | + | * | |
| 12 | + | * (c) 2025 Fabio Manganiello <fabio@manganiello.tech> | |
| 13 | + | * @license GNU General Public License v3.0 | |
| 14 | + | */ | |
| 15 | + | ||
| 16 | + | // Entry point for the script. All the logic should be placed inside this function. | |
| 17 | + | async (app, args) => { | |
| 18 | + | // Get the current URL and DOM of the page. | |
| 19 | + | const url = await app.getURL(); | |
| 20 | + | const dom = await app.getDOM(); | |
| 21 | + | const html = dom.body.innerHTML; | |
| 22 | + | ||
| 23 | + | // Parse the page content using the Mercury parser API. | |
| 24 | + | const response = await app.mercury.parse(url, html); | |
| 25 | + | ||
| 26 | + | // Custom style for the simplified content. | |
| 27 | + | // This uses a light style - you can modify it to suit your needs. | |
| 28 | + | const style = ` | |
| 29 | + | <style> | |
| 30 | + | .platypush__simplified-container { | |
| 31 | + | background: #f0f0f0; | |
| 32 | + | } | |
| 33 | + | ||
| 34 | + | .platypush__simplified-body { | |
| 35 | + | min-width: 40em; | |
| 36 | + | max-width: 50em; | |
| 37 | + | margin: 0 auto; | |
| 38 | + | padding: 1em; | |
| 39 | + | font-family: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| 40 | + | font-size: 20px; | |
| 41 | + | font-weight: 300; | |
| 42 | + | color: #333; | |
| 43 | + | background: white; | |
| 44 | + | line-height: 1.25em; | |
| 45 | + | text-align: justify; | |
| 46 | + | } | |
| 47 | + | ||
| 48 | + | .platypush__simplified-body h1 { | |
| 49 | + | border-bottom: 1px solid black; | |
| 50 | + | margin-bottom: 1.5em; | |
| 51 | + | padding-top: 1em; | |
| 52 | + | padding-bottom: 0.5em; | |
| 53 | + | font-size: 1.5em; | |
| 54 | + | line-height: 1.25em; | |
| 55 | + | color: #333; | |
| 56 | + | } | |
| 57 | + | ||
| 58 | + | .platypush__simplified-body p, | |
| 59 | + | .platypush__simplified-body ul, | |
| 60 | + | .platypush__simplified-body li, | |
| 61 | + | .platypush__simplified-body h2, | |
| 62 | + | .platypush__simplified-body h3, | |
| 63 | + | .platypush__simplified-body h4, | |
| 64 | + | .platypush__simplified-body h5 { | |
| 65 | + | color: #333 !important; | |
| 66 | + | } | |
| 67 | + | ||
| 68 | + | .platypush__simplified-body a { | |
| 69 | + | color: #4078c0 !important; | |
| 70 | + | } | |
| 71 | + | ||
| 72 | + | .platypush__simplified-body p { | |
| 73 | + | margin-bottom: 1.5em; | |
| 74 | + | } | |
| 75 | + | ||
| 76 | + | .platypush__original-body { | |
| 77 | + | display: none; | |
| 78 | + | } | |
| 79 | + | ||
| 80 | + | .platypush__simplified-banner { | |
| 81 | + | position: fixed; | |
| 82 | + | top: 0.5em; | |
| 83 | + | left: 0.5em; | |
| 84 | + | color: black; | |
| 85 | + | font-size: 2em; | |
| 86 | + | z-index: 99999; | |
| 87 | + | } | |
| 88 | + | ||
| 89 | + | ||
| 90 | + | @media print { | |
| 91 | + | .platypush__simplified-banner { | |
| 92 | + | display: none; | |
| 93 | + | } | |
| 94 | + | } | |
| 95 | + | </style>`; | |
| 96 | + | ||
| 97 | + | // Create a new simplified div with the parsed content. | |
| 98 | + | // .platypush__simplified-body contains the main content, | |
| 99 | + | // .platypush__original-body contains the original (hidden) page content. | |
| 100 | + | // An anchor link is provided to return to the original page content. | |
| 101 | + | const simplifiedDiv = ` | |
| 102 | + | <div class="platypush__simplified-container"> | |
| 103 | + | <div class="platypush__simplified-banner"> | |
| 104 | + | <a href="#" | |
| 105 | + | onclick="document.body.innerHTML = document.querySelector('.platypush__original-body').innerHTML; return false;"> | |
| 106 | + | ‹ | |
| 107 | + | </a> | |
| 108 | + | </div> | |
| 109 | + | <div class="platypush__simplified-body"> | |
| 110 | + | <h1>${response.title}</h1> | |
| 111 | + | ${response.content} | |
| 112 | + | </div> | |
| 113 | + | <div class="platypush__original-body"> | |
| 114 | + | ${dom.body.innerHTML} | |
| 115 | + | </div> | |
| 116 | + | </div>`; | |
| 117 | + | ||
| 118 | + | // Add the custom style and the simplified content to the DOM. | |
| 119 | + | dom.head.innerHTML += style; | |
| 120 | + | dom.body.innerHTML = simplifiedDiv; | |
| 121 | + | ||
| 122 | + | // Set the modified DOM back to the app. | |
| 123 | + | await app.setDOM(`<html>${dom.getElementsByTagName('html')[0].innerHTML}</html>`); | |
| 124 | + | } | |
Newer
Older