Question

我过去曾创造过一个tic tac toe游戏。使用html进行布局，当点击tic tac toe中的一个方块时，它会在单独的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();
    }
}

游戏开始功能就是调用其他运行游戏的功能。

Answer 1

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

另外，您是否可以打开popup.html的开发者工具，看看控制台中是否还有其他错误消息？

Answer 2

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

编辑：

首先从HTML中删除onclick属性。 ~~你是否使用id's进行任何操作？如果您使用它们来保存特定于每个按钮的某些数据值，那么最好使用实际数据属性：~~

<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（）”）。我认为应该这样做。

创建Chrome扩展程序时，如何将javascript页面链接到popup.html页面？

2 个答案: