Chrome扩展注入CSS后悬浮按钮不显示问题求助

核心原因 #

你没有将按钮的DOM元素插入到目标页面中——stbButton.html仅作为单独文件存在，但从未被注入或添加到页面的DOM结构里，这就是按钮无法显示的根本原因。

具体修复步骤 #

1. 修改contentscript.js，动态创建并插入按钮
   替换原内容脚本代码，通过JS直接生成按钮元素并添加到页面：

   // 等待DOM加载完成后执行
   document.addEventListener('DOMContentLoaded', () => {
     // 创建按钮元素
     const stbButton = document.createElement('button');
     stbButton.id = 'stb';
     stbButton.title = 'Go to Bottom';
     stbButton.textContent = 'Top';
     
     // 绑定点击事件（避免页面上下文隔离导致的函数找不到问题）
     stbButton.addEventListener('click', () => {
       document.documentElement.scrollTop = 0;
     });
     
     // 将按钮插入到页面body中
     document.body.appendChild(stbButton);
   });
   

2. 清理冗余文件
   现在不需要单独的stbButton.html文件了，可以直接删除。

3. 优化CSS（可选）
   原CSS中修改了body的全局样式（背景变灰），如果仅需要按钮生效，建议移除body相关样式，避免影响目标页面原有样式：

   #stb {
       display: block;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 1000009;
       border: none;
       outline: none;
       background-color: red;
       color: white;
       cursor: pointer;
       padding: 15px;
       border-radius: 10px;
       font-size: 18px;
     }
     
   #stb:hover {
       background-color: #555;
   }
   

额外说明 #

• 内容脚本与页面主上下文是隔离的，直接在HTML中写onclick="bottomFunction()"会导致找不到函数，用addEventListener绑定事件是更可靠的方式。
• 包裹DOMContentLoaded事件确保在页面DOM完全加载后再创建按钮，避免插入失败。

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