Chrome扩展程序 - 记住用户输入JavaScript

时间:2017-04-27 00:39:38

标签: javascript html css google-chrome-extension

我正在尝试制作一个Chrome扩展程序,允许用户输入一系列核苷酸并将该序列转换为相应的氨基酸序列。理想情况下,我可以点击浏览器中的扩展图标,然后会弹出一个文本框,我可以将序列粘贴到其中。点击“翻译”后,氨基酸序列将出现在输入文本框下方。我希望稍后再添加更多功能,但这是扩展的基础。

我还是HTML新手,我是CSS和JavaScript的新手,我之前从未创建过Chrome扩展程序,所以我在将想法变成工作代码方面遇到了一些麻烦。

这是我到目前为止的HTML:

<!doctype html>
<html>


<form action="/popup.js">
    <p>
        <label for="input"><b>Nucleotide Sequence:</b><br></label>
        <textarea id="nucleotide_seq" name="nucleotide_seq" rows="6" cols="35"></textarea>
    </p>
    <input type="submit" value="Translate">
</form>


</html>

我现在面临的最大问题是如何使其成为当你点击“翻译”时,用户输入被发送到JavaScript文件并保存为代码然后迭代的变量,并转换为一串氨基酸,它会在原始输入文本框下面打印成一个字符串。

任何帮助表示赞赏!

2 个答案:

答案 0 :(得分:1)

请检查一下 https://jsfiddle.net/fNPvf/39583/

function translateInput(){
var nucle=document.getElementById("nucleotide_seq").value;
//translate nucle 
document.getElementById("nucleotide_seq").value = "amino acid";
}

如果需要,您也可以使用本地存储。请查看以下链接

https://jsfiddle.net/fNPvf/39584/

function translateInput(){
localStorage.nucle = document.getElementById("nucleotide_seq").value;
//translate nucle 
document.getElementById("nucleotide_seq").value ="converted "+localStorage.nucle;
}

更新了小提琴。请检查一下 https://jsfiddle.net/fNPvf/39630/

function translateInput(){
localStorage.nucle = document.getElementById("nucleotide_seq").value;
//translate nucle 
document.getElementById("nucleotide_seq").value =localStorage.nucle;
document.getElementById("amino_acid_seq").value ="converted "+localStorage.nucle;
}

答案 1 :(得分:0)

我知道这是一篇过时的文章,但是比起使用chrome存储库的当前答案,还有一种更好的方法。 Here's a link。使用非常简单,您只需在storage文件中添加权限manifest.json

链接应该过期,这是一个示例(请注意,该链接在浏览器中将不起作用。只能在Chrome扩展程序中使用):

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
  save_options);
<!-- THIS WILL NOT WORK IN THE BROWSER!! -->
<!DOCTYPE html>
<html>

<head>
  <title>My Test Extension Options</title>
</head>

<body>

  Favorite color:
  <select id="color">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="yellow">yellow</option>
  </select>

  <label>
  <input type="checkbox" id="like">
  I like colors.
</label>

  <div id="status"></div>
  <button id="save">Save</button>

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

</html>