Question

我正在尝试构建一个简单的chrome New Tab扩展，其中扩展通过文本字段从用户获取输入然后显示它。

我的app.js有以下代码：

document.onkeydown = function(e) {
    if (e.keyCode == 13) {
        if ($('#spark').value !== null) {
            //  console.log("Hello")
            var string = $('#spark').val();
            // console.log(string);
            chrome.storage.sync.set({"myKey": string});
            $('#spark').hide();
            chrome.storage.sync.get("myKey", function(string) {
                $('#text').append(string.myKey);
            });

        }

    }
});

HTML页面有一个div'spark'，它是输入表单和div'text'，其中显示'spark'中输入的文本，如下所示：

<html>
 <head>
  <title>Blank New Tab</title>
  <script src="app.js"></script>
  <script src="jquery.min.js"></script>
  <style>
   div {
   color: #cccccc;
   vertical-align: 50%;
   text-align: center;
   font-family: sans-serif;
   font-size: 300%;
   }
  </style>
 </head>
 <body>
  <div style="height:40%" id='body'>
   <div id="text"> </div>
  </div>
  <div>
   <form>
     <input type="text" name="spark" id="spark">
   </form>
  </div>
 </body>
</html>

当我运行此扩展程序时，文本显示一毫秒，然后通过输入返回到原始页面。这是一个gif：http://imgur.com/XySGg4X

如何在新标签页上保留文字？一旦用户键入消息并按Enter键，输入表单应该被隐藏，页面应该显示用户输入的文本。

如何在新标签中保留HTML（DOM）更改 - Chrome扩展程序？

0 个答案: