i am one step away in this code i’m playing with, which is the iframe be auto scrolled? seems it’s impossible to access the elements of this iframe, because of CSP usually, which i always encountered when applying auto scroll in this iframe. just drop this in your console, as you please, and see what’s the hope for this, you test it, or any you can suggest, this is done, just want to add that part to include here, so this tool can be more helpful. i am not making this extension, but just tool to be accompany with the browser. working this part whole day, reasearching, and this question too is the very close with this prob im having, Scrolling an iframe with JavaScript? : heres the code, the code works, or the auto scroll works if domain is the same, but goal is it must be on another website or domain. :

 // Create the overlay div

let overlay = document.createElement('div');

// Style the overlay

overlay.style.position = 'fixed';

overlay.style.bottom = '10px';

overlay.style.right = '10px';

overlay.style.width = '400px';

overlay.style.height = '300px';

overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; // Light transparent background

overlay.style.zIndex = '1000';

overlay.style.borderRadius = '10px';

overlay.style.padding = '0';

overlay.style.overflow = 'auto'; // Ensure the overlay can be resized

overlay.style.resize = 'both'; // Allow resizing

overlay.style.border = '2px solid #fff';

overlay.style.opacity = '0.7'; // More transparent overlay

overlay.style.filter = 'brightness(1.5)'; // Increase brightness

// Make the overlay draggable

overlay.style.cursor = 'move';

overlay.onmousedown = function(event) {

event.preventDefault(); // Prevent default drag behavior

// Calculate the offset of the cursor within the overlay

let shiftX = event.clientX - overlay.getBoundingClientRect().left;

let shiftY = event.clientY - overlay.getBoundingClientRect().top;

function moveAt(pageX, pageY) {

overlay.style.left = pageX - shiftX + 'px';

[overlay.style.top](http://overlay.style.top/) = pageY - shiftY + 'px';

}

// Initial move position

moveAt(event.pageX, event.pageY);

function onMouseMove(event) {

moveAt(event.pageX, event.pageY);

}

document.addEventListener('mousemove', onMouseMove);

document.onmouseup = function() {

document.removeEventListener('mousemove', onMouseMove);

document.onmouseup = null;

};

};

overlay.ondragstart = function() {

return false;

};

// Append the overlay to the body

document.body.appendChild(overlay);

// Add an iframe to the overlay

let iframe = document.createElement('iframe');

iframe.src = '[https://gutenberg.org](https://gutenberg.org/)'; // URL of the website to display

iframe.style.width = '100%';

iframe.style.height = '100%';

iframe.style.border = 'none';

iframe.style.borderRadius = '10px';

iframe.style.opacity = '1'; // Fully opaque iframe for better readability

iframe.style.filter = 'brightness(1)'; // Normal brightness

iframe.style.overflow = 'auto'; // Ensure scrollbars appear when needed

iframe.style.scrollBehavior = 'smooth'; // Enable smooth scrolling

overlay.appendChild(iframe);

// Function to auto-scroll the iframe

function autoScrollIframe() {

let scrollStep = 1; // Pixels to scroll per step

let delay = 50; // Delay between scroll steps in milliseconds

function scrollStepFunction() {

if (iframe.contentWindow.document.documentElement.scrollHeight -

iframe.contentWindow.document.documentElement.scrollTop <=

iframe.contentWindow.document.documentElement.clientHeight) {

iframe.contentWindow.scrollTo(0, 0); // Scroll back to top

} else {

iframe.contentWindow.scrollBy(0, scrollStep); // Scroll down

}

}

setInterval(scrollStepFunction, delay);

}

// Wait for the iframe to load before starting the auto-scroll

iframe.onload = function() {

autoScrollIframe();

};