1

I'm working on a chrome extension and I'm trying to detect the input value in the popup.js file like this:

// popup.js

// Set up a listener for when the popup is opened
document.addEventListener("DOMContentLoaded", function () {
  // Get a reference to the input field
  var inputField = document.getElementById("input-field");
  // Set up a listener for when the user types in the input field
  // send a message to the background script to check if it's working
  chrome.runtime.sendMessage({
    type: "getSuggestion",
    prompt: inputField.value,
  });

  inputField.addEventListener("input", function () {
    // Send a message to the content script to get a suggestion
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      console.log("inputField.value: ", inputField.value);
      chrome.tabs.sendMessage(
        tabs[0].id,
        {
          type: "getSuggestion",
          prompt: inputField.value,
        },
        function (response) {
          console.log("response: ", response);
        }
      );
    });
  });
});

and I'm trying to send it to the background.js just to console log it for the moment like this:


// Set up a listener for messages from the content script
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.type === "getSuggestion") {
    console.log("request.prompt: ", request);
    return request.prompt;
});

And this is the content.js script:

// Listen for messages from the background script
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // Get the suggested text from the message
  const suggestion = request.textSuggestion;

  // Modify the DOM to display the suggested text to the user
  const suggestionEl = document.createElement("div");
  suggestionEl.innerHTML = suggestion;
  suggestionEl.style.position = "absolute";
  suggestionEl.style.top = "0";
  suggestionEl.style.left = "0";
  suggestionEl.style.backgroundColor = "white";
  suggestionEl.style.padding = "10px";
  suggestionEl.style.zIndex = "9999";
  suggestionEl.style.fontSize = "16px";
  document.body.appendChild(suggestionEl);

But I'm getting this error: popup.html:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

here is the popup.html file just in case:

<!-- popup.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>WordCompleter</title>
    <link rel="stylesheet" type="text/css" href="popup.css" />
  </head>
  <body>
    <div id="input-container">
      <input type="text" id="input-field" />
    </div>
    <div id="suggestion-container">
      <p id="suggestion-field"></p>
    </div>
    <script src="popup.js"></script>
  </body>
</html>
Ala Ben Aicha
  • 1,155
  • 2
  • 14
  • 30
  • The error is caused by the second sendMessage to the tab because there's no content script. See [Chrome extension content script re-injection after upgrade or install](https://stackoverflow.com/q/10994324) or simply switch to executeScript instead of sendMessage. – wOxxOm Dec 24 '22 at 15:56
  • I don't think I understand. You say two conflicting things in your post: 1 is to send to background.js which you would have working with ```chrome.runtime.sendMessage``` but the other, commented in your code, is to send it to a content script - which would be working IF you have the content script available in the active tab. Do you have a content script in the active tab? I don't see any code for a content script shared in your post. – Jridyard Dec 24 '22 at 19:06
  • @Jridyard Yes I have a content script, I added it to the question. Thanks for your notice. – Ala Ben Aicha Dec 25 '22 at 18:38

0 Answers0