platypush-ext-reader-mode.js
· 3.6 KiB · JavaScript
Raw
/**
* A custom script for the Platypush browser extension that simplifies the
* current page by extracting the main content and displaying it in a clean
* format.
*
* This script uses the Mercury parser to extract the main content of the page
* and formats it for better readability.
*
* The parsed content will be added inside a new <div> element with a
* simplified style, and the previous page content will be hidden.
*
* (c) 2025 Fabio Manganiello <fabio@manganiello.tech>
* @license GNU General Public License v3.0
*/
// Entry point for the script. All the logic should be placed inside this function.
async (app, args) => {
// Get the current URL and DOM of the page.
const url = await app.getURL();
const dom = await app.getDOM();
const html = dom.body.innerHTML;
// Parse the page content using the Mercury parser API.
const response = await app.mercury.parse(url, html);
// Custom style for the simplified content.
// This uses a light style - you can modify it to suit your needs.
const style = `
<style>
.platypush__simplified-container {
background: #f0f0f0;
}
.platypush__simplified-body {
min-width: 40em;
max-width: 50em;
margin: 0 auto;
padding: 1em;
font-family: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 300;
color: #333;
background: white;
line-height: 1.25em;
text-align: justify;
}
.platypush__simplified-body h1 {
border-bottom: 1px solid black;
margin-bottom: 1.5em;
padding-top: 1em;
padding-bottom: 0.5em;
font-size: 1.5em;
line-height: 1.25em;
color: #333;
}
.platypush__simplified-body p,
.platypush__simplified-body ul,
.platypush__simplified-body li,
.platypush__simplified-body h2,
.platypush__simplified-body h3,
.platypush__simplified-body h4,
.platypush__simplified-body h5 {
color: #333 !important;
}
.platypush__simplified-body a {
color: #4078c0 !important;
}
.platypush__simplified-body p {
margin-bottom: 1.5em;
}
.platypush__original-body {
display: none;
}
.platypush__simplified-banner {
position: fixed;
top: 0.5em;
left: 0.5em;
color: black;
font-size: 2em;
z-index: 99999;
}
@media print {
.platypush__simplified-banner {
display: none;
}
}
</style>`;
// Create a new simplified div with the parsed content.
// .platypush__simplified-body contains the main content,
// .platypush__original-body contains the original (hidden) page content.
// An anchor link is provided to return to the original page content.
const simplifiedDiv = `
<div class="platypush__simplified-container">
<div class="platypush__simplified-banner">
<a href="#"
onclick="document.body.innerHTML = document.querySelector('.platypush__original-body').innerHTML; return false;">
‹
</a>
</div>
<div class="platypush__simplified-body">
<h1>${response.title}</h1>
${response.content}
</div>
<div class="platypush__original-body">
${dom.body.innerHTML}
</div>
</div>`;
// Add the custom style and the simplified content to the DOM.
dom.head.innerHTML += style;
dom.body.innerHTML = simplifiedDiv;
// Set the modified DOM back to the app.
await app.setDOM(`<html>${dom.getElementsByTagName('html')[0].innerHTML}</html>`);
}
| 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 | } |