Question

我正在尝试创建一个基本的chrome扩展程序，以保存我要跟踪的重要网站的评论。

但是，由于某些原因，控制台日志无法使用，甚至在扩展程序的控制台日志中也无法使用（如here所示）

下面是我的popup.js和popup.html文件。

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>

这是它的外观，扩展控制台上没有任何内容。另外，我包含脚本的方式是否正确？

Answer 1

尝试将具有 preventDefault 和 stopPropagation 的事件添加到您的 submitHandler 函数：

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

因为按钮类型提交只会在默认情况下重新加载页面，以便清除控制台。希望有帮助。

无法使console.log（）在popup.js中工作

1 个答案: