Fatal编程技术网
  • javascript/
  • Javascript 脚本在JSFIDLE中工作，但在浏览器中不工作

Javascript 脚本在JSFIDLE中工作，但在浏览器中不工作

javascript google-chrome google-chrome-extension

Javascript 脚本在JSFIDLE中工作，但在浏览器中不工作,javascript,google-chrome,google-chrome-extension,local-storage,Javascript,Google Chrome,Google Chrome Extension,Local Storage,我正在尝试为Chrome浏览器创建一个扩展。它应该包括可以选择新创建选项卡行为的选项（例如，在后台或前台打开选项卡）。该设置应与localStorage一起存储 由于我是JavaScript编程新手，我从中获取了示例代码并尝试对其进行定制。这就是我到目前为止所做的，它在JSFIDLE中工作（这意味着在重新加载页面时保存所选的单选按钮）： 我真的很高兴看到它的工作。但是在创建并加载了Chrome扩展之后，它就不再工作了。此外，在Chrome浏览器中打开html文件并不像在JSFIDLE中那样显示相

我正在尝试为Chrome浏览器创建一个扩展。它应该包括可以选择新创建选项卡行为的选项（例如，在后台或前台打开选项卡）。该设置应与localStorage一起存储

由于我是JavaScript编程新手，我从中获取了示例代码并尝试对其进行定制。这就是我到目前为止所做的，它在JSFIDLE中工作（这意味着在重新加载页面时保存所选的单选按钮）：

我真的很高兴看到它的工作。但是在创建并加载了Chrome扩展之后，它就不再工作了。此外，在Chrome浏览器中打开html文件并不像在JSFIDLE中那样显示相同的行为。为什么不呢？问题出在哪里

这是我的popup.html：

<!DOCTYPE html>
<html>
    <head>
      <style>
      body {
        min-width: 200px;
        min-heigth: 100px;
        overflow-x: hidden;
      }
    </style>
    <script src="popup.js"></script>
    </head>
<body>
     <h3>Neuer Tab im:</h3> 
    <form method="post">
        <input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
        <br />
        <input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
    </form>
    <div id="status"></div>
    <button id="save">Save</button>

    </body>
</html>
最后是manifest.json：

// Saves options to localStorage.
function save_options() {
    var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
    var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;

    var tabVerhaltenIndex;

    if (tabVerhalten1) 
        tabVerhaltenIndex = 0;
    else if (tabVerhalten2) 
        tabVerhaltenIndex = 1;

    localStorage.setItem("tabVerhalten", tabVerhaltenIndex);

    // Update status to let user know options were saved.
    var status = document.getElementById("status");
    status.innerHTML = "&Auml;nderungen gespeichert.";
    setTimeout(function () {
        status.innerHTML = "";
    }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
    var storedVal = localStorage.getItem("tabVerhalten");
    if (!storedVal) {
        return;
    }
    document.getElementsByName('tabVerhalten')[storedVal].checked = true
}

restore_options();

document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);

{
    "manifest_version": 2,
    "name": "TEST",
    "version": "1.0",
    "author": "STM",
    "description": "Description",
    "permissions": ["contextMenus", "tabs"],
    "background": {"scripts": ["script.js"]},
    "icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
    "browser_action": {"default_icon": "48.png", "default_popup": "popup.html"}
}

<!DOCTYPE html>
<html>
    <head>
      <style>
      body {
        min-width: 200px;
        min-heigth: 100px;
        overflow-x: hidden;
      }
    </style>
    </head>
<body>
     <h3>Neuer Tab im:</h3> 
    <form>
        <input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
        <br />
        <input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
    </form>
    <div id="status"></div>
    <button id="save">Save</button>
    <script src="popup.js"></script>
    </body>
</html>
您的问题是，在JSFiddle中，您运行的是JS代码onLoad，而在您的文件中，您运行的是头文件中的JS代码

如果您在JSFIDLE中更改它，它将不再像您在这里看到的那样工作：

那么，你能做些什么来解决这个问题呢

有不同的方法，我建议您像JSFIDLE一样加载JS代码。要执行此操作，请添加。在这里调用名为“loadMyScript（）；”的函数或者像这样：

<body onload="loadMyScript();">
对于下一步，您可以选择：将整个代码放入loadMyScript（）函数中，或者使用loadMyScript（）函数导入脚本。我没有测试这些方法，所以我无法告诉您哪种方法工作得更好或者更简单，但是您应该先尝试导入脚本的方法，因为我认为这样可以避免问题

导入脚本方式的小示例：

<head>
    <script>
        function loadMyScript() {
            var js = document.createElement("script");
            js.type = "text/javascript";
            js.src = "popup.js";
            document.body.appendChild(js);
        }
    </script>
    <!-- YOUR HTML HEAD HERE -->
</head>
<body onload="loadMyScript();">
    <!-- YOUR HTML BODY HERE -->
</body>


函数loadMyScript（）{
var js=document.createElement（“脚本”）；
js.type=“text/javascript”；
js.src=“popup.js”；
document.body.appendChild（js）；
}
请在评论中告诉我这是否解决了你的问题，如果你真的需要否决这一点，请至少留下一条评论，说明你的理由，这样我可以改进自己和答案。

试着这样做：

document.addEventListener("DOMContentLoaded", function() {
    restore_options();
    }, false);
我做了以下修改：

我删除了
method=“post”
在所有其他脚本之后，我移动了
我更改了
addEventListener（）
方法的参数

以下是更改后的脚本

popup.html：

// Saves options to localStorage.
function save_options() {
    var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
    var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;

    var tabVerhaltenIndex;

    if (tabVerhalten1) 
        tabVerhaltenIndex = 0;
    else if (tabVerhalten2) 
        tabVerhaltenIndex = 1;

    localStorage.setItem("tabVerhalten", tabVerhaltenIndex);

    // Update status to let user know options were saved.
    var status = document.getElementById("status");
    status.innerHTML = "&Auml;nderungen gespeichert.";
    setTimeout(function () {
        status.innerHTML = "";
    }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
    var storedVal = localStorage.getItem("tabVerhalten");
    if (!storedVal) {
        return;
    }
    document.getElementsByName('tabVerhalten')[storedVal].checked = true
}

restore_options();

document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);

{
    "manifest_version": 2,
    "name": "TEST",
    "version": "1.0",
    "author": "STM",
    "description": "Description",
    "permissions": ["contextMenus", "tabs"],
    "background": {"scripts": ["script.js"]},
    "icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
    "browser_action": {"default_icon": "48.png", "default_popup": "popup.html"}
}

<!DOCTYPE html>
<html>
    <head>
      <style>
      body {
        min-width: 200px;
        min-heigth: 100px;
        overflow-x: hidden;
      }
    </style>
    </head>
<body>
     <h3>Neuer Tab im:</h3> 
    <form>
        <input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
        <br />
        <input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
    </form>
    <div id="status"></div>
    <button id="save">Save</button>
    <script src="popup.js"></script>
    </body>
</html>
你的错误是什么？打开扩展时，右键单击小页面并单击inspect element。然后转到控制台，查看是否有任何错误是LoggeDuncapt TypeError:无法调用null popup.js:35的方法'addEventListener'。请检查：谢谢，我在第35行解决了错误。现在popup.js的最后一行出现了相同的错误消息，我无法用链接中提到的解释解决问题-错误消息仍然存在。只需尝试
document.getElementById（'#save'）.addEventListener（…）谢谢，这在打开popup.html时有效。但不在chrome扩展中：拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src‘self’chrome扩展资源：”。我可以在popup.js中包含loadMyScript（）吗？（好吧，我试过了，但没有成功——但很可能我没有正确地实现它。）谢谢，这个代码行的错误消息已经解决了。但是我在popup.js的最后一行收到了相同的错误消息，这个解决方案没有帮助。@user3432234，只需使用
getElementById（）
即可：
document.getElementById（'#save'）.addEventListener（…）@user3432234，首先我假设您对第二个错误也使用相同的方法。其次，在html文件中，在创建按钮（id=save）后尝试移动
。这是当前的最后一行：“document.getElementById（'#save'）。addEventListener（'单击'，保存选项）；”。这是对的还是我误解了你？此外，我按照建议将移动到html文件中前面的最后一行。
document.getElementById（'#save'）。addEventListener（'click'，function（）{save_options（）；}，false）