I am developing a project where i intend to open multiple webpages in the same one but not using <iframe>. I have tried in the past using <iframes> but i usually end up with the browser UI locking the webpage, so i have been trying to find alternatives.
I developed a small google chrome extension where instead having opening webpages, i open chrome.windows in the position i want and it works fine, but i wouldn't want any UI around them like the title bar and the buttons like a sort of 'fullscreen' for the dimensions i defined.
chrome.windows.create({ url: app.src, left: wleft, top: wtop, width: wwidth, height: wheight, focused: false, type: "popup" }, function(tab) {
self.windowid = tab.id;
console.log('Window ID is: ' + self.windowid);
//chrome.windows.update(tab.id, { focused: true, state: "maximized" })
});
While looking into chrome extension API i read something about NPAPI and with a little more research i have found about FireBreath. Since i have never did anything with this i have doubts if there is any way or possibility, by developing a plugin npapi/firebreath to do 1 of the following:
When opening a window with chrome extension, somehow remove the UI from it?
With the development of a plugin and having an index.html with 3 <object id="plugin"...> instead of the <iframe>, and inside those 3 object embed on the index, make them open webpages with url that i define and make it change the url after X time that is set on javascript?
This is all assumptions, idk if i am saying anything stupid regarding the possibility to do this with npapi or if i should look somewhere else.
Thanks in advance.
Basically the answer is no, you can't do any of that.
To be more accurate, however, you can do #2 but it's a huge amount of work and may not work how you expect. The only way to load an html page inside an npapi plugin is to actually embed a web browser of some sort into that plugin; FireBreath has an undocumented library called WebView that will do this for you, but it uses the IE engine on windows and on Mac it uses a lot of hacks to make it work which end up only working correctly in certain cases.
Your #1 can't be done in any consistent or reliable; npapi plugins know nothing about the browser itself, only the page. It might be possible using windows APIs to essentially hack into the browser window and change things but it would be very fragile and implementation specific to that version of chrome; if something changed later it'd just break.
Related
Edited answer:
In most browsers, there is a function called "Inspect" or "Inspect element" that opens up the developer tools. This allows you to use many different tools, like changing the DOM, running JavaScript, finding the sources of linked files, change the CSS and other things. This tool set can be used to mess around, but also for other purposes, like cheating on online tests. That is the reason that many schools have blocked this functionality from the students. Being a avid learner and programmer, I decided that I would use other methods. I am wondering whether or not I could use JavaScript to open the Developer tools panel, even though I am guessing that JavaScript can't react with the browser, only the page. If there is a JavaScript alternate for the developer tools menu, please tell me about it. Thank you for your time, I really hope that I get question asking back. For anyone wondering, I am only really able to interact with a page through bookmarklets.
here you go
javascript:(function()%7B(function() %7Bvar x %3D document.createElement("script")%3Bx.src %3D "https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSnowLord7%2Fdevconsole%40master%2Fmain.js"%3Bx.onload %3D alert("Loaded Developer Console!")%3Bdocument.head.appendChild(x)%3B%7D)()%7D)()
paste into url section of bookmark and name it what you want.
If it's a custom build Chrome version and they disable or even remove the tool, then there is nothing you can do.
Chrome interface is not under control of Javascript, which is only for render. You can access (if is enabled) using hotkeys (Ctrl+Shift+J or I), F12, right click elements or access via the interface.
Try creating a bookmark and calling it 'Inspect Element'. Then assign this code to the URL part of creating the bookmark:
javascript:void(myDiv=document.createElement('div'));void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));
Using JQuery mobile 1.4.5 (https://jquerymobile.com/)
Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...
My stripped down page (HTML) contains the following:
<div data-role="content">
<script src="test.js"></script>
<script>
$( document ).on( 'pagecreate', function( event ) { do_something(); });
</script>
</div>
The file "test.js", contains the following code:
function do_something() {
alert('here in do_something()');
}
When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).
On all other browsers, I get the alert.
Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).
ANY suggestions would be helpful.
Thanks in advance.
First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.
As you can see spinner that would mean jQuery Mobile and jQuery are loaded.
If they were successfully running on your desktop computer then you may check these:
Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.
Thanks to all who provided some insight...
Turned out it was an external javascript file that contained a try/catch block as:
try {
// code
}
catch {
// code
}
When changed to:
try {
// code
}
catch(err) {
// code
}
... after the change was made, all tests passed !!
so currently I have a packaged Chrome app, which uses chrome.app.window.create() to create frameless Notifications. Since Chrome Apps will be discontinued in the near future I am currently looking for alternatives.
I am trying now to emulate the same behavior in a Chrome Extension, but I have only found chrome.windows.create() where I can open popups, but they can't be made frameless apparently.
I have also tried chrome.notifications but they are not customizable enough for my needs.
Do any of you guys know a way to do this?
No, that's about it. You can't emulate this behavior with extensions.
Add to that list a possibility to inject DOM in the currently opened page, which you can style, but it's complicated, requires very heavy permissions to do at will at any page, will be confined to the browser viewport and still won't work in some edge cases.
There are some oddities in the Chrome Web Store:
It opens dialogs navigating to new URLs
while this happens the screen doesn't flash
and the original page is still shown behind the dialog with the same items and scroll position
I have a background in HTML4 where I couldn't do this and I don't know if it is possible to do the same in HTML5.
My guess is that this behavior is because the Chrome browser has special behavior when handling its store.
It uses the new HTML5 history.pushState(); method, as demoed here and explained here.
Read about jQuery, Dojo, MooTools, YUI, script.aculo.us, etc.
Javascript is pretty powerful these days, and can be used to do some advanced stuff in your browser. For diaglogs, you can look at things like DOMWindow, FancyBox, etc. You can place an entirely separate web page into the pop-up dialog.
This StackOverflow question gathered some other suggestions too. There are many alternatives.
If I'm doing Facebook application development I often find myself wanting run JavaScript in the iframe where my page is embedded, which is fairly cumbersome. It would also be nice (though my main priority is just being to on the fly run some javascript) if there was a way to run something similar to the chrome dev tools or firebug specifically on that one frame.
Do I have any options for debugging in a single frame?
In Firebug it's possible by using the cd() function. E.g.: cd(window.parent.frames[1])
I ended up embedding Firebug lite inside of the iframe for superusers, which I think I should be doing in the first place so our designer can get some feedback on the iPad and things.
I also noticed that there is a dropdown (or I guess drop-up in this case) menu in the chrome-dev channel for specifying which frame you are working in, similar to the cd() command styrr mentioned.