Chrome Extension Development Tutorials, Guides & Insights

document.getElementById("start").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "start" }, (response) => {
    if (chrome.runtime.lastError) {
      console.error("[popup.js] Error:", chrome.runtime.lastError.message);
      document.getElementById("status").innerText = "Error: Could not connect to background script.";
      return;
    }
    console.log("[popup.js] Response:", response);
    document.getElementById("status").innerText = `Status: ${response.status}`;
  });
});

document.getElementById("stop").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "stop" }, (response) => {
    if (chrome.runtime.lastError) {
      console.error("[popup.js] Error:", chrome.runtime.lastError.message);
      document.getElementById("status").innerText = "Error: Could not connect to background script.";
      return;
    }
    console.log("[popup.js] Response:", response);
    document.getElementById("status").innerText = `Status: ${response.status}`;
  });
});

If everything is set up correctly, you should see your extension in the list with its name and icon.

To test your extension:

• Use chrome://extensions/ to inspect your extension and check for any errors.
• Use Chrome DevTools to debug your extension's popup and content scripts.