如何确定您的扩展程序后台脚本正在哪个浏览器中执行？

Question

我说的是 Chrome 扩展、Firefox WebExtensions、Edge 扩展...

在后台脚本中，而不是内容脚本中，是否有一种“明确的方法”来知道我正在使用哪个浏览器？我需要针对不同的浏览器进行不同的操作。 是的，

navigator.userAgent

可能有用，但是

不是很清楚

。 是否有任何扩展 API 可用于执行此操作？就像，

chrome.extension.browserType

。 （当然，这个并不存在..）

Answer 1

1,

² 因此，对于某些事情，有必要能够确定代码当前正在运行的浏览器。 “如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？”

投票最高的答案中提供了一些很好的代码。然而，它需要一些修改才能在扩展环境中工作。

根据该答案中的代码，以下内容将检测：

铬

边缘
火狐
歌剧
Blink 引擎

• // Opera 8.0+ (tested on Opera 42.0)
  var isOpera = (!!window.opr && !!opr.addons) || !!window.opera 
                  || navigator.userAgent.indexOf(' OPR/') >= 0;
  
  // Firefox 1.0+ (tested on Firefox 45 - 53)
  var isFirefox = typeof InstallTrigger !== 'undefined';
  
  // Internet Explorer 6-11
  //   Untested on IE (of course). Here because it shows some logic for isEdge.
  var isIE = /*@cc_on!@*/false || !!document.documentMode;
  
  // Edge 20+ (tested on Edge 38.14393.0.0)
  var isEdge = !isIE && !!window.StyleMedia;
  
  // Chrome 1+ (tested on Chrome 55.0.2883.87)
  // This does not work in an extension:
  //var isChrome = !!window.chrome && !!window.chrome.webstore;
  // The other browsers are trying to be more like Chrome, so picking
  // capabilities which are in Chrome, but not in others is a moving
  // target.  Just default to Chrome if none of the others is detected.
  var isChrome = !isOpera && !isFirefox && !isIE && !isEdge;
  
  // Blink engine detection (tested on Chrome 55.0.2883.87 and Opera 42.0)
  var isBlink = (isChrome || isOpera) && !!window.CSS;
  
  /* The above code is based on code from: https://stackoverflow.com/a/9851769/3773011 */    
  //Verification:
  var log = console.log;
  if(isEdge) log = alert; //Edge console.log() does not work, but alert() does.
  log('isChrome: ' + isChrome);
  log('isEdge: ' + isEdge);
  log('isFirefox: ' + isFirefox);
  log('isIE: ' + isIE);
  log('isOpera: ' + isOpera);
  log('isBlink: ' + isBlink);

API 的不同实现与不同浏览器一样复杂且多样化的接口总是会导致（至少）实现之间存在细微的差异。目前，许多差异并不那么微妙。

---

Mozilla 明确表示，他们打算通过扩展
1. chrome.*/browser.*
API 来实现目前其他浏览器中不可用的 WebExtensions 功能。实现此目的的一种方法是使用一种名为“WebExtensions Experiments”的机制，该机制旨在让非 Mozilla 开发人员为 WebExtensions 实现附加功能。 其目的是，如果获得批准，此类功能将迁移到现有的 Firefox 版本中。
2. 这是另一种技术。 browser.identity.getRedirectUrl 函数将返回一个后缀为：
的 URL

Answer 2

.extensions.allizom.org/

从 Firefox 运行时

.chromiumapp.org/

从 Chrome/Chromium 运行时
• 在启动时调用它并将其存储在后台脚本的运行时状态中非常简单。 Edge 和 Opera
也支持此功能
• 。现在，在 Chrome 中运行时，通常 Web 扩展 API 调用以
chrome

开头，但此时跨浏览器扩展编写器应该习惯于

Web 扩展 Polyfill JS，如果您愿意，您也需要使用它调用 browser.identity.getRedirectUrl

可在任何浏览器上工作。

这是最好的选择，但目前仅适用于 Firefox。

browser.runtime.getBrowserInfo()

Answer 3

添加一个常量来保存该值。在发布到每个浏览器商店之前修改它的设置。

即：

const BrowserCode = {
    CHROME:1,
    FF: 2,
};

// to submit to chrome
const CURRENT_BROWSER = BrowserCode.CHROME;

// or to submit to FF
const CURRENT_BROWSER = BrowserCode.FF;

// elsewhere

if (CURRENT_BROWSER === BrowserCode.CHROME) {

}

//or

const behavior = {
    BrowserCode.CHROME: () => {},
    BrowserCode.FIREFOX: () => {}
}

behavior[CURRENT_BROWSER]();

Answer 4

要执行设置，您只需使用一些简单的 shell 脚本来执行字符串替换即可。在这种情况下，您可以使用一种浏览器类型：BrowserCode.UNDEFINED。在这种情况下，您只需要一个正则表达式来查找以 const CURRENT_BROWSER 开头并以 BrowserCode.UNDEFINED 结尾的行；并将其替换为正确的。

不幸的是，扩展程序

仍然

没有这个API，这是一个耻辱，因为开发人员应该知道他们的扩展程序正在运行哪个浏览器，以便改变它的行为，或者至少是它的UI。

我解决这个问题的方法有点像 Mayken 的答案，但更简单。

Answer 5

const userAgent = navigator.userAgent;
let browser;
if (userAgent.includes("Edg")) {
  browser = "Edge"
} else {
  browser = "Chrome"
}

Edge 返回给我的字符串是 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

，这不是很有帮助，但它可以与没有“Edge/130.0.0.0”部分的 Chrome 区分开来。