Unable to get console.log() working in popup.js

Question

I am trying to create a basic chrome extension to save my comments for important websites I want to keep a track of.

But, for some reason console logs aren't working, not even in the extension's console log (as said here )

Attached below are my popup.js and popup.html files.

let urlElement = document.getElementById("url");
var currentURL;
let submitBtn = document.getElementById("submitBtn");
let allNotes = document.getElementById("all");

chrome.tabs.query({
  active: true,
  currentWindow: true
}, function(tabs) {
  currentURL = tabs[0].url;
  urlElement.innerText = currentURL;
})

function submitHandler() {
  let key = btoa(encodeURI(currentURL));
  let value = document.getElementById("box").value;
  if (value) {
    chrome.storage.sync.set({
      key: value
    }, function() {
      console.log('value logged');
    })
  }
}

function notesHandler() {
  chrome.tabs.create({
    url: 'notes.html'
  });
}

document.addEventListener('DOMContentLoaded', function() {
  submitBtn.addEventListener('click', submitHandler);
  allNotes.addEventListener('click', notesHandler);
});

<!DOCTYPE html>
<html lang="en">

<body>
  <p>Current URL:</p>
  <p id="url"></p>
  <form>
    <textarea id="box" rows="20" cols="35"></textarea>
    <input type="submit" value="NOTED!" id="submitBtn">
  </form>
  <button id="all">VIEW ALL NOTES</button>
  <script src="popup.js">
  </script>
</body>

</html>

Here is what it looks like, nothing appears on the extension console. Also, is my way of including scripts correct?

score 1 · Accepted Answer · answered Jan 27 '19 at 08:36

Try to add event with preventDefault and stopPropagation to your submitHandler function:

function submitHandler(event){
   event.stopPropagation();
   event.preventDefault();
   ...
}

because button type submit will just reload your page by default what in order will clear your console. Hope that helps.

Unable to get console.log() working in popup.js

1 Answers1