Firefox附加组件CSS注入不生效、无报错但代码已执行问题求助

问题根因定位 #

• 错把特权API用在了content script环境：browser.tabs.insertCSS 只有扩展后台、弹出页才能调用，运行在页面上下文的content script根本没有这个API的调用权限。之前没看到任何报错，是因为错误处理写崩了：insertingCSS.then(null, console.log("Injection error !")) 这行代码执行到的时候，console.log会立刻运行，把返回的undefined当成错误回调传给Promise，真触发权限错误时根本抓不到日志。
• CSS拼接逻辑完全不符合预期：JS里+的运算优先级比||高，你原来写的拼接代码实际是先把字符串和配置值拼完，再做兜底判断，根本达不到“配置为空时 fallback 到 auto”的效果，拼出来的CSS是残缺的，就算API调用成功也不会生效。
• 事件监听偶发失效：你没有在manifest里指定content script的运行时机，默认是document_idle，等脚本加载时DOMContentLoaded事件大概率已经触发过了，再去绑定监听永远等不到回调，只不过测试时刚好走到了alert分支没发现这个问题。

可直接用的修正方案 #

1. 不要在content script里硬调特权接口，直接利用content script本身就能操作当前页面DOM的能力，通过创建style节点的方式注入CSS，完全绕开API权限问题：
   替换setCurrentChoice里的原有逻辑：

   function setCurrentChoice(result) {
     // 单独写每个配置项的兜底逻辑，避免优先级问题
     const bgColor = result.background_color || "auto";
     const textColor = result.color || "auto";
     const cssText = `::selection { background: ${bgColor}; color: ${textColor} }`;
   
     // 直接插入style标签
     const styleEl = document.createElement('style');
     styleEl.textContent = cssText;
     document.documentElement.appendChild(styleEl);
   }
   

2. 修正异步操作的错误捕获逻辑，不要把立即执行的console.log当错误回调，存储读取的错误处理改成正经的函数：

   let getting = browser.storage.sync.get();
   getting.then(setCurrentChoice, (err) => {
     console.log(`配置读取失败: ${err}`);
   });
   

3. 可选优化项：
   • 在manifest的content_scripts配置里加上"run_at": "document_start"，脚本加载完直接执行逻辑，不需要等DOMContentLoaded事件，既能避免监听失效的问题，还能更早注入样式避免页面闪烁。
   • 换成DOM注入方案后，原来申请的tabs权限完全没用，可以删掉，减少不必要的权限申请，也更容易通过扩展商店的审核。

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