Chrome扩展开发：添加CSS样式滚动按钮无法显示求助

下面是几个导致按钮不显示的核心问题及修复方案：

1. 按钮被设置为完全透明 #

你的CSS代码中，.stb类的opacity: 0会让按钮彻底不可见。这是最直接的原因，把它改成opacity: 1就能让按钮默认显示：

.stb {
    /* 其他样式不变 */
    opacity: 1; /* 替换原来的0 */
}

如果需要实现“滚动后显示”的效果，后续再用JavaScript动态修改opacity即可。

2. 背景图片路径可能无效 #

Chrome扩展中引用本地资源有严格的路径规则：

• 如果tobottom.png和CSS文件在同一目录，建议使用扩展ID绝对路径：chrome-extension://__MSG_@@extension_id__/tobottom.png
• 也可以先暂时移除背景图，用纯色背景测试按钮是否出现：

  background: rgba(1, 96, 121, 1); /* 去掉图片引用，先看纯色按钮 */
  

3. DOM加载时机不稳定 #

document.body.onload的触发时机较晚，且部分页面可能不会触发这个事件。换成DOMContentLoaded事件监听更可靠，同时给按钮加个备用文字（比如↓），防止图片加载失败时完全看不到按钮：

document.addEventListener('DOMContentLoaded', addElement);

function addElement() {
    const stb = document.createElement("button");
    stb.className = "stb";
    stb.textContent = "↓"; // 备用文字
    document.body.appendChild(stb);
}

4. 确认CSS和JS已正确注入到页面 #

检查你的manifest.json是否正确配置了content script，确保CSS和JS都被加载：

"content_scripts": [
    {
        "matches": ["<all_urls>"], // 替换成你要作用的目标网站
        "js": ["ContentScript.js"],
        "css": ["scrolldownbutton.css"],
        "run_at": "document_end"
    }
]

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