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.
Related
I have been using Clojure, ClojureScript, lein, shadow-cljs, re-frame, reagent, Emacs, and CIDER to work on a Clojure/ClojureScript dynamic web app project.
Usually, I build the project by executing the command cider-jack-in-cljs in Emacs, choosing shadow-cljs, then shadow for REPL type, and, finally, app for the building option.
The application loads in localhost:3005 with a debugging dashboard. Apparently, this UI is called "re-frame-10x":
After clicking on the up-right arrow icon on the top-right:
I managed to pop out the debugging dashboard into a new window in Google Chrome. It was injecting some CSS and hiding a button on the webpage. Hence, I decided to "remove it" by popping-it out.
But, I would like to move it back to the browser tab that has localhost on the address. How to do it?
As suggested by #eugene-pakhomov, it was just closing that window. I must highlight that I had tried that before, the only problem was that there were multiple windows of that type. And all of them need to be closed for the process to work!
Not sure why the program opens multiple windows...
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
In Google Chrome, I can type the following in a new browser:
pycharm://open?file=file_name
and press Enter. The result is that PyCharm IDE will launch and open the specified file. I have also come across similar links that launch other applications.
I tried to look for information about such links but did not reach any conclusions. Specifically, I would like to know:
what is the name of such a link?
who defines those links? Since I cannot find any documentation about those links on PyCharm's side, I am led to think that those links are some form of standard command that work for every external application?
how do those links work under the hood? Is it the browser spawning a new subprocess or does the browser somehow communicate the command to the OS which takes it from there?
I can also do the above programmatically:
window.open('pycharm://open?file=file_name', '_top');
How can I ensure that the focus switches to the target application? (Right now the application does indeed start, but the focus stays on Chrome.)
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.
Problem context:
I have a C++ program and a web presence. Currently the way things are working I have made a control panel with javascript and html. And it send commands via an unimportant communication medium to control things or get information from the C++ program.
Now, when the C++ program launches, I'm making it run a
ShellExecute(NULL, "open", addressBuffer," --new-window", NULL, SW_NORMAL);
This is a way of launching the default browser with the given address. The addressBuffer in this case points to an intermediate HTML file that quickly turns around and uses the
window.open()
in Javascript to open the final popup, then closes itself.
The result is the user now has the popup control panel that I want them to have but the user's main browser window also gets given focus, un-minimized, and placed on a different tab than the one they had selected. (Basically pops up out of nowhere and selects a another tab)
Problem:
I'm looking for a way to launch a Chrome popup, without disturbing a previously open browser window. Any ideas or solutions would be very helpful.
Lastly, it's worth noting that the " --new-window" from the code above doesn't actually open a new window like you would expect. In this case it's actually doing nothing... If it did work, none of this would really be an issue.
I know this is wordy so thanks in advance for you time!
-Michael
Alright, I came up with a solution.
Something about how ShellExecute processes it's commands was preventing the command line args to be passed in correctly.
My work-around includes grabbing the path to Chrome from the registry,
HKET_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\chrome.exe
Then simply doing a system() command with the chrome path "--new-window" and the web path.
Then I let the intermediate html page open it's popup and close itself.
Tada done.
Thanks.