mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2026-04-06 07:47:53 +10:00
make infiniscroll plugin also expand details and comments sections
This commit is contained in:
@@ -41,6 +41,11 @@
|
|||||||
"default": 16000,
|
"default": 16000,
|
||||||
"minimum": 1000,
|
"minimum": 1000,
|
||||||
"description": "Minimum page height to scroll to in pixels"
|
"description": "Minimum page height to scroll to in pixels"
|
||||||
|
},
|
||||||
|
"INFINISCROLL_EXPAND_DETAILS": {
|
||||||
|
"type": "boolean",
|
||||||
|
"default": true,
|
||||||
|
"description": "Expand <details> elements and click 'load more' buttons for comments"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,8 @@
|
|||||||
* ensuring at least INFINISCROLL_MIN_HEIGHT (default 16,000px) is reached.
|
* ensuring at least INFINISCROLL_MIN_HEIGHT (default 16,000px) is reached.
|
||||||
* Stops early if no new content loads after a scroll.
|
* Stops early if no new content loads after a scroll.
|
||||||
*
|
*
|
||||||
|
* Optionally expands <details> elements and clicks "load more" buttons.
|
||||||
|
*
|
||||||
* Usage: on_Snapshot__45_infiniscroll.js --url=<url> --snapshot-id=<uuid>
|
* Usage: on_Snapshot__45_infiniscroll.js --url=<url> --snapshot-id=<uuid>
|
||||||
* Output: JSONL with scroll stats (no files created)
|
* Output: JSONL with scroll stats (no files created)
|
||||||
*
|
*
|
||||||
@@ -16,6 +18,7 @@
|
|||||||
* INFINISCROLL_SCROLL_DISTANCE: Pixels per scroll (default: 1600)
|
* INFINISCROLL_SCROLL_DISTANCE: Pixels per scroll (default: 1600)
|
||||||
* INFINISCROLL_SCROLL_LIMIT: Max scroll iterations (default: 10)
|
* INFINISCROLL_SCROLL_LIMIT: Max scroll iterations (default: 10)
|
||||||
* INFINISCROLL_MIN_HEIGHT: Min page height to reach in px (default: 16000)
|
* INFINISCROLL_MIN_HEIGHT: Min page height to reach in px (default: 16000)
|
||||||
|
* INFINISCROLL_EXPAND_DETAILS: Expand <details> and comments (default: true)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function getEnv(name, defaultValue = '') {
|
function getEnv(name, defaultValue = '') {
|
||||||
@@ -91,6 +94,130 @@ function sleep(ms) {
|
|||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Expand <details> elements and click "load more" buttons for comments.
|
||||||
|
* Based on archivebox.ts expandComments function.
|
||||||
|
*/
|
||||||
|
async function expandDetails(page, options = {}) {
|
||||||
|
const {
|
||||||
|
timeout = 30000,
|
||||||
|
limit = 500,
|
||||||
|
delay = 500,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// First, expand all <details> elements
|
||||||
|
const detailsExpanded = await page.evaluate(() => {
|
||||||
|
let count = 0;
|
||||||
|
// Generic <details> elements
|
||||||
|
document.querySelectorAll('details:not([open])').forEach(el => {
|
||||||
|
el.open = true;
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
// Github README details sections
|
||||||
|
document.querySelectorAll('article details:not([open])').forEach(el => {
|
||||||
|
el.open = true;
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
// Github issue discussion hidden comments
|
||||||
|
document.querySelectorAll('div.js-discussion details:not(.details-overlay):not([open])').forEach(el => {
|
||||||
|
el.open = true;
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
// HedgeDoc/Markdown details sections
|
||||||
|
document.querySelectorAll('.markdown-body details:not([open])').forEach(el => {
|
||||||
|
el.open = true;
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
return count;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (detailsExpanded > 0) {
|
||||||
|
console.error(`Expanded ${detailsExpanded} <details> elements`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Then click "load more" buttons for comments
|
||||||
|
const numExpanded = await page.evaluate(async ({ timeout, limit, delay }) => {
|
||||||
|
// Helper to find elements by XPath
|
||||||
|
function getElementsByXPath(xpath) {
|
||||||
|
const results = [];
|
||||||
|
const xpathResult = document.evaluate(
|
||||||
|
xpath,
|
||||||
|
document,
|
||||||
|
null,
|
||||||
|
XPathResult.ORDERED_NODE_ITERATOR_TYPE,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
let node;
|
||||||
|
while ((node = xpathResult.iterateNext()) != null) {
|
||||||
|
results.push(node);
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
const wait = (ms) => new Promise(res => setTimeout(res, ms));
|
||||||
|
|
||||||
|
// Find all "load more" type buttons/links
|
||||||
|
const getLoadMoreLinks = () => [
|
||||||
|
// Reddit (new)
|
||||||
|
...document.querySelectorAll('faceplate-partial[loading=action]'),
|
||||||
|
// Reddit (old) - show more replies
|
||||||
|
...document.querySelectorAll('a[onclick^="return morechildren"]'),
|
||||||
|
// Reddit (old) - show hidden replies
|
||||||
|
...document.querySelectorAll('a[onclick^="return togglecomment"]'),
|
||||||
|
// Twitter/X - show more replies
|
||||||
|
...getElementsByXPath("//*[text()='Show more replies']"),
|
||||||
|
...getElementsByXPath("//*[text()='Show replies']"),
|
||||||
|
// Generic "load more" / "show more" buttons
|
||||||
|
...getElementsByXPath("//*[contains(text(),'Load more')]"),
|
||||||
|
...getElementsByXPath("//*[contains(text(),'Show more')]"),
|
||||||
|
// Hacker News
|
||||||
|
...document.querySelectorAll('a.morelink'),
|
||||||
|
];
|
||||||
|
|
||||||
|
let expanded = 0;
|
||||||
|
let loadMoreLinks = getLoadMoreLinks();
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
while (loadMoreLinks.length > 0) {
|
||||||
|
for (const link of loadMoreLinks) {
|
||||||
|
// Skip certain elements
|
||||||
|
if (link.slot === 'children') continue;
|
||||||
|
|
||||||
|
try {
|
||||||
|
link.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
link.click();
|
||||||
|
expanded++;
|
||||||
|
await wait(delay);
|
||||||
|
} catch (e) {
|
||||||
|
// Ignore click errors
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check limits
|
||||||
|
if (expanded >= limit) return expanded;
|
||||||
|
if (Date.now() - startTime >= timeout) return expanded;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for new load more links after clicking
|
||||||
|
await wait(delay);
|
||||||
|
loadMoreLinks = getLoadMoreLinks();
|
||||||
|
}
|
||||||
|
|
||||||
|
return expanded;
|
||||||
|
}, { timeout, limit, delay });
|
||||||
|
|
||||||
|
if (numExpanded > 0) {
|
||||||
|
console.error(`Clicked ${numExpanded} "load more" buttons`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
detailsExpanded,
|
||||||
|
commentsExpanded: numExpanded,
|
||||||
|
total: detailsExpanded + numExpanded,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async function scrollDown(page, options = {}) {
|
async function scrollDown(page, options = {}) {
|
||||||
const {
|
const {
|
||||||
timeout = 120000,
|
timeout = 120000,
|
||||||
@@ -206,6 +333,7 @@ async function main() {
|
|||||||
const scrollDistance = getEnvInt('INFINISCROLL_SCROLL_DISTANCE', 1600);
|
const scrollDistance = getEnvInt('INFINISCROLL_SCROLL_DISTANCE', 1600);
|
||||||
const scrollLimit = getEnvInt('INFINISCROLL_SCROLL_LIMIT', 10);
|
const scrollLimit = getEnvInt('INFINISCROLL_SCROLL_LIMIT', 10);
|
||||||
const minHeight = getEnvInt('INFINISCROLL_MIN_HEIGHT', 16000);
|
const minHeight = getEnvInt('INFINISCROLL_MIN_HEIGHT', 16000);
|
||||||
|
const expandDetailsEnabled = getEnvBool('INFINISCROLL_EXPAND_DETAILS', true);
|
||||||
|
|
||||||
const cdpUrl = getCdpUrl();
|
const cdpUrl = getCdpUrl();
|
||||||
if (!cdpUrl) {
|
if (!cdpUrl) {
|
||||||
@@ -247,6 +375,18 @@ async function main() {
|
|||||||
await page.setViewport({ width: resolution[0] || 1440, height: resolution[1] || 2000 });
|
await page.setViewport({ width: resolution[0] || 1440, height: resolution[1] || 2000 });
|
||||||
|
|
||||||
console.error(`Starting infinite scroll on ${url}`);
|
console.error(`Starting infinite scroll on ${url}`);
|
||||||
|
|
||||||
|
// Expand <details> and comments before scrolling (if enabled)
|
||||||
|
let expandResult = { total: 0, detailsExpanded: 0, commentsExpanded: 0 };
|
||||||
|
if (expandDetailsEnabled) {
|
||||||
|
console.error('Expanding <details> and comments...');
|
||||||
|
expandResult = await expandDetails(page, {
|
||||||
|
timeout: Math.min(timeout / 4, 30000),
|
||||||
|
limit: 500,
|
||||||
|
delay: scrollDelay / 4,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const result = await scrollDown(page, {
|
const result = await scrollDown(page, {
|
||||||
timeout,
|
timeout,
|
||||||
scrollDelay,
|
scrollDelay,
|
||||||
@@ -255,13 +395,26 @@ async function main() {
|
|||||||
minHeight,
|
minHeight,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Expand again after scrolling (new content may have loaded)
|
||||||
|
if (expandDetailsEnabled) {
|
||||||
|
const expandResult2 = await expandDetails(page, {
|
||||||
|
timeout: Math.min(timeout / 4, 30000),
|
||||||
|
limit: 500,
|
||||||
|
delay: scrollDelay / 4,
|
||||||
|
});
|
||||||
|
expandResult.total += expandResult2.total;
|
||||||
|
expandResult.detailsExpanded += expandResult2.detailsExpanded;
|
||||||
|
expandResult.commentsExpanded += expandResult2.commentsExpanded;
|
||||||
|
}
|
||||||
|
|
||||||
browser.disconnect();
|
browser.disconnect();
|
||||||
|
|
||||||
const elapsedSec = (result.elapsedMs / 1000).toFixed(1);
|
const elapsedSec = (result.elapsedMs / 1000).toFixed(1);
|
||||||
const finalHeightStr = result.finalHeight.toLocaleString();
|
const finalHeightStr = result.finalHeight.toLocaleString();
|
||||||
const addedHeight = result.finalHeight - result.startingHeight;
|
const addedHeight = result.finalHeight - result.startingHeight;
|
||||||
const addedStr = addedHeight > 0 ? `+${addedHeight.toLocaleString()}px new content` : 'no new content';
|
const addedStr = addedHeight > 0 ? `+${addedHeight.toLocaleString()}px new content` : 'no new content';
|
||||||
const outputStr = `scrolled to ${finalHeightStr}px (${addedStr}) over ${elapsedSec}s`;
|
const expandStr = expandResult.total > 0 ? `, expanded ${expandResult.total}` : '';
|
||||||
|
const outputStr = `scrolled to ${finalHeightStr}px (${addedStr}${expandStr}) over ${elapsedSec}s`;
|
||||||
|
|
||||||
console.error(`Success: ${outputStr}`);
|
console.error(`Success: ${outputStr}`);
|
||||||
console.log(JSON.stringify({
|
console.log(JSON.stringify({
|
||||||
|
|||||||
Reference in New Issue
Block a user