Question

我写了一个简单的html页面，其中包含一个输入和三个链接。

“确定” - ＆gt;将存档中的任何内容存储到本地存储

“WhoamI” - ＆gt;使用保存到本地存储的值

的警报

“检查” - ＆gt;如果该值为“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>

这里是javascript 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");
    }
}

enter image description here

但是，当我导入与谷歌浏览器扩展程序完全相同的代码时，一切都会停止工作。

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

我假设这是问题所在： Issue Screen shot

我在整个this阅读，但我无法理解。

任何帮助将不胜感激

由于

Answer 1

您似乎并不完全理解您提到的link :)，引用链接中有一个inline script section，其中显示inline script will not be executed.

对index.html所做的更改

1）删除

的所有 INLINE 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进行的更改

1）点击此处显示的<a/>标签，为所有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;
}

对manifest.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"
  }
}

最终输出

enter image description here

Chrome扩展本地存储无法正常工作

1 个答案: