So I have recently started working on building a Google chrome extension, and found the entire landscape fascinating to say the least. While I was checking to understand how some of these extensions work, I found that many of them have blocked 'inspect element'. I found only 'Adblock Plus' which allows it.
My question:
Are there any more complex interesting chrome extensions that allow inspection?
Any way to find such extensions or how to get around the ones that have blocked viewing?
As a beginner, I would appreciate any advice or tips in this area.
You can inspect and debug all extensions right in the browser.
You may need to use a different method of invoking devtools.
To inspect the popup you can enable developer mode switch in chrome://extensions and then right-click the extension's icon in the toolbar or click ... inside the puzzle piece menu that lists all extensions, then choose Inspect popup.
Similarly, to inspect something shown in the tab, you can open devtools via the standard hotkeys like (F12 or Ctrl-Shift-i in PC) when the cursor is focused on the toolbar even if the page actively intercepts these hotkeys and/or the context menu.
You can also open devtools from the browser menu "More tools".
There's also chrome://inspect.
Related
I am learning to write chrome extensions. Sometimes ,i do want to learn from the examples given on the chrome developer site. As the instruction says, i need a browser_action or a page_action, then right click ,then inspect popup. I am wondering whether there is other ways to debug the chrome extension.
And the other thing is , i have to write "window.reload(true)" in the debug console to reload the popup page, is there a better or more convenient way to do it?
Of course it's not needed. Your extension either has a popup of some sorts, a background script of some sorts, or a content script of some sorts.
You already know how to debug a popup.
To debug a background page, you can go to chrome://extensions/ with Developer mode enabled. Then you'll see a "background page" link next to extensions that have them - you can click that link to bring up Dev Tools for the extension.
To debug a content script, you should look into the page's own Dev Tools. The console output will be displayed alongside normal console. To type code in the console to execute in the extension's context, you need to change the the context from <top frame> to the extension in the UI:
Depends on what you want to debug.
Chrome extensions also have background page and content-scripts.
Background page console you can find here: open chrome://extensions/ and under extension you'll see "Inspect views".
Content-scripts print messages to the page console.
Popup and other pages you can open in normal tab and inspect in its console. They are accessible by the url: "chrome-extension://YOUR_EXTENSION_ID/path/to/popup.html"
I have a chrome extension I am working on, which lives in a devtools panel (http://developer.chrome.com/extensions/devtools.panels.html).
I want to add a button to quickly open up my extension. I added a browser_action button just fine, but I can't find any information on launching developer tools from a browser action.
Is there a way to open developers tools and switch to my pane from a browser action button?
It seems unlikely that this is possible or will ever become possible. From Chromium Issue 112277:
We only allow explicit devtools opening.
While the issue described there is slightly different from your use case, your needs still seem to run contrary to the requirement of "explicit dev tools opening".
I read "explicit devtools opening" to mean "only open devtools when the user explicitly requests devtools". This reading is incompatible with allowing extension buttons to open developer tools. You could have a button that appeared to do something (say, redirect you to a website) but when clicked, actually opened developer tools -- you've just opened dev tools without the user explicitly asking for it, which is inconsistent with my reading of "explicit devtools opening".
Consider the theoretical statement, "We only allow explicit deletion of user data." Certainly that directive would preclude allowing an arbitrary extension button from deleting user data, wouldn't it? Even if the user explicitly clicked on a button, they didn't explicitly opt to perform a delete.
Perhaps you could read "explicit devtools opening" more loosely to mean "open devtools only in direct response to user action" which would leave open the possibility of future support for this functionality.
When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.
Is there a way to programmatically toggle the console from inside a custom devtools panel?
What's happening is that on the stock panels, you can press Esc to toggle the bottom console panel; but it seems that inside a custom devtools panel, this doesn't work.
The fallback would be to catch the key press and toggle it programmatically but I can't figure out how to do the second part.
I dug through some of the "official" code for devtools and found the _toggleConsoleButtonClicked method attached to the WebInspector object but I can't find how to access that object from my context.
Any pointers would be appreciated!
For context, I'm working with the Backbone devtools extension.
PS: there are more keyboard shortcuts that stop working. Things like Ctrl/Cmd+[number] to switch to a different panel, Ctrl/Cmd+R to reload the page. That might mean that it's more of a feature request for Chrome than something I'm missing. In the meantime, if you have ideas for some of these, I'll take them!
You have to enable Developer Mode in chrome://extensions/. Here is a nice tutorial to debug Chrome extensions http://developer.chrome.com/extensions/tut_debugging.html
I found this issue relative to your question:
https://bugs.chromium.org/p/chromium/issues/detail?id=445240
I don't know where is it now...
I have checked many questions and answers regarding how to stop any browser at any time, but I have not found a solution to my problem.
I have a logout button in my application, and when I press it, it adds some classes to an <a> tag. Is there any key/shortcut to stop the Mozilla/Chrome (any browser) to perform the actions or stay the same page?
What I believe you're looking for is a debugger with breakpoints. Breakpoints allow you to mark certain sections of your code as points where you want the execution of that code to temporarily pause its state until a point in which you are ready to proceed to the next breakpoint.
Modern browsers, such as Google Chrome (or any other WebKit browser like Safari) or Mozilla Firefox with the Firebug Firefox extension have this capability.
Chrome (WebKit Browsers):
You can set breakpoints in your JavaScript in the "Scripts" tab of Chrome (and most WebKit browsers):
From Chrome Developer Tools: Script Breakpoints:
Open the Developer Tools by hitting the Control-Shift-I shortcut
Open Scripts panel and select "script.js" from scripts drop-down
Set breakpoint on line 19 by clicking the line gutter (you can use the Control-G shortcut to reveal a line in a large file)
Move your mouse over this page
You should stop on the breakpoint
Hover over the source code to inspect local and global variables, function arguments etc.
Delete the breakpoint by clicking the blue tag breakpoint indicator
Click the Continue button or hit F8 in Developer Tools window to resume
Firefox with Firebug:
There are countless demonstrations of Firebug Breakpoints and other debugger functionality located on this page.
The functionality is very similar to that of the Developer Tools in WebKit browsers.
Internet Explorer:
Internet Explorer also has built in Developer Tools, which among many other features gives users the ability to set breakpoints and stop execution of the scripts. While the Chrome Debugger is sufficient in many cases, there are certain bugs and cross-browser issues that tend to affect Internet Explorer more so than other browsers.
Thus, the Setting Breakpoints section of the "Debugging Script with the Developer Tools" page will be most helpful when attempting to resolve issues that only affect Internet Explorer.