0

I've got an issue with local storage on a Chrome Extension that may drive me to drink tonight. Help me make this a drink of celebration, rather than one of frustration.

I've got a chrome extension I've programmed that has an Options menu where a technician can enter their name (first initial, last name). Then, when the extension has a button clicked to auto-fill a template using provided information, it pulls the stored data as well as all other parts, and fills out the template.

Problem is, it works randomly and I can't figure out why. I'll have it work out of nowhere, then will close everything out and reopen it to see if I it's working so I can package it and deploy it to the other techs...and then back to undefined. The options page DOES seem to store this information properly and returns the exact value every time, but using the injector script fails almost every time, and when it does work, I honestly couldn't say why.

Here's what I have right now. Pardon the probably gross code. Only recently started working on this stuff.

OPTIONS.HTML

<!DOCTYPE html>
<html>
<head><title>Options</title></head>
<body>
<H1>Call Log Supertool</h1>
</br>
<H3>Technician Name (First Initial, Last Name)</h3>
  <input type="text" id="TechName">
<div id="status"></div>
</br>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>

OPTIONS.JS

    function save_options() {
  var TechName = document.getElementById('TechName').value;
  chrome.storage.local.set({
    TechName: TechName,
  }, function() {
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}


function restore_options() {
  chrome.storage.local.get({
    TechName: 'F.LastName',
  }, function(items) {
    document.getElementById('TechName').value = items.TechName;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

INJECTOR.JS

var Textbox = document.getElementById('callnotes');
var AddedNotes = callnotes.value + "Test";
var today = new Date();
var date = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
var html = document.getElementsByTagName('html')[0];
var text = html.innerHTML;
var TSExtract = text.match(/<strong>TS-....../g);
var TechName;

chrome.storage.local.get(
function(items) {
    var TechName = items.TechName;
  });

if (TSExtract !== null)
    {
var string = TSExtract.toString();
var TSFinal = string.match(/TS-....../g);
}

if (TSExtract==null)
{
document.getElementById("callnotes").value = callnotes.value + "\n \nTS Date: \nLegal Complaint Yes/No: \nComplaint History Review: " + date + " " + TechName + ": A search was conducted and no additional complaints of this nature were found for this patient. \nClinical Study Yes/No:  \nWho told SJM: \nIf shipping/requesting product what is being requested: \nAny other rep/contact names to be added to the record: \nIf product is not returning, document why:"
} else {

document.getElementById("callnotes").value = callnotes.value + "\n \nTS Date:\nLegal Complaint Yes/No: \nComplaint History Review: " + date + " " + TechName + ": A search of the complaint database was performed. Records related to this patient: " + TSFinal + "\nClinical Study Yes/No: \nWho told SJM: \nIf shipping/requesting product what is being requested: \nAny other rep/contact names to be added to the record: \nIf product is not returning, document why:"

}

EDIT: Not sure how this was an exact duplicate, while the end result required the same, I was somehow at times getting the proper variable response that I needed, and it was based on pulling from local storage. While in most cases you can just do a var foo = document.get command, specifically chrome.storage.local.get() doesn't seem to work as such. The linked duplicate deals solely with pulling a variable in general, where this directly affects pulling variables from local storage. Again, same end result, but I don't think it was exactly the same question...

  • 1
    1. `var TechName = items.TechName` creates a **local** variable inside function so it can't be used outside 2. chrome API is asynchronous which means the callback runs **after** the current context completes so you need to put all dependent code inside the callback of chrome.storage.local.get, see [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](//stackoverflow.com/q/23667086) – wOxxOm Oct 10 '17 at 20:55
  • Holy shit that did it. I had no idea why it would sometimes pull and sometimes wouldn't. I even had alerts right after that were showing the right thing, but then the templates returned undefined. Putting it all in the function worked like a charm. Drinks in celebration it is! – thephoenix112 Oct 10 '17 at 21:00
  • [Don't use a RegExp to parse HTML](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454). You've got a perfectly good DOM, which already has it parsed. Get the data you need from the DOM, not the HTML. – Makyen Oct 11 '17 at 03:23

0 Answers0