How to make Chrome Extension popup draggable? - javascript

I noticed that the 1password chrome extension browser action popup is draggable. How can I make my own chrome extension do the same thing? I can't seem to find anything in the chrome extension docs.
A few other features the 1password chrome extension popup has that I also can't find in the docs.
When the 1password popup appears, there's a little triangle at the top of the popup which appears where my cursor is. How does this happen? As far as I'm aware, then html document I associate with the popup is displayed as a rectangle without the triangle.
I can't right-click on the body of the 1password popup to inspect javascript. Could this be because they overrode the default contextMenu behavior?

The standard popup window cannot be dragged, neither you can add anything outside of its borders. It's a popup page declared via browser_action or page_action in manifest.json.
The workarounds are:
open a separate window using chrome.windows.create,
specify the type parameter as 'popup'
create a DOM element inside the web page using a content script,
see also How to really isolate stylesheets in the Google Chrome extension?
The element can be draggable.
To inspect pages that block the context menu you can open devtools from the browser menu, then "More tools", or focus the address bar first, then press the hotkey to open devtools (CtrlShifti or F12 in Windows) or from the internal UI page chrome://inspect/#pages.
P.S. technically you can write an external utility and run it via nativeMessaging so it'll use a low-level OS API to move the standard popup window, but that's very fragile.

Related

Default popup no working when pressing the extension icon [duplicate]

I'm making a Chrome Extension and need to view the HTML/CSS/JS of the popup.html.
I can't right click to inspect elements. Is there another way? I need to make sure CSS and JavaScript is being inserted correctly. How to debug a problem in that popup file?
Right click the extension's button, then 'Inspect Popup'
Inspect Popup has gone away with the latest build.
Here's how I debug Chrome Extension Popups.
Click your popup button to see the webpage (the popup window itself).
Right-click in the window and select Inspect element
The Chrome Debugger window comes up with the right context, but you've already missed your breakpoints and debugger statements.
HERE'S THE TRICK. Click on the Console part of the debugger and type: location.reload(true) and press enter.
Now your breakpoints are hit! Great way to reload changed scripts without revisiting the Extension page.
Perhaps another way may be to find the ID: for your application in chrome://chrome/extensions/
You can then load your popup in a regular window by
chrome-extension://id_of_your_application/popup.html
Exchange popup.html for the file you have specified in manifest.json under "default_popup" property.
Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.
Try switching Auto-open DevTools for popups in the bottom right of DevTools Settings:
Another good way to inspect Javascript being part of the extension popup is adding special comments to the end of the script to be debugged:
// #sourceURL=popup.js
This is de-facto a directive for DevTools to include this specific file into Sources tab. From there you can inspect code, add breakpoints, output to console, etc. as usual.

manipulate content in a chrome extension's popup with yours

I am trying to trigger a button click on another chrome extension from mine, and I do not know if it is even possible, plus I did not find any resources. So, how do I trigger a button click on any other chrome extension that I don't have access to?

How did the popup of this chrome extension open from bottom?

I know about chrome extensions and I built one.
As far as I know, popup can only be opened from the button action (page action too) and will be closed once they lose focus (i.e. if users clicks somewhere on the webpage).
But how did this extension - barc manage to
1) open from bottom
2) refrain from closing even after losing focus
I looked at my chrome://flags/#enable-panels and found panels to be disabled. So, this ain't the cause.
I'll be happy if some one can point me to the underpinnings of this implementation or API?
It's injecting custom UI into pages via content scripts, not showing it in a panel.
You can test it by minimizing/moving the Chrome window.

Chrome popup window always on top

I have a Chrome app that opens a popup window. I would like it to be able to stay on top, but am currently unable to do so.
The Chat for Google extension opens a popup window that not only stays on top of all windows, but the window itself also appears to have a completely customized appearance. Unfortunately, all the JavaScript in this extension is obfuscated, and I can't make heads or tails of it.
The Chrome API lists the "alwaysOnTop" boolean as part of the Window type, but neither the create nor the update functions allow for changing this property.
It’s a panel type of window. Call chrome.windows.create with a type: 'panel' parameter. This currently only works in the dev and canary channels.

What is the difference between Popup , chromeless window, modal-window, lightbox, hover ad?

What is the difference between Popup , chromeless window, modal-window, lightbox, hover ad?
Which is unblockable with default setting on any browser, more accessible with screen reader and even accessible if javascript disabled?
Popup: Anything that pops up from your browser. They tend to annoy users, and therefore they are often blocked by the browsers.
Chromeless Window: Just another kind of popup window that doesn't show the browser menu or toolbar.
Modal Window: The JavaScript alert() method is an example of a modal dialog. The users must acknowledge the popup before they can return to operate the parent application.
Lightbox: A modal-dialog JavaScript implementation normally used to display images. Requires JavaScipt and it isn't blocked by browsers unless JavaScript has been disabled.
Hover Ad: These are implemented in JavaScript similarly to Lightbox, but are not modal so the users may continue using the parent application. They are used for online advertising solutions and most implementations do not scroll with the web page, and therefore may obscure some of the content. While there is a big chance that Hover Ads may annoy users, they are quite difficult to block.
Depending on the Browser you use, Internet Explorer and Firefox completely blocks the pop-ups with JavaScript Disabled, Google Chrome on the other hand lets Alert Boxes and Announcement boxes still pop-up.You can test it here using your Google Chrome Browser: Alert Box

Categories