Part of my extension involves accessing a webpage and then programatically performing certain functions for the user. The app would obviously be much cleaner if the user did not have to see all this happening in a browser window.
In some situations this could be achieved by, displaying other content (useful to the user) in a browser window, loading the screen with the programmatic elements in an iframe and manipulating them through an action script that triggers on the page load of the page loaded in the iframe.
However, for my purposes this is obstructed partially by the cross-domain limitations and totally by the fact that site in question does not allow iframes.
(One solution was to reverse this process--i.e. direct the browser to the correct page and throw up the useful content in front of it, thereby hiding the noise while loading the page in the browser. This works but it is horrible for obvious reasons)
Is there any clean way to either:
Open a chrome window but keep it hidden?
or
Load a page (i.e. have a DOM built etc) without doing so in a window/tab?
Have you tried using
chrome.windows.create({url:yourUrl, focused:false, state:"minimized"}, function(hiddenWindow){
//do whatever with hidden window
});
or having an <iframe> in the background.html of your extension?
Related
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
I am getting confused understanding the practices generally followed in the popular chrome extensions. I am trying to develop my own chrome extension and after going through the basic tutorial, I have a default popup page that opens whenever I click the extension icon near my address bar. So far so good! While checking the source codes of some good extensions installed in my chrome browser, I came to know, none of them uses the default_popup page but definitely invokes some javascripts through either the background page or content scripts. But the final behaviour as seen by the user is functionally like a popup at the upper right corner of the screen, though more presentable. Is there any reason for not using default_popup over using other mechanisms?
I think it really depends on what your app needs in terms of functionality and design. As there are no real reasons why you might want to choose one over the other. Most information can be passed from the page to the extension app and vice versa. Users expect a popup when they click on the button but injected popups are also supported and commonly used in Chrome, Firefox and Safari.
Pros/Cons:
If your extension depends on the page content then you can inject scripts that analyze the page and inject divs accordingly. You can send analyzed data back to the extension and open a popup but thats an additional step. If your extension has nothing to do with the specific page then you would be better off using a popup.
Popups close when you switch tabs or your browser loses focus. Injected popups need not.
Don't inject scripts and stylesheets into pages willy nilly. They interfere with a website's native js/css and also stuff injected by other externsions which is near impossible to fully account for.
When I disable the extension that I am developing, the content that I injected remains on the page (and things get messy since the JavaScript is no longer hiding the content). Is there a way that I can recognize the event and reload the page when it is disabled?
Yes its possible to detect the situation, thou i think its fine if the user needs to refresh manually uppon uninstall/disable.
One way is to regularly message your extension from the injected script to check if its still alive. I do this for an extension of mine to detect when chrome updated it, which has similar consequences as the old version of the background script goes away without notice and the content script is left orphan.
Unfortunately, I don't think there is - somewhat by design. Extensions are intended to run on top of web pages, and the web page shouldn't typically modify its behavior for extensions. This abstraction, though, results in web pages being unaware of an extension's running state.
If you are the one disabling the extension, you could make a "clean up" method which refreshes all pages on which the extension is running, but you'd have to manually trigger that prior to disabling it.
I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).
I have a an iframe that has a report within it. What I also have, is a feature to allow the user to detach the report within the iframe and open it up in it's own window, using window.open() call.
My problem is, when I press on the detach button, the whole report that initially loaded in the iframe actually goes through the motions of re-running the query again and so presents the user with a white screen until the report eventually renders again.
Is there anyway of not re-running the report in the detached window or somehow grabbing a cached version?
Thanks.
If you already have the HTML on the client side, you can write that to the popup window without going to the server.
var w = window.open();
w.document.write("Text in new Window");
That will open a window and write some text to it. All you need to do now is get the content from your iframe and write it to the new window. Bingo :)
BTW IMO: Opening new windows in browsers should be avoided where possible as many browsers block it and most automated UI testing tools don't support it.
EDIT (in response to comment):
Here is an example of reading from and writing to an iFrame using the jQuery JavaScript library.
// Write to
$("iframe").contents().find("body").html("Test Html")
// Read from
alert($("iframe").contents().find("body").html());
This basically finds iframe elements in the document and reads and write content to them. If your not using a JavaScript library I highly recommend learning up and using one of them.
BTW: My advice on popup windows also holds for iframes. You should avoid using them where possible.