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.
Related
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.
I have some JavaScript that, I believe, is stuck in an infinite loop. I know I can just reload the page, but I have data in a form on the current page that I'd like to keep. The tab is completely unresponsive, so I can't just copy and paste everything and then reload. So is there any way to kill the javascript thread, but keep the DOM in Chrome?
You can open the developer console F12 and stop the script
Open chrome developer tools and go to the sources tab. On the right panel press "pause script execution".
looks like someone had the same problem
Cancel infinite loop execution in jsfiddle
Answer:
With the developer mode, go into resources and find your script and copy and paste it into a text document or a new window. If you can't find it in resources, do a search for a variable or line of code you used.
I am developing a web-application, and google-chrome started behaving weird. When I make change in a JavaScript file, after I hit refresh on the debugger - I still see the same code in the debugger, and the browser executes this old code. Why is google-chrome behaving like this and how can I solve this?
Open Developer Tools, by right clicking and choosing "Inspect Element" or Ctrl/Cmd + Shift + J
Click the Cog icon in the bottom right of that window.
Choose the General Tab
Tick "Disable cache"
This will disable Chrome from caching (locally storing) a copy of the js file
perhaps is a cache problem. try doing a cache refresh (ctrl-r, ctrl-f5). if you use cache.manifest file then you need to touch it in some way and double refresh your app for the changes to show.
I'm looking at a web page where when I push the submit button on a form, it brings up a new page where it runs some javascript and then closes the window.
Is there any way I can step through the javascript on the new page? I tried setting break on next in Firebug on the first page, but the next page still closes the window.
(I'm open to other tools besides Firebug if neccessary, I just need to step through the javascript)
Update:
I should have mentioned I don't have access to the code :-(
If you have access to the code, you can place this little statement where you want to have a breakpoint:
debugger;
I am not sure about firebug, but I expect it to work there too.
put debugger; in your JavaScript code. and press F12 key just after window open.
If I open my extension popup then I open another window or tab following the popup does not stay open if I return to it.
Is there a way to force it so the popup stays open?
As a user, you currently cannot force the the popup to stay open. That is a UI decision the UI team made. If you want to want to force a setup, you can have other way to show this by changing the popup icon, open a new tab when it requests, or new popup view for registration.
As a developer, inspect the popup, and it will stay open.
You cannot stop the Chrome pop-up from closing, unless you're in developer mode. You could consider this alternative, though:
Launching a normal pop-up instead:
In your popup.html file, load a Javascript file that runs this:
var popupWindow = window.open(
chrome.extension.getURL("normal_popup.html"),
"exampleName",
"width=400,height=400"
);
window.close(); // close the Chrome extension pop-up
This will open the file normal_popup.html in your extension in a normal pop-up window, which won't close when it loses focus. Because the name parameter is the same, the pop-up window will get reused if the user launches popup.html again.
In an answer to a FAQ here: https://developer.chrome.com/docs/extensions/mv3/faq/#faq-persist-popups
Popups automatically close when the user focuses on some portion of the browser outside of the popup. There is no way to keep the popup open after the user has clicked away.
As others have said, this is a deliberate limitation of popup UI.
Instead, you could inject some HTML into the page which loads the content you want in your popup into an element which hovers over the existing page. You will have to implement the close functionality yourself, but it will persist.
Have a look at e.g. how keyframes.app has done it: https://github.com/mitchas/Keyframes.app/blob/master/Keyframes.app%20(Extension)/src/inject/ui.js
If you enable panels at "chrome://flags/#enable-panels" you can use something like:
chrome.windows.create({
url:"popup.html",
type:"panel",
width:300,
height:200
});
to open a panel window instead which will stay on top all the time as long as you don't move it from the bottom of the screen.
Best way to workaround this is to :
Right-Click inside the popup
Click: Inspect
Or just press CTRL+Shift+I
A new window will open with the Developer Tools... just keep that window open and the popup will never close.
This answer to How do I prevent Chrome developer tools from closing when the current browser window closes? what very helpful in my case:
Not a perfect solution, but you can add breakpoints on the events Window.close and unload by turning on the checkboxes at:
Developer tools -> "Sources" tab -> Event Listener Breakpoints -> Window -> close
And
Event Listener Breakpoints -> Load -> unload
Try to mark both and see which one works best for you