Chrome扩展中如何插入不遮挡内容的持久化通知栏div？

方案1：动态适配页面底部间距+监听样式变化 #

动态网站常通过脚本修改body样式，导致手动设置的padding/margin被覆盖。通过以下步骤解决：

• 实时计算通知栏实际高度
• 为body和html设置对应高度的padding-bottom
• 用MutationObserver监听body样式变化，确保间距不会被覆盖

import { useEffect, useRef } from 'react';

const MyNotificationDiv = () => {
  const barRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adjustBodyPadding = () => {
      if (!barRef.current) return;
      const barHeight = barRef.current.offsetHeight;
      if (document.body.style.paddingBottom !== `${barHeight}px`) {
        document.body.style.paddingBottom = `${barHeight}px`;
        document.documentElement.style.paddingBottom = `${barHeight}px`;
      }
    };

    // 初始化调整
    adjustBodyPadding();
    // 监听窗口 resize
    window.addEventListener('resize', adjustBodyPadding);
    // 监听body样式变化
    const observer = new MutationObserver(adjustBodyPadding);
    observer.observe(document.body, { attributes: true, attributeFilter: ['style'] });

    // 卸载时恢复原样式
    return () => {
      window.removeEventListener('resize', adjustBodyPadding);
      observer.disconnect();
      document.body.style.paddingBottom = '';
      document.documentElement.style.paddingBottom = '';
    };
  }, []);

  return (
    <div 
      ref={barRef}
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        width: '100%',
        zIndex: 2147483647, // 使用CSS最大合法z-index值
        backgroundColor: '#fff',
        borderTop: '1px solid #eee',
        padding: '8px 16px',
        boxSizing: 'border-box'
      }}
    >
      {/* 通知内容 */}
      持久化通知栏
    </div>
  );
};

export default MyNotificationDiv;

方案2：使用Shadow DOM隔离样式与层级 #

页面高优先级z-index元素可能覆盖通知栏，Shadow DOM可完全隔离样式，避免页面样式干扰：

import { useEffect } from 'react';
import ReactDOM from 'react-dom/client';

const MyNotificationBarContent = () => {
  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      left: 0,
      width: '100%',
      zIndex: 2147483647,
      backgroundColor: '#fff',
      borderTop: '1px solid #eee',
      padding: '8px 16px',
      boxSizing: 'border-box'
    }}>
      Shadow DOM隔离的通知栏
    </div>
  );
};

// 内容脚本中挂载到Shadow DOM
export const mountNotificationBar = () => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  
  const shadowRoot = container.attachShadow({ mode: 'open' });
  // 添加样式重置，避免继承页面样式
  const resetStyle = document.createElement('style');
  resetStyle.textContent = `* { margin: 0; padding: 0; box-sizing: border-box; }`;
  shadowRoot.appendChild(resetStyle);
  
  // 挂载React组件
  const root = ReactDOM.createRoot(shadowRoot);
  root.render(<MyNotificationBarContent />);

  // 调整页面底部间距
  const adjustPadding = () => {
    const barHeight = container.offsetHeight;
    document.body.style.paddingBottom = `${barHeight}px`;
    document.documentElement.style.paddingBottom = `${barHeight}px`;
  };
  adjustPadding();
  window.addEventListener('resize', adjustPadding);

  // 卸载清理
  return () => {
    window.removeEventListener('resize', adjustPadding);
    document.body.removeChild(container);
    document.body.style.paddingBottom = '';
    document.documentElement.style.paddingBottom = '';
  };
};

方案3：改用侧边固定栏规避底部冲突 #

若底部始终存在布局冲突，可将通知栏移至侧边，避开页面底部操作元素（如返回顶部按钮、cookie提示）：

const MySideNotificationBar = () => {
  return (
    <div style={{
      position: 'fixed',
      right: 0,
      top: '50%',
      transform: 'translateY(-50%)',
      zIndex: 2147483647,
      backgroundColor: '#fff',
      borderLeft: '1px solid #eee',
      padding: '12px 8px',
      boxSizing: 'border-box',
      width: '60px',
      textAlign: 'center'
    }}>
      {/* 侧边通知内容 */}
      <div>新通知</div>
    </div>
  );
};

额外优化建议 #

• 若通知栏无需交互，添加pointer-events: none，允许页面元素透过通知栏被点击
• 对页面中已有的固定底部元素（如页脚），可动态调整其bottom值：

  const adjustFixedElements = (barHeight: number) => {
    const fixedBottomEls = document.querySelectorAll('[style*="position: fixed"][style*="bottom:"]');
    fixedBottomEls.forEach(el => {
      const currentBottom = parseInt(el.style.bottom) || 0;
      el.style.bottom = `${currentBottom + barHeight}px`;
    });
  };
  

  注意：需在组件卸载时恢复这些元素的原有样式。

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