4

1つの入力と3つのリンクを持つ単純なhtmlページを作成しました。

「OK」->ファイル内のすべてのものをローカルストレージに保存します

「WhoamI」->ローカルストレージに保存された値のアラート

「チェック」->その値が「asd」の場合、「asd」で応答するか、「Asd」では応答しない

非常に単純で、これを通常のhtmlページとしてテストしましたが、機能します。すべての関数は正常に動作します。

これがindex.htmlです

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> System Information </title>
<script src="main.js"></script>
</head>
<body>
<input type="text" name="text" id="text">
<a href="#" onclick="saveChanges(); return false">OK</a>
<a href="#" onclick="who(); return false">WhoAmI</a>
<a href="#" onclick="check(); return false">check</a>

</body>
</html>

これがjavascriptmain.jsです

function saveChanges() {
  var theValue = text.value;

localStorage["ChromeLogin"] = theValue;
}
function who() {
    alert(localStorage["ChromeLogin"]);
}
function check(){
    var test = localStorage["ChromeLogin"];
    if (test == "asd"){
        alert("it is asd");
    }else{
        alert("It is NOT asd");
    }
}

ここに画像の説明を入力してください

ただし、Google Chrome拡張機能とまったく同じコードをインポートすると、すべてが機能しなくなります。

これが私のmanifest.jsonコードです。

{
  "name": "testLocalStorage",
  "version": "0.0.1",
  "description": "Capture a tab",
  "options_page": "index.html",

  "manifest_version": 2,

  "browser_action": {
  "default_title": "Capture tab"
  },
  "permissions" : ["tabs", "<all_urls>", "storage"]
}

私はこれが問題だと思っています： スクリーンショットを発行する

私はこれを読み通しましたが、理解できませんでした。

どんな助けでもありがたいです

ありがとう

4

1 に答える 1

3

参照したリンクを完全に理解していないようです:)、参照されたリンクにインラインスクリプトのセクションがあり、インラインスクリプトは実行されません。

index.htmlに加えられた変更

1）のすべてのインラインJSを削除しました

<a href="#" onclick="saveChanges(); return false">OK</a>

<a href="#" onclick="who(); return false">WhoAmI</a>

<a href="#" onclick="check(); return false">check</a>

に

<a href="#" id="ok">OK</a>

<a href="#" id="who">WhoAmI</a>

<a href="#" id="check">check</a>

IDを割り当てることによって

最終的なindex.html

<html>
<head>
<title> System Information </title>
<script src="main.js"></script>
</head>
<body>
<input type="text" name="text" id="text">
<a href="#" id="ok">OK</a>
<a href="#" id="who">WhoAmI</a>
<a href="#" id="check">check</a>

</body>
</html>

main.jsに加えられた変更

<a/>1）ここに示すように、タグをクリックすると3つの関数すべてにイベントハンドラーが追加されました

window.onload = function（）{

document.getElementById('ok').onclick = saveChanges;
document.getElementById('check').onclick = check;
document.getElementById('who').onclick = who;

}

最終的なmain.js

function saveChanges() {
  var theValue = text.value;

  localStorage["ChromeLogin"] = theValue;
}
function who() {
    alert(localStorage["ChromeLogin"]);
}
function check(){
    var test = localStorage["ChromeLogin"];
    if (test == "asd"){
        alert("it is asd");
    }else{
        alert("It is NOT asd");
    }
}
window.onload=function (){
    document.getElementById('ok').onclick=saveChanges;
    document.getElementById('check').onclick=check;
    document.getElementById('who').onclick=who;
}

マニフェスト.jsonに加えられた変更

1）の不要な権限セクションを削除しましたmanifest.json

最終的なmanifest.json

{
  "name": "testLocalStorage",
  "version": "0.0.1",
  "description": "Capture a tab",
  "options_page": "index.html",

  "manifest_version": 2,

  "browser_action": {
  "default_title": "Capture tab"
  }
}

最終出力

ここに画像の説明を入力してください

于 2012-12-01T05:16:19.523 に答える