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

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

我还是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文件并保存为变量，然后代码将迭代，并将其转换为一串氨基酸，然后将其作为原始输入文本框下方的字符串打印出来。

任何帮助表示赞赏！

来源

2017-04-27 Happy

我希望我有一个更容易的答案。阅读[消息在这里]（https://developer.chrome.com/extensions/messaging）并研究[示例在这里]（https://chromium.googlesource.com/chromium/src/+/master/chrome/common /扩展/文档/实例）。另见[这个问题]（http://stackoverflow.com/questions/13546778/how-to-communicate-between-popup-js-and-background-js-in-chrome-extension）祝你好运！ – Somrlik

请检查该 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; 
}

来源

2017-04-27 06:56:14

非常感谢！这似乎与我所寻找的非常接近。你知道我怎样才能让返回的氨基酸序列出现在文本框的下方，而不是它的内部？理想情况下，核苷酸序列将保留在文本框内，因此用户可以同时看到它们的原始输入序列和输出序列。 – Happy

很高兴在这里对你有用。我编辑了小提琴将翻译后的数据显示到另一个文本框。 –

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

回答

相关问题