Display a web page in a container, scroll, switch to next - javascript

I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.

So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

How to prevent browser_action from reloading its popup window every time?

I'm developing a webextension and I'm stuck with following problem.
I have browser_action that displays popup window with some content. The problem is, it takes 3-4 seconds to load, and user has to wait every time he opens this browser action.
I want somehow force browser_action to load DOM of popup window just once, so when I open this action again it shows me already rendered window.
I can't preload any assets through background script, because the asset is <iframe> of remote website and you can't easily store rendered DOM in localStorage just to display it later on user request.
I thought about putting <iframe> inside background script and displaying it somehow in browser_action popup window, but I failed to find out how to do that.
Background page is loaded once and stays forever while extension is enabled, so maybe I could display it contents inside browser_action popup window somehow?
Unfortunately, I don't think that's not possible. Your best bet would be to show some useful UI while the iframe loads.
It's certainly not possible to make the popup page itself be persistent.
And I'm 98% positive you can't swap in a loaded tab/frame into the page of the popup. Chrome does it internally sometimes (preload then swap, see tabs.onReplaced), but you have little control over this mechanism.
It seems you can trigger it with preload links:
<link rel="preload" href="https://example.com/"
as="document" crossorigin="anonymous">
However, it serves little purpose to embed that into the popup page (it will be fetched when the popup loads, which is milliseconds of difference) and I'm reasonably sure that preloading it from, say, the background page won't carry over to the popup, despite them normally sharing the browser process. You can experiment though!

Will Firefox start my SDK extension automatically after the browser starts - loading screen

I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!

How can a Google Chrome extension exit its own background process?

My goal is very simple: when the user installs the extension, open the options page.
The only way I know how to do that is to create a background page, and on that page check for localStorage.setup. If it is not present, set it to true and open the options page. This approach works, but, besides being convoluted, it's inefficient. Not only will the background page load every time the user opens the browser, but it will constantly be running in the background.
Is there any way to tell chrome the background page is finished, and should be exited? Or is there any way for an extension's background page to prevent itself from being loaded in the future? Or, is there a better way to solve my problem?
With transient background pages, the background page will exit automatically once all code that it's running finishes. This feature will be in a future Chrome release, but since it's still under active development, there isn't documentation for it yet.

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories