-
Notifications
You must be signed in to change notification settings - Fork 18
Append Modes
At its core, Infy's settings comprise of the following two concepts: Actions and Append Modes.
- Actions - Lets Infy find the next page
- Append Modes - How the page should be appended
Infy offers six different append modes to help ensure the next page is appended correctly.
Append Modes List
- Page
- Iframe
- Element
- Media
- None
- AJAX
The Page append mode is the most basic and simplest append mode and will append the full page (including header and footer). Generally, you should try using this append mode first as it's the fastest/simplest option to use. Under the hood, it simply appends the next page's HTML to the existing document's body, as is. However, you may notice some broken HTML or images, in which case you may want to try the Iframe mode instead.
The Iframe append mode is similar to the Page mode and appends the full page (including header and footer). The difference is that the Iframe mode wraps each page in an Inline Frame. This puts each page in its own separate "environment" so that styles and scripts work properly for each appended page. The net effect is that this will usually help keep the HTML or images from breaking, but it will run a bit slower and consume more memory. If you notice broken HTML or images when using Page mode, try Iframe mode instead. If this fixes the issue, consider saving the URL so it always activates in Iframe mode the next time you visit or refresh the page.
This setting is useful on some websites where there may be a sticky header or nav bar that keeps following you as you scroll the page. Keeping Page 1 in an Iframe will encapsulate it so that Page 1's contents (e.g. that sticky nav bar) won't affect the other appended pages as you scroll. Note though that this setting will only work if Infy hasn't yet been enabled ("ON") on the page, so you may need to turn it off and then refresh the page first before enabling it.
This setting will use the iframe resizer library to resize the iframes automatically. It should almost always be checked. The only time you should uncheck this is if you notice that the iframes are incorrectly resized; in other words, if you notice that the iframes are too tall and have empty space at the bottom, or if they're too short and the content appears cropped.
If you have enabled the EXTRA Option, Open links in a new tab when clicking on them, you generally won't have to worry about this issue.
If you don't have the option enabled, when you click a link from one of the appended pages in Iframe mode, that one single appended page will navigate to the linked page, without affecting your other appended pages. In other words, the entire browser tab you are viewing won't refresh, so you'll still be able to scroll back up and down and view more appended pages.
However, if the link you clicked on points to a different domain, you won't see the new page at all. For example, say you are on Google Search and have Iframe mode on. If you click on one of the search result links, and it points to, say, Amazon.com, the new Amazon Page won't show up. This is because we can't serve content from two different domains on the same "tab page." If the Google Search link had instead pointed to a page on Google.com, the page would load fine.
To combat this click-link behavior, you can right-click the link and have it open in a new tab. This is a little annoying, but it's one of the few compromises in Iframe mode.
Unfortunately, some websites won't work in Iframe mode. Infy will try and let you know when this happens by displaying a message in red on the bottom of the page. This is almost always because the site cautiously set their X-Frame Options to DENY instead of SAMEORIGIN. It is possible to install an extension to override this behavior so that the site's X-Frame Options change to SAMEORIGIN, which will then allow it to "frame" itself, so to speak. There's a few extensions available on the web stores you can install that can reset this entirely, but this may be dangerous as these extensions will generally allow any domain to load in an iframe. I am currently working on my own extension called Xframey that will allow you to only specify SAMEORIGIN, and is a much safer alternative for our purposes.
The Element mode basically mimics what the AutoPagerize extensions do. This mode only appends specific elements on the page (like a specific div's child elements or a table's rows) instead of the entire page. This requires you to enter a Page Element Path, but it provides the most seamless appending experience compared to the two other Full Page modes (Page and Iframe).
The page element is simply the one specific part of the page you want to see. For example, on Google Search, the page element is going to be the search result items located on the middle of the page (not the header at the top).
In the Element append mode, Infy and AP use and track what's known an "insertion point." This is the specific point (Node) on the page in which it appends more and more elements. Initially, the insertion point is usually the last page element's sibling (if no sibling exists, a new text node that acts as its sibling is created and used). As more pages/elements are appended, this insertion point continues to travel towards the bottom of the page, and the process of appending elements repeats as you continue to scroll down.
Technical Note: Infy inserts the elements before the insertion point, instead of after it; this is so it doesn't have to keep re-calculating the insertion point as new elements are appended, but this distinction is not really important in understanding the basic idea.
There are three ways to find the Page Element Path:
- Infy's Auto Detect Page Element
- Infy's Element Picker
- Your Browser's DevTools
Auto Detect Page Element is a unique feature that will generate the Page Element for you in one click using an algorithm. Just click the magnifying glass (or "search") button and Infy will use its algorithm to try and detect the page element on its own. After you click the button, it will highlight the page element in purple for a few seconds so you should be able to see if it guessed right just by visually looking at the page. It will then generate the Page Element Path for you and show you the number of elements it found. If it looks right, you're ready to click the ACCEPT Button.
You can click the "eye-dropper" button next to the Page Element Path to enter the Element Picker mode. You'll then be able to click on any element on the page to select the Page Element. You generally just want to find the nearest parent element that contains all the child elements you want. For example, if you're on an image thumbnail website, you'd be looking for the nearest parent element that "contains" all the images. Just visually inspect the highlighted element to see if it contains what you need and click the Check Button to save. Then click the Toolbar Icon again to finalize any other settings and ACCEPT.
Check out the Element Picker section for more details and tips on how to use the EP.
Your browser comes equipped with DevTools. Here's how to find the Page Element with it:
- Right-click somewhere on the page
-
Inspectto open your Browser'sDevTools - In
DevTools, under theElementstab, observe the HTML structure of the page and try to find the nearest "parent" element that contains all the child elements that you want to append. For example, a parent div or table that contains all the child image thumbnails or data rows you want appended - Right-click the HTML "parent" element you found
-
Copy selectororCopy Xpathto get the path for the parent element. You may want to alter the path if it seems too verbose/specific - You can simply add
> *(Selector) or/*(XPath) to the parent's path to target all its child elements
URL: https://safebooru.org/index.php?page=post&s=list
On Safebooru, we'd like to append just the thumbnail image elements. Following the above instructions, we inspected the page and found that the "parent" element containing the child elements with the thumbnail images to be the div with the following Selector and XPath:
- Parent Element Path (Selector):
#post-list > div.content > div:nth-child(1) - Parent Element Path (XPath):
//*[@id="post-list"]/div[2]/div[1]
We now have our parent element. Since we simply want all the child elements of the parent, we can simply add the > * (Selector) or /* (XPath) to the parent path and get our final page element path:
- Page Element Path (Selector):
#post-list > div.content > div:nth-child(1) > * - Page Element Path (XPath):
//*[@id="post-list"]/div[2]/div[1]/*
The Element Iframe Mode Checkbox offers you a hybrid approach of the Iframe and Element append modes. If you notice blank or empty pages, images that aren't being loaded, or other issues, give this setting a try. It just might be what you need.
There's two sub-modes: Import and Trim. Both modes will work similarly and produce the same result most of the time. Import will import the elements from a hidden iframe and Trim appends a trimmed-down iframe containing just the page elements. Import is more memory-efficient in that it doesn't append each page as an iframe, but Trim may be needed on some sites where you need the iframe itself appended in order to keep images loaded, video previews working, or other event listeners (such as hover effects) working. So your strategy should be to try Import first and then try Trim second if Import isn't working to your liking.
Note about Trim: If you notice bad formatting with this mode (for example, the elements aren't displaying inline in a row properly), you may need to remove the last segment of the path. For example, if the Page Element Path is ul#post-list > *, you may need to shorten it to be just ul#post-list (removing the last > * segment).
The Insert Before path is completely optional and not something you really need to worry about in most cases. It simply allows you to adjust the insertion point of the page elements. It's useful for keeping some annoying footers or paginated dividers out of view on some websites. However, to give you an idea of how uncommonly used it is, out of all 3,000+ AutoPagerize Database URLs, only about 50 had Insert Before paths written for them (and several of them weren't even working). So, that's only about 1% of all URLs.
Media mode is for when you are viewing media/image files directly, e.g. the URL ends in 001.jpg and is pointing directly to the file. This mode can only be used when you are using the following actions:
- Increment URL
- URL List
In other words, the URL must be sequential (either incrementable, or you provide the list yourself). The reason why you can't use Next Link or Click Button is because those actions need to find an HTML element on the page (a link or a button), and if you are directly viewing an image, there obviously won't be an HTML element besides the image.
In this mode, Infy will attempt to fetch the next image (e.g. 002.jpg) and append it directly on the page, below the previous image, and keep doing so as you scroll down
This mode can also be useful when you are viewing images on your computer locally in a directory. For example, you can navigate to file:///C:/Users/My/Pictures/001.jpg in your browser and use Infy's Increment URL action to append all your pictures starting from 001.jpg to 100.jpg (or however many you have) all on the same page. Just ensure you have Allow access to file URLs toggled on in your Browser's Extensions Options for Infy Scroll. You can also use Auto and Slideshow modes while doing this.
None only works with the Click Element action. Use this append mode if you only need Infy to click a button for you, such as a "Load More" or "Show More Results" button. It's expected that the website itself will append the elements, so this append mode will have Infy do nothing (aside from performing the action).
AJAX is Infy's most advanced append mode in comes two flavors: Iframe and Native. (More details coming soon as time allows.)