過去に三目並べゲームを作成しました。レイアウトは html を使用して作成され、三目並べの四角形の 1 つがクリックされると、別の 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 と呼ばれる) を読み込めない理由を理解する必要がありますか? また、私を混乱させることの 1 つは、HTML ページを chrome 拡張機能として実行すると、CSS シート (game.css) をロードできることです。
編集(関数 gamestart):
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 は、ゲームを実行する他の関数を呼び出すためのものです。