Force chrome tab to active state - google-chrome

Using chrome extension I'm trying to capture multiple tabs. I managed to achieve this using chrome.tabCapture.getMediaStreamId and --whitelisted-extension-id=abcdefghijklmnopqrstuvwxyz since the extension will be used locally only.
Capturing works for active tabs but inactive tabs require to be selected for the capturing the start. I've tried using chrome.tabs.update by setting each tab active, this works, however it forces chrome to toggle between tabs until all are active.
Is there a more optimal way of doing this? Since this extension is for internal purposes, I can set flags and line switches.

Related

Do not load background tabs until selected in chrome

When I open multiple tabs at once (e.g. when open multiple bookmarks) chromium will immediately start loading them. Is there a way to prevent this, and make each tab only load when I select them?

Touch automatically displays context menu on text boxes in Chromium

I'm running an application which is in the cloud on Chromium Browser on Linux (Raspberry Pi OS).
When I click on a textbox (where the text is already there) it selects the text for half of the second and then it automatically shows the context menu preventing me from modifying the content. (This also happens in Windows in Chrome).
This does not happen in the desktop app and in Firefox on Windows. I was wondering why that is? Is there a setting to change this? I noticed that behaviour works as expected if you hold the finger on the text box for 2 seconds however the single-finger touch just highlights and shows the context menu which is not practical.
I would essentially want to swap this the other way around; touch and hold to simulate right click and click to select.
This only happens in Chrome. I do not have much control of the cloud application therefore I was wondering if there is any particular setting in Chrome which controls this behaviour. I tried changing the system settings on windows. I went to chrome://flags and disabled the following:
Omnibox rich entity suggestions; Send tab to self omnibox sending animation; Touch UI layout;
Touch initiated drag and drop; Enable experimental fling animation; Enable resampling input events;
Context menus show full URLs; Show autofill predictions;
Omnibox preserve default match against async update; Experimental system keyboard lock;
Omnibox on device head suggestions; Select HW overlay strategies; WebUI tab strip;
Select which UI to use for translate bubble; WebUI tab strip demo options; Scrollable TabStrip;
Omnibox on-focus suggestions; Substring matching for autofill suggestions;
Omnibox local entity suggestions; Omnibox Zero Suggestions on SERP / On-Focus Query Refinement;
Omnibox Experimental Keyword Mode; Filtering scroll predictions; Focus mode;
Zero-copy rasterizer; Omnibox Experimental Suggest Scoring;
Enable Probing on Navigation Predictor Isolated Prerenders; Hardware Media Key Handling;
Media Session Service; Audio Focus Enforcement;
I also went into the developer settings to see if there is anything in there but was unsuccessful.
I also tried the google extension to block right-click behaviour however it did not work.
I would like to go back to developers of the cloud app and ask them to correct this but the only question is why it works on other browsers.
I tried other browsers on Raspberry Pi but they nowhere near the performance of chromium.

How can I use Chrome Devtools to figure out what adds a certain element to the page?

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

Get Window Handle of Chrome Tab from Within Extension?

I've written a Chrome Extension (w/ NPAPI as well) that allows my application and Chrome to communicate with each other. That is all mostly working fine.
What I'm trying to do now is be able to tie the HWND of a Chrome window to a particular Window ID & Tab ID.
When I'm inside of Chrome (via the plugin) I have the Tab ID and Window ID and I can do most operations based on that.
When I'm outside of Chrome (via my application) I can see the window structure and get the HWND of the various tabs.
Is there any way that I can tie them together reliably such that my application could tell Chrome to get me information about/from a specific tab?
If you have Spy++ you'll see that site titles stay consistent with tab window titles. You should definitely use that.
To eliminate title collisions simply call chrome.tabs.query() and chrome.tabs.update() from extension to save, change, and restore a tab's title. Then use GetCurrentProcess() and EnumWindows()/WindowEnumProc() to get child windows hierarchy and match your custom title. You will have to pass it to an EnumWindowsProc callback function.

How to disable chrome extensions JS when debugging in devtools?

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.