Javascript 试图在我的终端上运行WebExtRun来测试我的第一个Firefox扩展，但我的HTML不是'；t渲染_Javascript_Html_Firefox_Tabs

Javascript 试图在我的终端上运行WebExtRun来测试我的第一个Firefox扩展，但我的HTML不是'；t渲染

javascript html firefox tabs

Javascript 试图在我的终端上运行WebExtRun来测试我的第一个Firefox扩展，但我的HTML不是'；t渲染,javascript,html,firefox,tabs,Javascript,Html,Firefox,Tabs,我的应用程序的目标是呈现一个询问用户出生日期的表单，然后每次用户打开一个新选项卡时都显示一个年龄计数器和当前时间，但除了背景颜色之外，我的HTML文件中没有其他内容当我使用本地路径测试我的应用程序时，我的JS、CSS和HTML都能正确呈现——出于这个原因，我将manifest.json与Mozilla提供的许多示例进行了比较，看起来没有什么不同，所以我认为我的很好。。我的文件结构非常基本，除了CSS文件夹中的CSS文件和图标文件夹中的图标外，所有内容都在主控制器中当我在终端上运行webext

我的应用程序的目标是呈现一个询问用户出生日期的表单，然后每次用户打开一个新选项卡时都显示一个年龄计数器和当前时间，但除了背景颜色之外，我的HTML文件中没有其他内容

当我使用本地路径测试我的应用程序时，我的JS、CSS和HTML都能正确呈现——出于这个原因，我将manifest.json与Mozilla提供的许多示例进行了比较，看起来没有什么不同，所以我认为我的很好。。我的文件结构非常基本，除了CSS文件夹中的CSS文件和图标文件夹中的图标外，所有内容都在主控制器中

当我在终端上运行

webextrun

时，我在firefox中打开的新选项卡的背景会根据我的CSS发生变化，因此我知道有响应。出于这个原因，我认为问题可能在于我编写了HTML

在过去的一周里，我一直在绞尽脑汁想弄清楚是否有什么与我通常做的不同之处，但我认为这可能归结为一条规则，即在HTML中使用我不熟悉的脚本标记。谁能告诉我哪里出了问题

以下是HTML：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Memento Mori - New Tab</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap"
      rel="stylesheet"
    />
    <link href="css/newtab.css" type="text/css" rel="stylesheet" />
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script type="application/javascript" src="newtab.js"></script>
  </head>
 
  <body>
    <div id="main" style="width: 100%"></div>

    <script>
      if (localStorage.length == 0) {
        document.title = "Set up Memento Mori";
        document.getElementById("main").innerHTML = 
        `<div class="container">
            <div class="title"><h3>Set up Memento Mori</h3></div>
            <form>
            <label for="birthDate">Enter your date of birth:</label>
            <input type="date" name="Birthdate"id="birthDate" placeholder="YYYY-MM-DD" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"></input>
            <button type="submit" id="button">Submit</button>
            </form>
        </div>`;
      } else {
        document.title = "Memento Mori";
        document.getElementById("main").innerHTML = 
        `<div class="container">
            <div class="title"><h3>Memento Mori</h3></div>
            <div id="memento-lg"></div>
            <div id="memento-sm"></div>
            <div id="clock""></div>
            <button type="submit" id="clearDob">Reset DoB</button>
        </div>`;
        renderTimers();
      }
    </script>
    
    <script type="text/javascript" src="newtab.js"></script>
  </body>
</html>


森喜朗纪念品-新标签
if（localStorage.length==0）{
document.title=“设置Memento Mori”；
document.getElementById（“main”）.innerHTML=
`
设立森喜朗纪念馆
输入您的出生日期：
提交
`;
}否则{
document.title=“Memento Mori”；
document.getElementById（“main”）.innerHTML=
`
森喜朗纪念品
尝试将内联的
标记移动到一个单独的文件中（比如newtab.js
）由于webextensions不喜欢在manifest.json
中没有特殊键的内联脚本和远程脚本。您可以查看更多信息information@wilkoklak非常感谢您指出这一点，我阅读了CSP，这就是我的问题。我将JS移到newtab.JS，它确实解决了我的代码silentl问题y失败，但现在我遇到了让函数执行的问题。我现在做的是添加一个eventListener以等待页面加载，此时我将加载主函数（您在HTML中看到的脚本）。开始时，一切正常，但当我输入DOB和submbit时，什么也没有发生-出生日期没有添加到存储中。@wilkoklak关于日期的JS在这里，很抱歉格式化：if（localStorage.getItem（“birthDate”）{birthDate=localStorage.getItem（“birthDate”）；}else{birthDate=new date（）；}$（“#按钮”）。单击（function（）{var dob=$（“#birthDate”）.val（）；if（typeof dob！==null）{const birthDate=dob.split（“-”）；var parsedDate=（birthDate[0]+“-”+birthDate[1]+“-”+birthDate[2]）；console.log（parsedDate）；birthDate=parsedDate=parsedDate；localStorage.setItem（“birthDate”，birthDate）；}；