Creating & Management of Electron-like Windows from Chrome Extension - javascript

Good day everyone!
I develop a Google Chrome Extension. The architecture is mainly built on using content script in Chrome tab and separate master window for providing basic management and user-oriented information. Extension should provide a good-user-experience and for that I have an appropriate list of criteria:
Creating master window in specified width & height, top & left. In some cases creating modal window.
Draw attention or focus to the master window for interacting with user.
Unresizable.
Zoomable by mouse wheel or buttons.
Toggle Always-on-Top.
Additional criteria. Extension should work properly out of box. Any tricky additional settings aren't satisfying for end users. Extension should work properly in Chromium-like browsers.
The current state of my Extension is that I use the Chrome Extension API's chrome.windows for creating (1) and focusing (2) to the master window, and chrome.tabs for zoom operations (4).
I know there is a limitation of using unresizable Chrome windows (3). Looks like it's a dead end.
My implementation of Always-on-Top feature (5) documented in chrome.windows is not working. Here's code I use:
chrome.windows.getCurrent({ windowTypes: ['panel'] }, function(window) {
chrome.windows.update(window.id, { focused: true }, function(w) {
w.alwaysOnTop = true;
});
});
The console.log says that w.alwaysOnTop is toggled from false to true, but there's no changes, and next call do the same. The accepted answer here Chrome extension pop up windows always on top says about Chrome flags, etc, which is not suitable for end users.
I have some information about chrome.app.window, it provides good features. But it seems that the developers will remove support for Chrome Apps. In this article Transitioning from Chrome Apps is highly recommend to use chrome.windows instead, but again not a word about support for (3) and (5).
Using the Window.open() don't make any effect in Chrome Dev 82.0.4056.3. It just do the same as Chrome.windows do. And something tells me that this is not quite a cross-browser solution.
On my opinion, the Electron BrowserWindow can do the best with above list of criteria. I know for that Electron combines Chromium and Node.js. But I can't find any more detailed documentation or appropriate examples about this topic.
Also last days I look a bit quickly on React and Angular opportunities. Seems like Angular is more suitable for Google. I'm total new to that frameworks.
So, here I am. Any help or clues on this topic will be very helpful for my purpose. Thanks in advance!

Related

How to detect client's web browser is Vivaldi?

I've tried on getting browser info from javascript - navigator.userAgent, but cannot find any related string with "Vivaldi".
Please help to suggest if there are any other programming method or javascript can be used to detect Vivaldi browser?
The correct syntax in JavaScript is navigator.userAgent.
You can check window size, but it may be incorrect.
Vivaldi has its own sidebar and bottom bar that the others not.
But remember, user can change the window size to prevent detection.
According to Vivaldi, the userAgent will not have Vivaldi in it for a better user experience and mimic Chrome in all sites except a few known ones.
For the next release of Vivaldi, we have decided to try something different. The problem with our current approach is that with the web being almost infinite, we can’t possibly discover all the websites who have blocks set against us. Thus maintaining a list of sites where we present a non-Vivaldi User Agent is difficult. Instead, we will try doing the reverse. For a handful of sites where we know the label Vivaldi (and our version number) is responsibly used, we will present our full User Agent. Those sites being our own and a handful of interesting alternative search engines: duckduckgo.com, ecosia.org, qwant.com, and startpage.com. Every other site will get a User Agent that appears to be identical to Chrome.
src: https://vivaldi.com/blog/user-agent-changes/
Since you haven't mentioned your use case, assuming you are building sites, the best solution would be to do what everyone does. I recommend building websites agnostic to browsers and devices, but responsive to resolutions and feature support. Almost all of the browsers are running on Chromium these days, except Safari and Firefox (to my knowledge). So they are all going to work consistently across the board. For any given feature, one could always refer to w3c or mdn docs for compatibility and build around that.
Browser detection is also not quite reliable, as there are extensions to spoof the information. Like this extension that mimics a TV agent so one can run youtube console version on it.
On the other hand, once again I don't know your use case, one might benefit from platform detection over browser detection, like catering to mobile and TV users. Even then, if you have a site responsive enough the platform becomes non-essential information.

Can firefox's multi-account containers extension be replicated in chrome or chromium based browsers?

I love the firefox extension multi-account containers. I want to switch to brave browser but I can't find a good alternative. Is it a functionality that can only work in firefox due to API limitations or is it possible to implement it in chromium based browsers via an extension?
If I want to create this extension can I make it exactly the same as firefox's multi-account containers? I tried to load the extension into brave but it has many errors due to the differences in the APIs I think. So the only way to do this would be to program it for chromium. Is that possible?
I found this reddit thread https://www.reddit.com/r/brave_browser/comments/kw2cff/brave_alternative_to_firefoxs_multiaccount/ it appears to suggest that containers are firefox exclusive and sessionbox is an alternative suggested. I tried sessionbox though it appears to be limited to having to click on the extension and then select a session to start the website in while multi-account containers can do that automatically if you set it to always open in container.
Are there extension API features that such an extension makes use of and chromium based browsers don't have?
Maybe this feature can be implemented not through an extension but directly through the browser, as brave is open source it should be possible for me to add this feature or fork it and add it there.
[this question is a duplicate of another question I asked; an attempt to make it more clear; I removed the other question]
Multi-account containers functionality requires Contextual identities browser extension API and which is only supported in FireFox.
As for 2023, it's not possible to implement FF's multi-containers in Brave/Chrome.
But you can spread the word and vote for this feature here:
https://community.brave.com/t/equivalent-of-multi-account-containers-or-temporary-containers-extension-ff/135573
It's not a lost cause but this feature has been discussed by Brave's team since their launch, about 5 years ago:
https://github.com/brave/brave-browser/issues/34
Their conclusion is that is too much work. They say this feature has to be implemented by Chrome first, otherwise they have to patch too many things.
The problem is that Google won't ever implement something like that in Chrome, IMO. The whole idea goes against their core business: track users for targeted advertisement.
There are some plugins you can give a try, but they are not practical (in my opinion). Also, I wouldn't trust a plugin to access all my browser data (history, cookies, etc).

