Is there a way to automatically switch the frame of the javascript console to one belonging to a chrome extension when I refresh the page?
I'm afraid not, to my knowledge the execution context will always start at the top frame.
Additionally, there doesn't seem to be any programmatic method of accessing the Console tab to change that from a DevTools extension.
Related
I am trying to migrate my extension which records screen/tab/window according to the chosen option from manifest V2 to V3. In manifest V2 I was able to use background script as persistent and reach html page objects such as mediaRecorder, navigator. However in manifest V3 background script works as a service worker. So, I have to start the screen record in content-scripts to be able to reach the html objects. When I start chrome.desktopCapture API from the background script, I have to start the screenRecord in one of the tabs (should give a tabid to chrome.desktopCapture.chooseDesktopMedia API call). I cannot start it on the background page and when the page was refreshed or changed to a new URL screen record stops. Is there any workaround for this?
I believe the best way to handle updates such as a URL change on a tab is to attach the onUpdated listener to the chrome tabs in the background script.
chrome.tabs.onUpdated.addListener(function(tabId, changes, tab) {
//Detect Type of Change and Handle Accordingly
});
There are quite a few other events that may be of use that are listed in the chrome documentation Chrome Tabs Events. It's also possible to inject inline JavaScript from the content script so you can access the pages window object directly and attach event listeners there to handle reloads or URL changes. Check this stack overflow post for more information Modify Window Object in Chrome Extension
This question is similar to How can I inspect disappearing element in a browser?, except it's the reverse.
I'm trying to debug which JS adds a bunch of rogue <iframe> aswift_1, aswift_2, etc. elements to the page, like so:
I'd like to use Chrome Devtools (or Firefox) to pause execution as soon as such an element is added and inspect the call stack, hopefully finding the culprit.
Other ideas are welcome as well.
You can use this simple chrome extension.
It will trigger the debugger AFTER element with id matching aswift_ is added(of course you need to open chrome dev tools first).
https://gist.github.com/maciejmackowiak/8043c8630004644144711f730ef45f1b
To activate this extension download -> unpack, open manifest.json and in line 8 change the example.com to the domain you want to inspect.
Then go to chrome://extensions/
Click on Developer mode and Load unpacked
When you will go to the page maching the domain this should show up after element with id starting with aswift_ is added:
Paused in debugger
Now you can use "step over next function call(F10)" (you may need to hit it few times before it will loop thru all mutations and "go" to another function)
Quickest way in chrome would be to take a look at either the network tab (for response) or do a global search using Ctrl+Shift+F on Windows and look for certain tags used in those elements which are being added to the DOM
When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.
Is it possible to access a Chrome Extension from outside the browser?
I would like to be able to run a command from my text editor (MacVim) that refreshes the page on which I am working. From reading the Chrome Extension documentation it looks like I could try something really hack-y, like opening a page that uses Chrome message passing to refresh another page, but there does not seem to be a strait-forward way to do this.
I am running Mac OS X. I've tried the shell command:
$ open <url>
But that opens a new tab every time in Chrome, so this doesn't help when I'm using the developer tools
You are right, there is no straight forward solution.
Your hacky approach is the simplest way to go. Only instead of messaging I would put a tab creation listener into background page, and when a tab with some special URL is created (http://example.com/?do=refresh) - close it and refresh the next selected tab. You will see new tab flickering, but that's as good as it gets.
You can also look into using WebSocket API, for which you would need to write a server side app (which you need to call from your editor somehow). Not sure how this all might turn out.
I have a few extensions (with their icons up on the right). I'd like to assign a shortcut for activating each one of them, i.e. a shortcut that simulates clicking the mouse on them.
One extension e.g. is a dictionary and it would be more than useful to be able to open it without tinkering with the mouse.
There's a way to do this in chrome://extensions if you go to the bottom of the page and find "Configure commands" link.
I also am wondering about how to do this, and here is the possible solution suggested by Misha Kupriyanov:
https://plus.google.com/u/0/108214193841489989707/posts/2YBaEqRsCPw
You can take the Quick Disable Chrome extension by +Paul Kinlan (you can find the source on github)
It uses the chrome.management API http://code.google.com/chrome/extensions/management.html
and now you can write your own pageAction extension ;) = include on each page your JavaScript for catching keyboard events and triggering enable/disable events via chrome.management API
Also check out the Vimium (also open source) by Ilya Sukhar (i am not sure its his account)
Try Autohot, it's a free tool that makes it easy to automate that kind of things, easiest would be:
wait for your "keyboard shortcut" to be fired
check that google chrome is the active window
click on the fixed mouse coordinate to activate the extension