Chrome扩展（YouTube换肤）弹窗按钮无法触发JS函数求助

我正在开发一款YouTube换肤Chrome扩展，但弹窗中的确认按钮始终无法触发JS函数。尝试过内联脚本方法，但触发CSP违规；也尝试过事件监听写法document.getElementsByName("submitColors").addEventListener("click", getColors());，但完全没触发。刚接触HTML和JS，求各位帮忙排查问题。

相关代码 #

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link href="popup.css" rel="stylesheet" />
  </head>
  <body>
    <!--Color labels and inputs-->
    <form>
      <label for="Red" name="redLabel">Red (Between 0 and 255):</label>
      <input type="number" id="redInput" name="Red" min="0" max="255" value="0">
    </form>
    <form>
      <label for="Green" name="greenLabel">Green (Between 0 and 255):</label>
      <input type="number" id="greenInput" name="Green" min="0" max="255" value="0">
    </form>
    <form>
      <label for="Blue" name="blueLabel">Blue (Between 0 and 255):</label>
      <input type="number" id="blueInput" name="Blue" min="0" max="255" value="0">
    </form>
    <!--Submit button-->
    <button type="button" name="submitColors" id="submitColors">Submit Colors</button>

    <script src="popup.js"></script>
  </body>
</html>

popup.js

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var background = rootStyles.getPropertyValue('--yt-spec-base-background').trim();
var themeColors = {
  Red: "",
  Green: "",
  Blue: ""
};

//Converts the hex-formatted css vars to RGBA to use with themeColors
function hexToRgba(hex) {
  // Remove the # if it's there
  hex = hex.replace(/^#/, "");

  // Convert the hex to a number
  var r = parseInt(hex.substring(0, 2), 16);
  var g = parseInt(hex.substring(2, 4), 16);
  var b = parseInt(hex.substring(4, 6), 16);

  // Create an array of the RGB values
  var rgba = [r, g, b];

  // If there is an alpha channel, add it to the array
  if (hex.length === 8) {
    var a = parseInt(hex.substring(6, 8), 16);
    rgba.push(a / 255);
  } else {
    rgba.push(1);
  }

  // Return the array of rgba values
  return rgba;
}

function getElementValue(Name){
  // getElementsByName返回NodeList，取第一个元素的value
  return document.getElementsByName(Name)[0].value;
}

//Sets css function on website to RGB value from user input
function getColors(){
  alert("getColors run");

  //Assigns new color to themeColors RGB values
  themeColors.Red = parseInt(getElementValue("Red"), 10);
  themeColors.Green = parseInt(getElementValue("Green"), 10);
  themeColors.Blue = parseInt(getElementValue("Blue"), 10);
  
  // 获取颜色后调用应用函数
  useColors();
}

function useColors(){
  alert("useColors run");
  // 传入实际的颜色值，不是变量名
  var currentAsRGBA = hexToRgba(background);
  console.log(currentAsRGBA);
  var current_R = currentAsRGBA[0];
  var current_G = currentAsRGBA[1];
  var current_B = currentAsRGBA[2];
  
  // 计算新颜色并转为合法的RGB格式
  var newR = Math.round((current_R + themeColors.Red) / 2);
  var newG = Math.round((current_G + themeColors.Green) / 2);
  var newB = Math.round((current_B + themeColors.Blue) / 2);
  
  root.style.setProperty('--yt-spec-base-background', `rgb(${newR}, ${newG}, ${newB})`);
}

// 页面加载完成后绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  // 通过ID获取按钮，比name更可靠
  var submitBtn = document.getElementById('submitColors');
  if(submitBtn) {
    // 注意不要加括号，否则会直接执行函数而不是绑定事件
    submitBtn.addEventListener('click', getColors);
  }
});

问题排查与修正说明 #

1. HTML结构错误：原代码把<body>放在了<head>内部，这会导致DOM解析异常，元素无法被正确获取。修正后将<head>和<body>按标准结构嵌套。
2. CSP违规问题：Chrome扩展默认禁止内联脚本，所以原代码中的内联<script>块会被拦截。解决方案是把所有JS逻辑移到外部的popup.js中。
3. 事件监听写法错误：
   • document.getElementsByName()返回的是NodeList集合，不能直接调用addEventListener，需要取集合中的单个元素；
   • 绑定事件时传getColors()会直接执行函数，应该传函数引用getColors。
4. 元素值获取错误：document.getElementsByName()返回集合，需要通过[0]取第一个元素才能获取value。
5. 颜色处理错误：
   • hexToRgba函数传入的应该是实际的颜色值（比如#000000），而不是CSS变量名--yt-spec-base-background；
   • 设置CSS变量时，颜色值需要是合法的CSS格式（比如rgb(r,g,b)），原代码中的逗号分隔数值不是有效格式。

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