如何修改Chrome确认窗口中的“XYZ网站提示：”文本为扩展名称？

可行性说明 #

原生confirm()弹窗的标题栏文本（比如你看到的“XYZ网站提示：”）是浏览器基于当前页面域名自动生成的，无法直接修改。要显示你的扩展名称，必须放弃原生弹窗，改用自定义HTML弹窗实现。

实现步骤 #

1. 移除对原生confirm()的调用，改为向当前标签页注入自定义弹窗的HTML、CSS和JavaScript代码
2. 自定义弹窗可完全控制标题、内容与样式，直接将标题设置为你的扩展名称

修改后的代码示例 #

背景脚本（background.js）

var notifyTimer = setInterval(func, 5 * 1000);
console.log('setinterval ran');

function func() {
  getCurrentTab();
}

async function getCurrentTab() {
  let queryOptions = { active: true, lastFocusedWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  console.log(tab.url);

  // 注入自定义弹窗代码
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: createCustomConfirm,
    args: ["你的扩展名称", "You've been working for too long on Chrome. Would you like to take a break?"]
  });

  return tab;
}

// 自定义弹窗创建函数
function createCustomConfirm(extensionName, message) {
  // 创建弹窗遮罩层
  const modalOverlay = document.createElement('div');
  modalOverlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
  `;

  // 创建弹窗主体
  const modal = document.createElement('div');
  modal.style.cssText = `
    background: white;
    border-radius: 8px;
    padding: 20px;
    width: 350px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
  `;

  // 弹窗标题（显示扩展名称）
  const title = document.createElement('h3');
  title.textContent = extensionName;
  title.style.margin = '0 0 15px 0';
  title.style.color = '#333';

  // 弹窗消息文本
  const msg = document.createElement('p');
  msg.textContent = message;
  msg.style.margin = '0 0 20px 0';
  msg.style.color = '#666';

  // 按钮容器
  const btnContainer = document.createElement('div');
  btnContainer.style.display = 'flex';
  btnContainer.style.justifyContent = 'flex-end';
  btnContainer.style.gap = '10px';

  // 确认按钮
  const confirmBtn = document.createElement('button');
  confirmBtn.textContent = '确认';
  confirmBtn.style.padding = '8px 16px';
  confirmBtn.style.border = 'none';
  confirmBtn.style.borderRadius = '4px';
  confirmBtn.style.background = '#007bff';
  confirmBtn.style.color = 'white';
  confirmBtn.style.cursor = 'pointer';

  // 取消按钮
  const cancelBtn = document.createElement('button');
  cancelBtn.textContent = '取消';
  cancelBtn.style.padding = '8px 16px';
  cancelBtn.style.border = '1px solid #ccc';
  cancelBtn.style.borderRadius = '4px';
  cancelBtn.style.background = 'white';
  cancelBtn.style.color = '#333';
  cancelBtn.style.cursor = 'pointer';

  // 按钮点击逻辑
  function handleResult(isConfirm) {
    console.log(isConfirm ? '用户选择休息' : '用户继续工作');
    modalOverlay.remove();
    // 可在此添加后续逻辑，比如向背景脚本发送结果
  }

  confirmBtn.addEventListener('click', () => handleResult(true));
  cancelBtn.addEventListener('click', () => handleResult(false));
  modalOverlay.addEventListener('click', (e) => {
    if (e.target === modalOverlay) handleResult(false);
  });

  // 组装弹窗
  btnContainer.appendChild(confirmBtn);
  btnContainer.appendChild(cancelBtn);
  modal.appendChild(title);
  modal.appendChild(msg);
  modal.appendChild(btnContainer);
  modalOverlay.appendChild(modal);
  document.body.appendChild(modalOverlay);
}

关键说明 #

• 自定义弹窗通过动态创建DOM元素实现，样式和内容完全可控，标题栏直接显示你的扩展名称
• 设置z-index: 999999确保弹窗能覆盖页面其他内容
• 点击弹窗外部、取消按钮或确认按钮都会关闭弹窗，可根据用户选择执行后续逻辑

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