从localStorage获取价值以在popup.html中使用

Question

I'm creating my first chrome extension and have gotten to a stage I can't seem to figure out. 我正在创建我的第一个chrome扩展程序，现在已经到了我似乎无法弄清的阶段。

Basically I can get my option to save, but I don't know how to retrieve the value to use it in popup.html 基本上，我可以选择保存，但是我不知道如何在popup.html中检索值以使用它

Here's my code: 这是我的代码：

manifest.json 的manifest.json

{
"manifest_version": 2,
"name": "My Extension",
"options_page": "options.html",

"permissions": [
      "storage"
    ],

"description": "My Extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
   }
}

options.js options.js

// Save options to localStorage.
function save_options()
{
  localStorage["url"] = document.getElementById("url").value;

  // Let the user know the options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Saved OK";
  setTimeout( function() { status.innerHTML = ""; }, 5000 );
}

// Populate options from from localStorage.
function load_options()
{
  var url = localStorage["url"];
  if (url == null) { url = ""; }
  document.getElementById("url").value = url;
}

// call load_options top populate the GUI when the DOM has loaded
document.addEventListener('DOMContentLoaded', load_options);

// call save_options when the user clicks the save button
document.getElementById("save").addEventListener('click', save_options);

options.html options.html

<html>
<head>
<head><title>My Options</title></head>
<body>
    <div class="container">

        <label for="url">
            <p>My URL</p>
            <input type="text" id="url" />
            <button id="save">Save</button>
        </label>

    </div>

    <div id="status"></div>

</body>
<script src="options.js"></script>
</html>

popup.html popup.html

<html>
<head>
</head>
<body>
<iframe src="myURL" id="myURL" name="myURL" width="200" height="200"></iframe>
</body>
</html>

This works fine, and in options you can save anything you put into the url field. 这可以正常工作，在选项中，您可以保存您放入url字段中的所有内容。 Now I want to get that saved value and make it be the src (myURL) for the iframe in popup.html 现在，我想获取该保存的值，并使其成为popup.html中iframe的src（myURL）

Example: So in options if you entered and saved http://www.google.com then in the popup.html the iframe would be: 示例：因此，在选项中，如果您输入并保存了http://www.google.com，则在popup.html中，iframe为：

<iframe src="http://www.google.com" id="myURL" name="myURL" width="200" height="200"></iframe>

Any help is appreciated. 任何帮助表示赞赏。

Answer 1

Basic question, but there you go. 基本问题，可是您去了。

Obviously, to do this you need JavaScript code. 显然，要执行此操作，您需要JavaScript代码。 Chrome's Content Security Policy forbids inline code, so the code must go into a separate .js file (say, popup.js ) and included in the HTML: Chrome的内容安全政策禁止使用内联代码，因此该代码必须放入单独的.js文件（例如popup.js ）中，并包含在HTML中：
```
 <html> <head> <script src="popup.js"> </head> <body> <iframe id="myURL" name="myURL" width="200" height="200"></iframe> </body> </html> 
```
The code should: 该代码应：
a. 一种。 Read the value from localStroage 从localStroage读取值
b. 湾 Find the element on the page 在页面上找到元素
c. C。 Assign its src property. 分配其src属性。
```
 // Read the value var url = localStorage.url; // or = localStorage["url"]; // or = localStorage.get("url"); // Find the element var element = document.getElementById("myUrl"); // Assign the property element.src = url; // or .setAttribute("src", url); 
```
Of course, all of this can be compressed in a single line of code by removing the temp variables url and element (see below). 当然，通过删除临时变量url和element （请参见下文），可以将所有这些压缩为一行代码。
There is a problem with this, however. 但是，这有一个问题。 The code will execute when the <script> element is read - before the #myURL element is read. 读取<script>元素时将执行代码-在读取#myURL元素之前。 Therefore, it will fail, as element will not be found and will be undefined. 因此，它将失败，因为将找不到element并且该element将是未定义的。
There are two ways to fix it: 有两种解决方法：
a. 一种。 Move the <script> tag below the element it refers to, like you did in options.html 将<script>标记移动到它所引用的元素下方，就像在options.html所做的那样
b. 湾 Wrap your code in a listener for an event that page is fully parsed and ready for it. 将代码包装在侦听器中，以了解页面已完全解析并准备就绪的事件。 I prefer this solution. 我更喜欢这种解决方案。
```
 document.addEventListener("DOMContentLoaded", function() { document.getElementById("myUrl").src = localStorage.url; }); 
```

Further reading: 进一步阅读：

DOMContentLoaded event DOMContentLoaded事件
HTML Storage HTML 存储
An alternative: chrome.storage API . 替代方法： chrome.storage API 。

Answer 2

To get the local storage value you can do 要获取本地存储值，您可以执行以下操作

savedURL = localStorage.get('url') ;

and then in jQuery it is like this 然后在jQuery中是这样的

$('#myURL').attr('src',savedURL)

从localStorage获取价值以在popup.html中使用

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-01-27 09:48:32

解决方案2
0 2015-01-27 08:31:46

从localStorage获取价值以在popup.html中使用

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-27 09:48:32

解决方案2 0 2015-01-27 08:31:46

解决方案1
1 已采纳 2015-01-27 09:48:32

解决方案2
0 2015-01-27 08:31:46