how to zoom out on an chrome extension's popup - google-chrome

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).

Related

Is there a way to force any links to open in the same window of the chrome browser?

Do you know a way to open any links in the same window of the Chrome web browser instead of opening them in a new window?
FYI, the below methods don't work all the time:
Holding Ctrl+mouse-left-click doesn't work for all kinds of links.
"Open link in the same tab, pop-up as tab" chrome extension doesn't work on some links.

How do I launch a frameless window from a Google Chrome extension?

I'm looking to achieve something similar to Bitly's Chrome Extension. It's not exactly frameless but the style of the title bar is minimal. Also, unlike other types of windows, in Mac OS you can maximize the main browser window and spawn Bitly's window on top.
Neither window.open nor chrome.windows.create offer any options to remove the frame of a launched window. And when these windows are spawned from a fullscreen browser window (maximized) they are also maximized and cannot be used on top of the current browser window.
Chrome.app.window.create does expose the option to remove the frame but this only works for Chrome Apps and not extensions.
Neither of these potential duplicate questions sufficiently answer my question:
How do I customize the title bar of a popup in a chrome extension?
How to build an chrome extension like Google Hangouts (panels are deprecated)

Chrome Developer Tools: Show Associated Browser Tab?

I often have many (many!) browser tabs open in Chrome. Often times I'll have a developer tools window open but lose track of the associated browser tab.
Is there a keyboard shortcut or menu or button somewhere that will bring the associated tab (and browser window) to the forefront?

UPDATE: Just noticed that the shortcut key is F12. It's listed against a "Focus debuggee" menu option under the vertical ellipsis. (Chrome 66.)
Original answer:
I was just looking for a similar shortcut.
I haven't found one, but if you go to the console in your developer tools window and run a quick
window.alert()
then it looks like the associated main window+tab is brought to the front to display the popup, and it remains there when the popup is dismissed.
(That's what I'm seeing as of Chrome 60.)

In devtools click the top right cogwheel to open Settings
Click Shortcuts in the left navigation menu, and scroll down until you see Focus debugee. You'll see the shortcut key that is assigned with an option to modify it, or an option to set the shortcut if not defined.

Action icon looks like disabled on all tabs, but the extension works

I am concerned because this is the only icon that looks like an extension off.
Please, somebody edit the code so that the icon looked enabled on each tab, as well as the other icons extensions.
Files of the extension u can download here or find "Scrollbar Anywhere" in chrome appstore.

Chrome recently (around v.48) switched to a unified extension toolbar where all extensions are displayed so that nonsavvy users would see all that useless cruft they installed on shady web sites. That's the reason behind this change.
A gray icon in the toolbar doesn't mean the extension doesn't work.
It just means that:
no toolbar button declared in manifest because neither icon nor popup are needed,
a page action is declared but current page doesn't match the declared URL pattern.
On the other hand, if you disable it on chrome://extensions page (Menu -> Settings -> Extensions)
there would be no button at all.

How do you inspect the web inspector in Chrome?

According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/

Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.

Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.

I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.

A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.