-
Notifications
You must be signed in to change notification settings - Fork 18
Append Modes
If you decide to use Infy manually (by clicking its toolbar icon), there's basically two components in the UI that you'll be dealing with: Actions and Append Modes:
- Actions - Lets Infy find the next page
- Append Modes - How the page should be appended
Infy features various append modes to help ensure the next page is appended correctly.
Append Modes List
- Page
- Iframe
- Element (AutoPagerize)
- Media
- None
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 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. Wrapping Page 1 in an Iframe will encapsulate it so that Page 1 will not 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.
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 Rule, 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 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.
There are three ways to find the Page Element Rule:
- Infy's Auto Detect Page Element
- Infy's Element Picker
- Your Browser's DevTools
Auto Detect Page Element is a unique feature I designed that will actually generate the Page Element for you in one click. 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 Rule 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 Rule 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 rule for the parent element. You may want to alter the rule if it seems too verbose/specific - You can simply add
> *(Selector) or/*(XPath) to the rule for the parent 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 Rule (Selector):
#post-list > div.content > div:nth-child(1) - Parent Element Rule (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 rule and get our final page element rule:
- Page Element Rule (Selector):
#post-list > div.content > div:nth-child(1) > * - Page Element Rule (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.
Note: 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 Rule is ul#post-list > *, you may need to shorten it to be just ul#post-list (removing the last > * segment).
The Insert Before rule 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 40 had Insert Before rules 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.
.