Chrome extension that searches for text in a page then changes the message on the popup as a result-CodePudding

I've been working on a project where my goal is to have a chrome extension that looks for words on a page, then displays a popup with a message that depends on whether it finds that word (or words). I'm not very experienced in JavaScript HTML, but I've been trying my best. At the moment, the extension does have a pop-up, but it doesn't change the text of the pop-up. I can't tell if it's an issue with it searching the page or taking the results of the search and updating (or both). I'm working in manifest v3.

My manifest looks like this

{
    "manifest_version": 3,
    "name": "Chrome Extension",
    "version": "1.0",
    "action": {
      "default_popup": "popup.html"
    },
    "description": "searches for keywords to provide product safety information",
    "content_scripts":[{
      "matches":["*://*.facebook.com/*"],
      "js":["search.js","popup.js"]
    }]
}

This is the html.

<html>
  <head>
    <title>Baby Safety Extension</title>
  </head>
  <body>
    <h1>Baby Safety Extension</h1>
    <p id="product">We could not determine the type of product.</p>
    <script src="popup.js">whichproduct();</script>
  </body>
</html>

Here's what I've tried to create to search the page (search.js). I would definitely not be surprised if this was wrong, but it's what I had put together based on the chrome examples

//creates a variable that selects the body of the page
const body = document.querySelector("body");
//if a body exists, checks to see if certain elements exist in the body, sets their corresponding variables to true if they do
if (body) {
    var text = body.textContent;
    var bouncer = text.includes("bouncer" || "Bouncer");
}

And this is my whichproduct function in popup.js

function whichproduct(){
    if (bouncer === true){
        document.getElementById("product")=("You're looking at a bouncer. Here's some tips for using a bouncer safely");
      }
}

Does anyone have tips about where my code is going wrong or where I could find additional documentation about some of these functions? Thanks so much for reading!

CodePudding user response：

Your extension is half wrong. I have fixed it.

manifest.json
Note: <all_urls> should be changed to suit your purposes.

{
  "name": "hoge",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<html>

<head>
  <title>Baby Safety Extension</title>
</head>

<body>
  <h1>Baby Safety Extension</h1>
  <p id="product">We could not determine the type of product.</p>
  <script src="popup.js"></script>
</body>

</html>

popup.js

const search = () => {
  const text = document.body.textContent;
  const bouncer = text.includes("bouncer" || "Bouncer");

  return bouncer;
}

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id },
    func: search
  }, (result) => {
    if (result[0].result) {
      const whichproduct = "You're looking at a bouncer. Here's some tips for using a bouncer safely";
      document.getElementById("product").innerText = whichproduct;
    }
  });
});

CodePudding user response：

You should be using document.getElementById("product").innerHTML = ... instead of document.getElementById("product") = ....

At least this is what I believe you are doing wrong.