0

我过去创建了一个井字游戏。布局是使用 html 制作的，当点击井字游戏中的一个方块时，它会调用一个单独的 javascript 表单中的函数来运行游戏。它工作得很好，所以我决定尝试让这个游戏成为一个 chrome 扩展。但是，当我加载扩展程序时，布局显示正常，但是当单击方块时，它们不会启动游戏。我认为该页面未正确加载 javascript 页面。这是 popup.html 的代码：

      html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<link href="game.css" rel="stylesheet" type="text/css" />

</head>

<body>
<center><u><h1>Single Player Mode</h1></u>

    <table>
        <tr>
            <td>
                <button class="highlight" id="0"></button>
            </td>
            <td>
                <button class="highlight" id="1"></button>
            </td>
            <td>
                <button class="highlight" id="2"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="highlight" id="3"></button>
            </td>
            <td>
                <button class="highlight" id="4"></button>
            </td>
            <td>
                <button class="highlight" id="5"></button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="highlight" id="6"></button>
            </td>
            <td>
                <button class="highlight" id="7"></button>
            </td>
            <td>
                <button class="highlight" id="8"></button>
            </td>
        </tr>
    </table>
</center>

<script type="text/javascript" src="singleplayer.js"></script>
</body>

</html>

javascript 页面是独立的，但运行良好，并且与 html 页面和 manifest.json 位于同一文件夹中。我只需要弄清楚为什么这个页面无法在 chrome 扩展中加载 javascript 工作表（称为 singleplayer.js），即使它在浏览器中运行时工作正常？还有一件事让我感到困惑的是，当我将它作为 chrome 扩展运行时，html 页面能够加载 CSS 表（game.css），那么为什么它可以加载 css 而不是 html？

编辑（功能游戏开始）：

var tally=0;


function gamestart(id){
        console.log(id);

    tally=tally+2

    if(tally%1==0){
    document.getElementById(id).innerHTML = "X";
    checkX("X");
    stopbutton("X");    
    setTimeout('player2()',500);
    checktie();
    }
}

函数 gamestart 只是用来调用运行游戏的其他函数。

4

2 回答 2

1

我最近刚刚完成了将我的一个扩展从清单版本 1 更新到版本 2 的过程，这样做我遇到了同样的问题。问题是内联事件处理程序与Content Security Policy冲突。我能够从我的 HTML 中删除它们，然后将它们附加到脚本本身中。不过，您可能需要修改一些标记。您的按钮上的 id 值无效（id 必须以字母开头）。一旦你解决了这个问题，使用 document.getElementById 来获取元素并附加点击处理程序应该是小菜一碟。

编辑：

首先从 HTML 中删除 onclick 属性。你用身份证做任何事吗？如果您使用它们来保存特定于每个按钮的一些数据值，则最好使用真实的数据属性：

<button style="background-color:lightblue; color: black" data-val="0"></button>


<button class="highlight"></button>

您的 gamestart 函数仅使用 id 来查找被单击的按钮。但是不需要搜索 DOM，因为这已经是在事件处理程序中单击的按钮，所以只需将其直接传递给 gamestart。

接下来，将您的脚本移出并放在底部，就在结束标记之前。这是最佳实践，此时您将可以访问 DOM 中的元素。

<script type="text/javascript" src="singleplayer.js"></script>
</body>

在您的脚本中，附加处理程序：

var buttons = document.getElementsByTagName('button'),
    i,
    n = buttons.length;

for (i = 0; i < n; i++) {
    buttons[i].onclick = function() {
        gamestart(this);
    };
}

并修改您的 gamestart 函数以获取元素而不是 id：

function gamestart(el){
    tally += 2;
    el.innerHTML = "X";
    checkX("X");
    stopbutton("X");    
    setTimeout(player2, 500);
    checktie();
}

另请注意，我更改了您的 setTimeout 调用。最好传递一个函数（在本例中为 player2），而不是一个必须被解释为函数的字符串（如“player2()”）。我认为这应该可以解决问题。

于 2013-07-19T14:16:00.173 回答
1

由于Content Security Policy的限制，HTML 中的内联事件处理程序是不允许的。有关更多信息以及如何更改它以符合 CSP，请参阅https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution 。

另外，您能否打开 popup.html 的开发人员工具并查看控制台中是否还有其他错误消息？

于 2013-07-19T00:48:12.070 回答