Question

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

由于我是编程JavaScript的新手，我从http://developer.chrome.com/extensions/options获取了示例代码并尝试自定义它。这是我到目前为止，它在jsfiddle中工作（这意味着在重新加载页面时保存所选择的单选按钮）：http://jsfiddle.net/yczA8/

我很高兴看到它正常运作。但在创建并加载Chrome扩展程序后，它已不再有效。同时在Chrome浏览器中打开html文件并不会像在jsfiddle中那样显示相同的行为。为什么不？问题出在哪里？

这是我的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>

这是 popup.js ：

// 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.json ：

{
    "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"}
}

Answer 1

您的问题是，在JSFiddle中，您正在运行 JS-code onLoad ，而在您的文件中，您正在标题中运行 JS代码。

如果你在JSFiddle中更改它，它就不再像你在这里看到的那样工作：JSFiddle.

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

有不同的方法，我建议加载你的JS代码，就像JSFiddle一样。为此，请添加onload event to your body tag。你调用一个名为'loadMyScript（）;的函数或类似的东西：

<body onload="loadMyScript();">

对于下一步，您可以选择：您可以将整个代码放在loadMyScript（）函数中，也可以使用loadMyScript（）函数导入脚本。我没有测试那些方法，所以我不能告诉你哪一个更好或哪一个更简单但你应该首先尝试import-script-way，因为我认为这可以避免问题。

import-script-way的小例子：

<head> <script> function loadMyScript() { var js = document.createElement("script"); js.type = "text/javascript"; js.src = "popup.js"; document.body.appendChild(js); } </script>  </head> <body onload="loadMyScript();">  </body>

请告诉我，如果这是在解决您的问题或不在评论中，如果您真的需要对此进行投票，请至少留下您的理由评论，这样我就可以改善自己和答案。< / em>的

Answer 2

尝试这样做：

document.addEventListener("DOMContentLoaded", function() {
    restore_options();
    }, false);

我做了以下更改：

我删除了method="post" 我在所有其他脚本之后移动了<script src="popup.js"></script> 我更改了addEventListener()方法的参数

这里是更改的文件

<强> 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>

<强> popup.js

// 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',function() {restore_options();}, false);
button_thing = document.querySelector('#save').addEventListener('click',function() {save_options();}, false);

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

2 个答案: