In-Page Extension iFrame

[mikhoul]

Could we have the option to keep the search box open till we close it with the "X" button ?

If would be useful when we are searching on many different tabs.

Regards ! :octocat:

[brandon1024]

Thank you for using the extension! Sadly, this is a limitation of all Chrome extensions. I agree it would be very useful, but not possible. If you really need to keep the extension open, check the FAQ in the GitHub wiki. I describe a way you can keep it open by using the dev tools.

[mikhoul]

@brandon1024 Thanks for the quick reply, :+1:

I understand why it's not possible with a popup, so instead of using a popup you could inject your own"popup"(maybe as an Iframe) inside the page, like an overlay for the user interface, this way it could be relatively easily achieved.

This way you could ad a close button and hide it only when it is closed by the button (or shortcut).

Here's the skeleton code to inject a "popup" inside the page as an overlay:

var overlay=document.createElement('div');
var oStyle=overlay.style;
oStyle.position='absolute';
oStyle.backgroundColor='#fff";
oStyle.width='200px';
oStyle.height='400px';
oStyle.top='10px';
oStyle.right='10px';
oStyle.borderRadius='3px';
oStyle.border='1px solid #888';
document.body.appendChild(overlay); 

You can try it directly into the chrome console on any page to see what it does. You will then have to manage when to hide it also and obviously style it how you like.

Source: https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/WrT-ziAm9ys/0IykNdN4jVoJ

What do you think about this alternative to by pass the limitation of the native Chrome Popup? :question: It would be very very useful IMO :grinning:

Regards :octocat:

[brandon1024]

Thanks for your interest, but sadly this is not possible. Creating a popup or an iframe in the webpage is possible, but once the extension loses focus, all injected content scripts are unloaded and are no longer accessible. The UI you suggested won't have any way to communicate with the logic that performs the search and highlights.

[mikhoul]

Thanks for your quick reply @brandon1024

Look at those 2 extennsions, both use interface/gui that is persistent on the page, even if you lose focus or even quit the page the UI stay on the page till you click on the close button.

Regular Expression Search Bar: https://chrome.google.com/webstore/detail/regular-expression-search/fdploffkanmcnkkbdhlpbjemeodjagoc

Extension Live editor for CSS: https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol

Regards :octocat:

[wolph]

I think this issue might not be needed anymore. Since the last update it now remembers where it was before so you don't lose the state anymore :)

[brandon1024]

@WoLpH Ideally this feature will still be implemented so that users can still interact with the page with the popup open (as an iframe). Right now, any interaction with the page will close the popup.

[brandon1024]

For future me: I put this issue off for a little while to try and figure out a good solution. When I tested a potential solution earlier, I had some trouble with ensuring that the iframe remains on top of content in the page at all times (z-index issues). I then noticed that the LastPass chrome extension was able to solve this.

This is what they implemented:

<div style="position: fixed !important; z-index: 2147483647 !important; display: block !important; width: 100% !important; height: 100% !important; top: 10px !important; right: 10px !important; max-height: 181.889px !important; max-width: 368px !important;">
    <iframe src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/contentScriptDialog.html?dialogID=1" scrolling="no" name="LPFrame" style="border: none !important; position: relative !important; top: 0px !important; right: 0px !important; bottom: 0px !important; left: 0px !important; height: 100% !important; width: 100% !important; visibility: visible !important; display: block !important;"></iframe>
</div>

Here's what I found worked best:

Outer <div> Style:

position: fixed !important;
    z-index: 2147483647 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    top: 10px !important;
    right: 10px !important;
    max-height: 32px !important;
    max-width: 370px !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

<Iframe> Style:

border: none !important;
    position: relative !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    height: 100% !important;
    width: 370px !important;
    visibility: visible !important;
    display: block !important;
    background-color: white;

[wolph]

Wow, a z-index of 2^31-1, that should definitely be enough :P

[brandon1024]

@WoLpH I didn't even know the Z-index could go that high haha

[eternalphane]

Hi @brandon1024 , thanks for your excellent extension! I'd really love to see this issue get fixed. Is there any progress?

[brandon1024]

Hi @EternalPhane ,

I started looking into this a while ago but the changes became very complex rather quickly. I'm trying to come up with an elegant solution. I'm busy with other things at the moment so I won't get to this for a while I'm afraid.

[brandon1024]

Update:

A while back I was able to get a working prototype of this, but there are a few significant issues with this issue. If the extension popup is an iframe embedded in the page, that iframe inherits from the browser window, meaning that the zoom level configured on the page will alter the extension popup size. This is not a desirable side effect, in my opinion.

When I get some free time, I'm going to keep trying to come up with a good solution to this problem. For the meantime, this issue will sit dormant unfortunately.