按钮不起作用并更改边框颜色

Button doesn't work and change the border color

我尝试编写一些 Firefox 扩展程序的代码,但弹出窗口中的按钮无法正常工作。 单击该按钮时应该发生的是红色边框变为绿色边框。 我找不到错误。

这是我的manifest.json

{

  "manifest_version": 2,
  "name": "Testing",
  "version": "1.0",

  "description": "Testing",

  "icons": {
    "48": "icon.jpg"
  },

  "content_scripts": [
    {
      "matches": ["*://*.allee-abi20.de/*"],
      "js": ["ust.js"]
    }
  ],
    
  "permissions": [
    "activeTab",
    "contextMenus"
  ],
  
  "browser_action": {
        "default_icon": "icon.jpg",
        "default title": "Hallo",
        "default_popup": "view.html"
    }
}

那就是 view.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href = "style.css" type="text/css"/> 
    </head>
    <body>
        <input type=text id="Kat"></input>
        <input type=text id="Ty"></input>
        <button id= "but">Klicken </button>     
    <script type="text/javascript" src="./popup.js"></script>   
    </body>
</html>

那就是 popup.js

document.body.style.border = "5px solid red";
var myLink = document.getElementById("But");
myLink.onclick = function(){
    document.body.style.border = "20px solid green";
}

关于大写的一个小语法问题:写 but,而不是 But,因为 Butundefined.