JavaScript profiling with per-statement results

I've got a highly recursive JavaScript function, which calls no other JavaScript functions. It's just the one function calling itself doing some simple logic and calling system functions (Array.slice, Array.splice , Array.push, etc.).
And I'm trying to optimize it, however Chrome's and Firefox's (the only browsers the website works in) DevTools and Firebug's profilers don't show anything more specific than function calls. Visual Studio has a nice thing where after profiling an application, it will tell you what percent of execution was spent on each line of your functions, which is really helpful.
I've tried breaking up the function into smaller functions, but then the function call overhead inflates to take up most of my execution time.
Firebug's and the DevTools' profilers provide you with detailed information on how much time was spent within each function. See the following screenshots:
Firebug (Own Time column)
Firefox DevTools (Self Time column)
Chrome DevTools (Self column)
The Firefox DevTools furthermore allow you to include platform data by enabling the option Show Gecko Platform Data within the Performance panel options:
Though the tools only display data per-function. They do not allow you to display per-line, or to be more precise, per-statement information, probably because this is something the JavaScript author cannot influence directly.
If you believe that this information can be relevant for a JavaScript author, you should file requests for each of those tools to implement this feature explaining the reasoning behind it.
Intel XDK provides information you are asking for. Here is a link to the Inbtel XDK profiling tools: https://software.intel.com/en-us/xdk/docs/using-the-profile-tab There are several pictures and help how to use it.
We are collecting the profile and annotate the source view by the self time metrics.
Currently we are doing this on Android devices, but have plans to migrate GUI to CDT and upstream it. But even before upstreaming this functionality will be available on Windows and Linux platforms in the browser named Crosswalk. Crosswalk is a chromium based browser, containing promising features like SIMD.js or WebCL.js
Several more worlds regarding collected information. Intel XDK JavaScript CPU profiler annotates only sources by self time, but we are working on adding total times - how much time was spend for certain line and all callee functions from this line.
For running of the profiling you need to download XDK, create new project and add your code to it. Then switch to Profile tab, plug the device via wire, select CPU profiler if it is not selected and press Profile button. Waiting your feedback on using it.

Chromeless window in Chrome extension?

So recently I've come across a Webapp on Chrome Web Store called Type Fu. What amazed me is they actually created a true chromeless window.
I'm thinking if I can do it in a Chrome extension because in most parts they use the same APIs. However, I can't find anything that will let me to do this effect.
chrome.tabs.create is not useful at all.
It would be madness if I can't do that in an extension because in my opinion, an extension should have more "power" than a webapp (a webpage basically).
I couldn't press Ctrl + Shift + I or even right-click on it. It's just like a real native program on my computer.
Some buttons will open another floating chromeless window.
...in most parts they use the same APIs
Chrome extensions are designed to interact with the browser. Chrome packaged apps are designed to be standalone and operate independently from the browser. Their APIs have now widely diverged. Just take a look at the API listings for apps and the equivalent listing for extensions, and you'll see that they are quite different.
In this case, the Type Fu uses the chrome.app.window API, particularly the frame: 'none' option of the create function.
As the name of app.window suggests, it's only available to packages apps, not extensions. The extension-based chrome.windows.create method will eventually support a type: 'panel' option that will supply visually similar functionality (see it at work in Google's Hangouts extension). It's described in the API with a note:
The 'panel' and 'detached_panel' types create a popup unless the '--enable-panels' flag is set.
Currently only Hangouts is whitelisted to use panels, but the discussion at Having panel behavior in chrome extension suggests that your extension can pretend to be Hangouts by adding a specific key value to your manifest:
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDsDApubb73tPfYlNIFxDu3K3/EHgV6/YOJXJkld1OZ20jW/cOht1j0NggnXhQYuu1mXFUufud4I2N7b5ydyg09gcM9Va3Zk17RhNV9smbPHOd4XlzJeXifX/9MgHPu4FzCen3CiSXsOeAELJIXEuT28xICriuUko/rNPwGeIB9VwIDAQAB"
However, I wouldn't rely on this undocumented behavior; Google is likely to fix it, or it may break something else in the future.
Until panels are fully supported then, you can begin developing your extension with the --enable-panel browser flag and hope the feature is enabled by default once you have completed development.

Mozilla Firefox programmatic screen capture

I'm interested in writing javascript that will programmatically perform a screen capture of what is viewed in the browser, and save the file to the hard disk. I'd like to be able to type in a list of keywords, and use a search engine's api to programmatically view the page, and take a screen capture.
My first question is, does this sounds like something that would violate the terms of my browser, Firefox, or any or all search engine api's? All of my web development experience is Internet Explorer. I'm aware of the various free and open source applications available, but am not familiar with their licenses.
Is this something that could be done using javascript? I've noticed that there are screen capture add-ons available to install. Is it possible to execute an add-on programmaticaly through javascript?
Is their a Firefox / Mozilla equivalent to an ActiveX control?
Any information would be greatly appreciated.
Thanks
You can use flash/Active X to do it. Check out Kpoint.in, It records the entire desktop from within the browser(Works only for Windows though). I think they are using their own Firefox extension for the Audio.

Categories

Resources