differentiate between chrome browser and chrome app in javascript

Question

How do I differentiate between if my code is running inside a chrome browser or a chrome app ? The application uses webview to load specific pages in which the javascript code has to work differently for chrome app and chrome browser.

Answer 1

The cleanest way would be to inject a content script into the webview that, in turn, injects some code into the page before it loads.

Something along those lines:

webview.addContentScripts([{
  name: 'beacon',
  matches: ['https://www.example.com/*'],
  js: { files: ['beacon.js'] },
  run_at: 'document_start'
}]);
webview.src = "https://www.example.com/app"

// beacon.js
var script = document.createElement('script');
script.textContent = "window.inWebview = true;";
(document.head||document.documentElement).appendChild(script);
script.remove();

Then, in your code, you can check whether window.inWebview is defined and true.

Less clean alternatives:

• Modify the user-agent in a predictable way with webview.setUserAgentOverride.
• Simply load the page with an extra parameter: https://www.example.com/app?webview=1.