如何在浏览器扩展中检测Arc Browser？现有CSS方法失效求替代

针对你在ActivityWatch扩展中无法通过CSS变量检测Arc Browser的问题，以下是几个可行的替代方案：

方案1：解析User Agent字符串 #

Arc浏览器的User Agent会包含专属标识Arc/，可以直接通过navigator.userAgent提取识别：

function isArcBrowser() {
  return navigator.userAgent.includes('Arc/');
}

console.log(isArcBrowser() ? 'Is Arc' : 'Is Not Arc');

这个方法在扩展环境和常规网页中都能稳定工作，无需额外权限。

方案2：检测Arc专属全局变量 #

Arc会在全局环境中暴露专属内部变量（如window.__ARC__），可以通过检查变量存在性判断：

function isArcBrowser() {
  return typeof window.__ARC__ !== 'undefined';
}

console.log(isArcBrowser() ? 'Is Arc' : 'Is Not Arc');

注意：这类内部变量可能随浏览器版本更新发生变化，需要长期验证兼容性。

方案3：通过扩展API获取浏览器信息 #

对于Chromium系浏览器，可使用chrome.runtime.getBrowserInfo()（需提前在扩展配置中声明browserInfo权限）：

async function isArcBrowser() {
  const info = await chrome.runtime.getBrowserInfo();
  return info.vendor.includes('Arc') || info.name === 'Arc';
}

isArcBrowser().then(result => console.log(result ? 'Is Arc' : 'Is Not Arc'));

该方法依赖官方API，稳定性更高，但需要在扩展的manifest.json中添加权限声明：

{
  "permissions": ["browserInfo"]
}

内容的提问来源于stack exchange，提问作者BelKed