Chrome扩展程序 - 记住用户输入JavaScript
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Chrome扩展程序 - 记住用户输入JavaScript相关的知识,希望对你有一定的参考价值。
我正在尝试制作一个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文件并保存为代码然后迭代的变量,并转换为氨基字符串酸,它会在原始输入文本框下面打印成一个字符串。
任何帮助表示赞赏!
请检查这个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;
}
我知道这是一个老帖子,但是有一个比使用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>
以上是关于Chrome扩展程序 - 记住用户输入JavaScript的主要内容,如果未能解决你的问题,请参考以下文章
如何告诉 Chrome 记住哪些输入字段/哪些将是登录凭据?
chrome无法从该网站添加应用扩展程序和用户脚本的有效解决方法!
来自 Chrome 扩展的 Outlook 日历输入字段 DOM 操作