Load content again after site content changes - javascript

I'm developing a chrome extension. My background script and content script both get loaded when the page loads, but the problem I am facing is for instance on Facebook or Twitter when I scroll down and the site dynamically adds new content to the page. My background script and content script don't recognize that the page has loaded new content and doesn't do what it is supposed to do.
Is there any way to detect new content and make the background script re-launch?
My background script is set to persistent: true in the manifest, I was hoping that would do something useful but apparently not. Any help is appreciated. Thanks.

Sites with infinite scroll add new content dynamically to the page without changing its url (that is without using history.pushState/popState) so built-in chrome.webNavigation API won't work.
An established routine in such cases is to use a MutationObserver attached to document.body or the container element to which the new content is appended.
Alternatively you can add listeners for the events used by the js framework of the site, for example FB.Event on facebook or pjax events on github.

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

Injecting HTML to a DOM element with chrome extensions

I am trying to figure out the best way to inject a full HTML page into an already existing page via a chrome extension. The problem is say I am browsing page A and want to load the facebook page onto page A, is it best to place the response from the AJAX request into a div element with the innerHTML method or should I create a new iframe and write its document? If I do go with the second answer, would I then be bound to the iframe constraints posed by facebook or other sites that don't allow iframe loading?

winjs appnavigation background

I to created a project for windows 8 in javascripts/html. Now I want change the background of body when I change page.
I tried to set the background body but when I navigate into the app and I use the backbutton the backgroud don't update correctly. The problem is that remains the last background of the previus page.
If you're setting the background through each page's CSS, it won't work because CSS is cumulative across WinJS page navigations. That is, because you're just doing DOM replacement and not actually navigating away from the main host page (default.html typically), then each time you hit a page control HTML file that loads another CSS file for the first time, that new CSS gets loaded on top of the old. However, going back to a page that references a CSS file that's already been loaded will not force a reload.
There are a few strategies for handling this, but if you're setting a style on body then it's easiest to set the background style from JavaScript within each page's processed or ready methods, and not rely on the CSS loading behavior.
You have probably only one body in all your app, so you have to change it to the right background every time youenter a page, included the first page.
I suggest you do it in the ready event of every page so that it will refresh also when you click on the backbutton.

How to run script when page loads content dynamically for Chrome Extension

I have a script than runs at page finished loading to insert some stuff to the DOM.
How to listen for when page is loading more content dynamically? One example of this dynamic loading is when you scroll down your feed on facebook, and more content is added to the list as you scroll down.
You can use MutationObserver to do this. Check documentation here.
Example of usage and fiddle available in this SO question.

Firefox extension that overlays persistent iFrame?

Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!
Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product
Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">
You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.

Categories