Web Panel

gustavwiz

gustavwiz

In old Opera there was a built in feature called "Web Panel" in the sidebar, where you could surf to websites. As it was very useful, I just waited for something like that to come to the new Opera now when we have a side bar. But as nothing came, I for a couple of days ago decided to build my own extension.

And now it's released under the same name; Web Panel. You can download it from here: https://addons.opera.com/extensions/details/web-panel

If you have any trouble with it, write it here.

shwetankdixit

shwetankdixit

Thats pretty neat. Awesome work!

A Former User

That's a nice extension, thank you for creating it.

I actually have a question. I'm using a chat in the web panel, when hiding and showing sidebar it works as expected, but when I click on another sidebar extension and go back to the web panel, the chat reloads and I therefore have to log in again. Is there something you can do about this?

gustavwiz

gustavwiz

@shwetankdixit, @luetage: Thank you for the feedback!

@luetage:

Can you please post a link to the chat you're talking about? I think I know what causes it, but I have to test it also.

A Former User

I'm using neatchat. You can try it out with this link if you want.

web panel test

A Former User

@gustavwiz I'm gonna bump this since my previous post was held back for review and probably didn't trigger any kind of notification. It's also not visible on forum overview, which is kinda odd..... Thanks for your help.

vux777

vux777

great concept
I know you can't load some sites because of x-frame-origin
you could make background event page (I guess, not sure how you made your logic, and do you need it to be awake all the time)

gustavwiz

gustavwiz

My current main problem is that I can't access anything from the iframe, for example which site the user currently is on. I can get the value from the input field, but when the user clicks on a link on a page, I don't now what page the user comes to. Therefore, I can't make back and forward buttons (which a user has requested).

If the iframe content would have had the same domain, I could use the properties/functions under contentWindow, but when the domains are not the same it's disabled for security reasons.

Does anyone know of a solution?

vux777

vux777

to solve CORS problems, maybe you can inject script that will send message to your extension (background) with all the info you need (window.loaction.href or something like that)

gustavwiz

gustavwiz

@vux777:

The problem is, how do I access the DOM content in the sidebar? When I use a content script, it works on all tabs/pages except on the sidebar.

vux777

vux777

@gustavwiz
have you tried to open iFrame and insert script?
something like this:
http://jaspreetchahal.org/how-to-inject-javascript-into-an-iframe/

in your case:
var iFrameHead = iframe.document.getElementsByTagName("head")[0];
var myscript = document.createElement('script');
myscript.type = 'text/javascript';
myscript.src = 'myscript.js'; // replace this with your SCRIPT
iFrameHead.appendChild(myscript);

...........
no use of manifest content scripts, they reefer to legit browser tabs

gustavwiz

gustavwiz

@vux777

THINGS TO LOOK FOR
You can only perform this task if the iFrame source is loaded from same domain. i.e. if you are running
a site abc.com then iframe src could be abc.com/hello.html


Read more: http://jaspreetchahal.org/how-to-inject-javascript-into-an-iframe/#ixzz3iz32VvM5

This is the problem.

vux777

vux777

year ago I was playing with iFrames, but I had "other way around" situation
I was injecting iframes into some other domains but with my content
(my zoom popup extension works something similar)
but you have your own environment (panel) with iframe src from different domains

btw are you sure you can't inject anything into that iframe content?
either with chrome tabs executeScript (all frames) or with content script...
because my smooth scroll extension works on pages loaded in your panel

gustavwiz

gustavwiz

@vux777

When I used 'all frames', it worked! (in content script).

The problem now is how do I identify the iframe in the sidebar? So I know that it's not any other iframe on another random site/tab? I tried to name the iframe with a spacial id, and then get it with window.frameElement.id in content script, but then I got the cross origin error the other way around (ie, the site in the iframe was trying to gain access to the iframe itself, which is on another site (where "another site" in this case is the side panel)).

Just to clarify, the thing that worked was to, from the content script, get access to the iframe content. Not the iframe itself and other panel content.

vux777

vux777

I guess webNavigation/webRequest APIs won't fire event for iFrame in sidebar?

I would inject code (content script) that will give me window.location.href so you can maintain list of visited URLs, and when user wants to go back, load last in array, and so on...
You should be able to send message from iFrame to your extension with
chrome.runtime.sendMessage({newURL: "fromCS", url: window.location.href});
with every new page, CS will be loaded and send you data needed
you will probably want to fetch window.onunload... also, so that you can know that user is navigating away from current page....and prepare some things, whatever
this takes a lot of testing btw
happy coding :party:

vux777

vux777

ohhh.... btw
compare your user input with messages from iframes (if there is no other way)
and maybe listen for clicks on links and where it takes....

................
or by sender.tabId
it should be something different than from regular tabs
that's under presumption that messaging will work from iframe

ornette

ornette

This is a great extension, I couldn't live without it, as I always used a webpanel in Opera 12 to follow tennis live scores (using the mobile site http://m.tennistemple.com/ )

The only thing that that I'm missing from the Opera 12 webpanel feature is the possibility to reduce the font size (zoom). As I generally use 110% or 125% zoom in for websites (on high resolution monitors), the font on the webpanel is a bit too large. In Opera 12, I zoomed the webpanel out to 80% in order to make it more compact while still being readable.

vux777

vux777

@gustavwiz
Vivaldi just pushed version with web panel
they don't have x-frame restrictions ofc (they made it internally)

A Former User

Yeah, I'm using vivaldi right now, their web panel function is actually awesome. Web panel doesn't reload when you change sidebar tab. It doesn't have a back or forward button yet though.

nekomajin

nekomajin

@gustavwiz
Vivaldi just pushed version with web panel
they don't have x-frame restrictions ofc (they made it internally)

It can be done with the webRequest API. https://developer.chrome.com/extensions/webRequest

I was experimenting with a similar extension, and I was able to load any site. There is an extension to bypass the x-frame. It worth to take a look at the source code. https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe