-
Notifications
You must be signed in to change notification settings - Fork 19
Scripts and Styles
For some sites, you may want to execute some custom JavaScript code whenever Infy appends a new page. For example, you may want to write custom code that fixes missing images.
There's two types of scripts you can write:
- Scripts that listen for Custom Events
- Scripts that implement a MutationObserver
Whenever Infy appends a new element or page, you can have it trigger a Custom Event. This allows you to write a script that listens for these events and then execute some code.
First, make sure you have Custom Events enabled by going into Infy's Options > Extra section and enabling the following checkbox:
Trigger custom events so that external custom scripts can be enabled
Infy supports the three custom events that the original AutoPagerize uses, and for backwards compatibility, the event names are the exact same in case there's a userscript that you want to use. For example, here's a userscript from Greasy Fork that helps with lazily loaded images: AutoPagerize LazyLoad Assistant.
Supported Events:
- AutoPagerize_DOMNodeInserted
- GM_AutoPagerizeNextPageLoaded
- GM_AutoPagerizeLoaded
Important: In the future, Infy Scroll will no longer support AutoPagerize event names and will switch over to using event names named after itself. This will be a breaking change and require you to update any scripts to use the new event names.
This event may be the most useful of the three, as it gives you access to the actual node that was appended.
Example:
document.addEventListener("AutoPagerize_DOMNodeInserted", function (event) {
const node = event.target;
const detail = event.detail;
console.log("AutoPagerize_DOMNodeInserted - A new node was inserted. Its type is: " + node.nodeName);
console.log("And the node is from the URL: " + detail.url);
// Do something with this specific node, e.g. fix lazy loading or make it have a border:
node.style.setProperty("border", "4px solid purple", "important");
}, false);This event is useful if you want to write a script that does something special when all the nodes have been appended to the page, but you won't have direct access to the individual nodes unless you can query for them specifically.
Example:
document.addEventListener("GM_AutoPagerizeNextPageLoaded", function (event) {
console.log("GM_AutoPagerizeNextPageLoaded - A new page has been appended.");
// Do something with the nodes, e.g. remove a class or modify their opacity (for demonstration purposes)
(event.target || document).querySelectorAll(".ajax-hide").forEach(node => {
node.classList.remove("ajax-hide");
node.style.setProperty("opacity", "1", "important");
});
}, false);This event triggers whenever Infy simply turns itself ON, in case you need to execute a custom script for that type of situation. For example, you could use this event to do one-time initialization work, such as appending a custom stylesheet that will apply to the top-level document and all the appended pages (assuming they aren't in iframes).
Example:
document.addEventListener("GM_AutoPagerizeLoaded", function (event) {
console.log("GM_AutoPagerizeLoaded - Infy Scroll is now \"ON.\"");
// Append a stylesheet to the document, e.g. add pink borders to the imgs and hide the footer!:
const style = document.createElement("style");
style.textContent = "img { border: 8px solid pink !important; } footer { display: none !important; }";
(document.head || document.body || document.documentElement).appendChild(style);
}, false);Instead of listening for custom events to be triggered by Infy, you can simply listen for any mutation on the page via the MutationObserver API. This is a bit more crude because it will trigger every time a node is added to the page (i.e. even if it's the website - not just Infy - that appends a node). To mitigate this, you could check that the node is the one you want before doing anything with it (for example, checking the node is an img or has a specific class name you're targeting).
This is a bit of a generic and rough example, but here's an outline to start with:
// 1. Create the callback function the MutationObserver will call
function callback(mutations, observer) {
for (const mutation of mutations) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
const node = mutation.target;
// Do something with this node and/or its child nodes e.g. change the opacity
node.querySelectorAll("img").forEach(img => {
img.style.setProperty("opacity", "0.5", "important");
});
}
}
}
// 2. Create the MutationObserver
const observer = new MutationObserver(callback);
// 3. Start observing the document
observer.observe(document.body, { childList: true, subtree: true });Since Infy isn't allowed to append custom scripts, the best way to execute a script is to add it as new userscript via a Userscript Manager extension like Violentmonkey. You'll just need to give it the URL pattern you want it to activate on.
You can also paste the code in your browser's console (Right Click > Inspect or Ctrl+Shift+J). This won't persist when you refresh the page but is a quick way to test your code.
Need to inject your own custom stylesheet on the page? Use the Scripts and Styles Dialog and check the Custom Style/CSS checkbox. Input the custom style you want to apply to the page and Infy will append it for you. You can save the URL and Infy will remember to append it each time you visit the page (assuming the action and append mode settings are still valid).
Alternatively, you can also use a Userstyle Manager extension like Stylus to write your own site-specific custom styles or even use custom styles others have written for that site.
Important: If the styling you want to inject needs to override inline CSS that is hardened with !important, you'll want to programmatically override the styling by following the Overriding UI Styling example.
For some popular websites, Infy has its own custom scripts built into it that will fix the images so you don't have to yourself. For example, there are two scripts already included just for Google Search and Microsoft Bing Search that will try to fix missing image thumbnails in the appended search results.
Because the scripts are hardcoded though, an update will be required if the website changes its code. If the scripts are causing problems (or if you prefer to do so for any other reason), you can disable them in Infy's Options Page under the EXTRA section and unchecking the Enable Infy's Custom Scripts option.
Unfortunately, due to the new Manifest V3 restrictions, Infy can no longer append each page's scripts and styles. However, there's a great workaround: you can change the append mode to Iframe or Element Iframe (Trim) and the scripts and styles will be appended inside an iframe. This will actually work better as the scripts and styles will run in an isolated frame for each page and not affect the top-level document. Also, if the website doesn't support iframes, try using Xframey or a similar app/extension.
It's possible to override the styling of some of the UI elements that Infy appends on the page. Because these elements use inline CSS that is reset with all: initial and then hardened with !important, you'll want to use a custom script instead of a custom stylesheet. For example, if you have the Page Overlay option enabled (OPTIONS > SCROLL), you could override its styling and lower its opacity (making it more transparent) with the below script.
This example script can be added into a userscript manager like Violentmonkey.
- It first adds an event listener to listen for when Infy Scroll has activated itself (turned itself "ON")
- It then adds a mutation observer to listen for when the overlay has been added, then does the style modifications, and then disconnects the observer so it doesn't trigger on any further DOM mutations
Remember to enable the Trigger custom events so that external custom scripts can be enabled checkbox (OPTIONS > EXTRA).
document.addEventListener("GM_AutoPagerizeLoaded", function (event) {
const observer = new MutationObserver((mutations, observer) => {
for (const mutation of mutations) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
const overlay = mutation.target?.querySelector("#infy-scroll-overlay");
if (overlay) {
// Do your style modifications, e.g. make the overlay have an opacity of 0.5:
overlay.style.setProperty("opacity", "0.5", "important");
observer.disconnect();
}
}
}
});
observer.observe(document.body, { childList: true });
}, false);