如何判断Chrome扩展运行在选项页、内容脚本等不同上下文环境？

Chrome扩展的不同运行上下文（Popup、Options、Content Script、DevTools）有各自的环境特征，我们可以通过这些特征编写检测函数，从而让库在对应环境中执行专属逻辑。

上下文检测函数实现 #

检测Options页面 #

Options页面的URL是在manifest.json中配置的，直接对比当前页面URL即可：

function checkForOptionsPage() {
  // 替换为你实际的Options页面路径
  const optionsUrl = chrome.runtime.getURL('options.html');
  return window.location.href === optionsUrl;
}

检测Popup页面 #

同理，Popup页面的URL也在manifest.json中定义，通过URL匹配判断：

function checkForPopupPage() {
  // 替换为你实际的Popup页面路径
  const popupUrl = chrome.runtime.getURL('popup.html');
  return window.location.href === popupUrl;
}

检测Content Script #

Content Script运行在宿主网页的上下文里，它能访问chrome.runtime API，但当前页面URL不是扩展自身的chrome-extension://协议：

function checkForContentScript() {
  return !!chrome.runtime?.id && !window.location.href.startsWith('chrome-extension://');
}

检测DevTools页面 #

DevTools页面拥有专属的chrome.devtools API，通过判断该API是否存在即可识别：

function checkForDevtools() {
  return !!chrome.devtools?.panel;
}

完整库代码示例 #

把检测逻辑和业务代码整合，就能实现分环境执行：

// 上下文检测函数
function checkForOptionsPage() {
  const optionsUrl = chrome.runtime.getURL('options.html');
  return window.location.href === optionsUrl;
}

function checkForPopupPage() {
  const popupUrl = chrome.runtime.getURL('popup.html');
  return window.location.href === popupUrl;
}

function checkForContentScript() {
  return !!chrome.runtime?.id && !window.location.href.startsWith('chrome-extension://');
}

function checkForDevtools() {
  return !!chrome.devtools?.panel;
}

// 初始化环境标识
const isOptionsPage = checkForOptionsPage();
const isPopupPage = checkForPopupPage();
const isContentScript = checkForContentScript();
const isDevtools = checkForDevtools();

function myLibrary() {
  if (isOptionsPage) {
    // 这里写Options页面专属逻辑
    console.log('执行Options页面代码');
  } else if (isPopupPage) {
    // 这里写Popup页面专属逻辑
    console.log('执行Popup页面代码');
  } else if (isContentScript) {
    // 这里写Content Script专属逻辑
    console.log('执行Content Script代码');
  } else if (isDevtools) {
    // 这里写DevTools页面专属逻辑
    console.log('执行DevTools页面代码');
  }
  // 所有环境通用逻辑
  console.log('执行通用代码');
}

// 启动库
myLibrary();

注意事项 #

• 确保manifest.json中配置的页面路径和检测函数里的URL一致
• Content Script需要在manifest.json中正确声明匹配规则，才能正常访问chrome.runtime API
• DevTools页面需要在manifest.json中配置devtools_page字段，才能使用chrome.devtools API

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