Develop Reference

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).

browser plug-in or extension, which to choose?

I intend to modify the display of existing websites.
For example, when Google returns search results, can I customize the web page displaying (such as adding some bubble visualizations onto that page's blank places) ? Could it be done using browser plug-in or extension?
Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.

Could it be done using browser plug-in or extension?
Yes. But you don't want to write a browser plug-in. They're fairly complicated to write and users are reticent to install them (with good reason) Further, you'd have to write two, as Mozilla and Google can't agree on a format (Chrome is removing the venerable NPAPI, but Mozilla won't implement Google's PPAPI, claiming that it's a moving target with inadequate documentation).
Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.
No. Firefox add-ins and Chrome extensions can do a lot more than that, including modifying the page once it's rendered.
So you'll probably want to write a Firefox add-in and a Chrome extension. (Sadly, yes, that's two codebases to maintain, although they use similar technologies — HTML, CSS, JavaScript — so you can share a bit between them.)

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.

Is there a way to port a chrome extension to other browsers?

Is there a way to port a chrome extension to other browsers, without having to entirely re-write the code? My chrome extension uses the browser_action command to open "popup.html" in the extension window...
Update: I found adblockforchrome port.js and found it only somewhat helpful for porting to Safari...

Apple provides some guidance on how to port convert a Chrome extension to Safari, but the problem you're going to run into is that each browser has a different set of allowed functionality for extensions. Even with Chrome to Safari, there are things you could do in Chrome you can't do in Safari, and visa versa.

It depends on the type of the extension, but not really. To answer your question more clearly, you need to specify what your extension is about: modify some pages (like userscripts/userstyles), extend browsers' features, or something else.
There are a few portability notes, however, that could help you to simplify this process:
Don't write browser specific code. In some modern browsers you're able to use HTML5 features, like Web SQL Database API. It is difficult to emulate such behaviour on IE, for instance.
Keep your JavaScript modular; don't use vendor specific JavaScript methods, and your code will be portable and will not rely on TraceMonkey or V8;
Separate HTML from CSS and Javascript, don't make your code dirty and complicated.

Jumping in a bit late.
Our company - Slice Factory (full disclosure here!) does provide a browser extension conversion service: http://gallery.extensionfactory.com/labs/conversion/
In most cases your chrome extension will work seamlessly in FF and Safari.
The service is still in beta trial, and Firefox conversion is working better than Safari one.
I can't fully disclose what's our technical solution, but this being an SO answer, I can add a few details: we have re-developed a full javascript api stack that mimics most of chrome extension APIs for Safari and Firefox; in Firefox we base our work on JetChrome. Plus we have wrappers that re-package the chrome extension adding our library and rewriting manifests and so on.
Beyond that, it's mostly a few good ideas, trial and error, and a LOT of development time.
As an example:
Safari 5.1 just introduced a popup corresponding to Chrome's browser_action, but we have already an alternative solution that works for previous versions. Firefox does not support HTML5 WebSQL, but we have an API for it. We also provide a way to bring webapps to FF, and soon to Safari.
The objective is to have Chrome API as a reference, and mimic it on all the other browsers.
Without pushing you towards our solution, I might add that the time to fully cover the Chrome API on both Safari and Firefox is probably not worth it - unless you plan to convert several extensions. So for just one or two extensions I would advise making your code as modular as possible, and just creating three extensions - or trying our service!

Yes, it's possible with Webextension API using webextension-polyfill.
I made use of it to build this where I only had to change the callback methods to Promises and using browser.something instead of chrome.something to call the browser APIs.