-3

I am trying to create a Chrome extension that looks like the image below.

I want to save the Name and Id when clicking "+" button and I want to load all saved data int the onLoad event as seen in the upper section of image. I would also like to delete a particular row of data when clicking corresponding delete button.

Saved data should persist when closing Chrome.

document.body.onload = function() {
  chrome.storage.sync.get(["id","name"], function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      document.getElementById("lsid").innerText = items.id;
      document.getElementById("lsname").innerText = items.name;
    }
  });
}

document.getElementById("set").onclick = function() {
  var d = document.getElementById("name").value;
   var x = document.getElementById("id").value;
   d=String(d);
  chrome.storage.sync.set({"name":d,"id" : x}, function() {
    if (chrome.runtime.error) {
      console.log("Runtime error.");
    }
  });
  window.close();
}

Image

newBornDeveloper
  • 1
  • 3
  • 1
    You want to create a Chrome? What? – codaamok Dec 08 '16 at 15:08
  • You want to create a chrome extension that does the following in your extension popup? Or are you trying to write a web page? –  Dec 08 '16 at 15:19
  • @kadaj exactly. i want to create chrome extension, – newBornDeveloper Dec 08 '16 at 15:46
  • There are either too many possible answers, or good answers would be too long for this format. Please [edit] the question to add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs. – Makyen Dec 08 '16 at 15:50
  • @Makyen Can you please name the possible solutions. – newBornDeveloper Dec 08 '16 at 15:53
  • @newBornDeveloper: A) Write code. B) Write code. C) Write code. While you *may* have been intending to ask a specific question, as this "Question" is written, it is just a statement of your desires without any actual question. Effectively, it is a request for us to write code for you to a specification that is marginally sufficiently detailed to do so. Even if it is sufficiently detailed to be able to write something, Stack Overflow is not a code writing service. See: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), [ask], and "**How to create a [mcve]**". – Makyen Dec 08 '16 at 16:08
  • @newBornDeveloper: You *might* have wanted to just provide background information to a question like "In a Chrome extension, how do I store data which will persist across closing and opening Chrome? Here is some background as to what I am doing, in case that matters:...". But, that is not how this question ended up being written. Note that if this Question was written that way, it would *probably* end up being closed as a duplicate (i.e. if that is your actual question, then you should probably search a bit more prior to posting a question and describe why what you find does not work for you). – Makyen Dec 08 '16 at 16:20
  • @Makyen Please see the code that i have tried. i think you get what i think – newBornDeveloper Dec 08 '16 at 16:32
  • @newBornDeveloper: Adding that code *significantly* improves the question by limiting the scope. It changes the question from just a request for code to something closer to asking us to debug your current code, which is a good thing. However, we still need more information to know what the problem is. My next comment will provide a general list of what is needed for a debugging question, which, for this question, is basically more code to provide context (i.e. we currently have to *assume* that this is in a popup or options page), and a statement as to what *exactly* is not working. – Makyen Dec 08 '16 at 16:43
  • Please [edit] the question to be on-topic: include a **complete** [mcve] that *duplicates the problem*. Including a *manifest.json*, some of the background/content/popup scripts/HTML. Questions seeking debugging help ("**why isn't this code working?**") must include: ►the desired behavior, ►a specific problem or error *and* ►the shortest code necessary to reproduce it **in the question itself**. Questions without a clear problem statement are not useful to other readers. See: "**How to create a [mcve]**", [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Dec 08 '16 at 16:43
  • The reason that a [mcve] is required is that *we want to help*. It is **much** easier to help if we don't have to recreate any of the code needed to duplicate the problem. This is code that you already have. So, please help us to help you and provide a *complete* [mcve] that duplicates the problem with such questions. Without a [mcve] the amount of effort required to even begin to help you is **much** higher which *significantly* reduces the number of people willing/able to help you. Even if we put out the extra effort, we have to *guess* at significant portions of what your problem might be. – Makyen Dec 08 '16 at 16:43
  • @Makyen is there any option in chrome just like database. or can i add to dynamic array(not temporary) each time i click plus button. then i can easily iterate load data `onLoad` . I cannot reduce the question to minimal. i think reading question itself clears what i want. – newBornDeveloper Dec 08 '16 at 16:55

1 Answers1

0
document.body.onload = function Load() {
    for(var i=0;i<localStorage.length;i++){
        var row = document.createElement("TR"); 
        var col1 = document.createElement("TD"); 
        var col2 = document.createElement("TD"); 
        var col3 = document.createElement("TD"); 
        var del = document.createElement("BUTTON"); 
        var id=localStorage.key(i);
        col1.innerHTML=localStorage.getItem(id);
        col2.innerHTML=id;
        del.innerHTML="delete";
        del.id=id;
        del.className ="delete";
        col3.appendChild(del);
        row.appendChild(col1);
        row.appendChild(col2);
        document.getElementById("list_table").appendChild(row); 
    }
}

document.form_save.onsubmit = function() {
    var newName = document.form_save.name.value;
    var newId = document.form_save.id.value;
    window.localStorage.setItem(newId, newName);
    location.reload();
}

document.getElementById("list_table").onclick=function(e){
    if(e.target.className=="delete"){
        var result = confirm("Want to delete?");
        if (result) {
            window.localStorage.removeItem(e.target.id);
            location.reload();
        }
    }
}
newBornDeveloper
  • 1
  • 3
  • Is this intended to *Answer* the Question, or as additional information *for* the Question. If it is an Answer, then this is where it belongs. If it is additional information for the Question, then place [edit it into the Question](http://stackoverflow.com/posts/41042622/edit). If it is additional information for the Question, it would be helpful to also have your HTML and a *manifest.json*. – Makyen Dec 12 '16 at 05:36