I'm trying to create a Chrome browser extension with a resizable and movable popup window. I'm after a similar UX to a popup window launched with action.default_popup, but with support for moving and resizing the popup.
I've tried switching to launching a popup using:
chrome.action.onClicked.addListener(tab => {
chrome.windows.create({
url: 'index.html',
height: 400,
width: 400,
type: 'popup',
focused: true,
});
});
However:
When Chrome is in fullscreen mode, the width and height of the popup is ignored and launches as a fullscreen window
Secondary issue: when launched without fullscreen mode, the popup window has a title bar (it would be great if it could be the same as default_popup)
I think type: 'panel' is what I want, however, using panel behaves like popup and the documentation says that panel is deprecated:
'panel' is deprecated and is available only to existing whitelisted extensions on Chrome OS.
Is it possible to launch a popup window as a panel with an initial size even if Chrome is in fullscreen mode? And, is it possible to open a popup window frameless (i.e. without the title bar)
Related
I have an open browser window where the user clicks a button and after that, a new browser window opens with a new page.
How can I check that there are two browser windows open and not two pages?
The browser.browserContexts() property does not work, because if a new browser window is opened after clicking on another browser window, then these two browser windows have the same context.
I'm using Cesium JS which is a WebGL mapping framework.
When changing tabs on Chrome, after a while when switching back tabs to the Webgl page, there is a grey screen. I understand that Chrome disables Webgl rendering when the tab is inactive for a certain period.
How can I reset or start Webgl to start rendering again when the Tab is back to active?
I noticed when physically changing the browser window size this will re render webgl but I can't programmatically set window size on tab focus.
Just check, may be context was losted, if you will see this log, just refresh youre context
canvas.addEventListener("webglcontextlost", function(event) {
console.log('lost');
event.preventDefault();
}, false);
good source for you
Some extensions' popup windows don't fit nicely into the page. If I can zoom out on the popup window, I can use it as normal, but there's no apparent way to do this.
Example screenshot:
you can see that the popup window extends below the visible portion of the screen. There's a button on the bottom that says "record tab" which I can't manage to click.
My chrome build:
Version 52.0.2743.116 (64-bit)
Platform 8350.68.0 (Official Build) stable-channel orco
Firmware Google_Orco.5216.362.7
All this is with my page zoom set to 100% and font-size set to medium in the about://settings menu.
Adjusting the page zoom to 75% in about://settings fixed it for about 30 seconds but the popup soon reverted back to its original zoom level.
The accepted answer mentions going to the extension's options page to reset the zoom, but many extensions don't have/need an options page.
If that is the case:
Open the popup
Right-click and "Inspect"
A "Developer Tools" window should open, and in the title bar it should say the name and path of the popup html file, like this: chrome-extension://[the extension ID, a long string of random letters]/popup.html
Open that long address in a new tab, and it should show the normal popup content. (Instead of typing out the extension id manually, it can be copy/pasted from chrome://extensions with "Developer mode" on.)
Reset the zoom there to the default 100% (ctrl+0), as most extension developers will design and test assuming 100%.
The key point here is, the zoom is global/consistent across all of the extension's pages, including the popup, which is why zooming the "options" page works. Any page beginning within chrome-extension://[the extension ID] will have the same zoom as and affect the zoom of all the other pages.
For example, my extension's popup has a question mark icon that navigates to a separate help.html page still within the popup, and the zoom there affects the main popup.html zoom as well.
This also applies to webpages. Zoom is maintained over all pages from the same domain. If you zoom from 125% to 150% on one stackoverflow.com question, a different stackoverflow.com question in another tab will also zoom to 150%.
The zoom setting for a Chrome extension can be managed on that extension's options page:
Right click on the extension
Click on Options
Zoom In or Out using ctrl +/-
Now, click on the extension and watch the magic!
Google Chrome saves your zoom levels on a per-site basis. When one adjusts the zoom level on an extension’s options page, that level also applies to that extension’s popups.
Source: How to prevent zooming in popup window in my Chrome Extension
Depending on the extension, opening the popup HTML separately might not be feasible. I suggest setting the non-standard CSS zoom directly for the extension's popup:
Open the extension's popup and right-click.
Select Inspect to open the Chrome Developer Tools.
Select the html tag in the Elements tab, and add to the styles the zoom property with the desired value. To zoom out, use a value < 1 (e.g., 0.75).
I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!
It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)
Perhaps easier way as of today is to install chrome extension which will allow you to open preview in new tab instead of popup. There you can have the same icon to toggle to mobile. Below is the extension:
https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en
My task requires me to create a page in HTML5 with the following requirements:
Compatible with Internet Explorer 10
Has an option to enable Full screen view of certain excel reports on page as per filter values
Does not reload the already loaded report, must hide other contents of the page and should hide the taskbar and toolbar
Should have an option to exit full screen view without a reload
I just want the report that has loaded on the page to be displayed in full screen.
I have tried window.open ("www.stackoverflow.com","","fullscreen=yes");
But this opens a new window and reloads the contents
I have tried requestFullScreen() but according to this page this feature is not supported in IE
And also hoped triggering F11 key would be an answer, but that doesn't work as well..
Is there anyone who could help me find a solution?
you can precise the destination : this.href
window.open(this.href, 'test', 'fullscreen=yes, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no');
EDIT : I've found a solution here
Try to use the HTML5 Full-Screen API