CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome-extension
happy
happy

Reputation: 61

Chrome Extension - Remembering user input JavaScript

I'm trying to make a Chrome Extension that allows a user to input a sequence of nucleotides and convert that sequence into the corresponding amino acid sequence. Ideally I could click on the extension icon in the browser, then a text box would pop up that I could paste the sequence into. After hitting "Translate" the amino acid sequence would appear below the input text box. I'm hoping to add more functionality to this later but this is the basis for the extension.

I'm still new to HTML and I'm very new to CSS and JavaScript, and I've also never created a Chrome Extension before so I'm having a little trouble turning my ideas into working code.

Here's the HTML I have so far:

<!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>

The biggest question I have right now is how to make it so that when you hit "Translate", the user input is sent to the JavaScript file and saved as a variable that the code would then iterate over, and convert to a string of amino acids, which it would print out as a string underneath the original input text box.

Any help is appreciated!

Upvotes: 0

Views: 1209

Answers (2)

alistair
alistair

Reputation: 575

I know this is an old post, but there is a much better way of doing this than the current answer using the chrome storage. Here's a link. Usage is fairly easy, you just have to add the permission storage in the manifest.json file.

Should the link expire, here's an example (note, this will not work in a browser. It wil only work in a chrome extension):

// 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>

Upvotes: 0

Geethu Nimesh
Geethu Nimesh

Reputation: 60

Please check this https://jsfiddle.net/fNPvf/39583/

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

You can use local storage also,if you want. Please check below link

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

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

Updated fiddle. Please check this 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;
}

Upvotes: 1

Related Questions