Chrome onUpdate and onMessage triggering when onMessage event listener shouldn't be

Question

I am making a chrome extension to autofill some forms on a state website and navigate until the submission page. What I am attempting to do is:

Have the extension run upon being clicked on. This calls a script where it enters something in the search bar and then it clicks on the search button. Now here is where my approach could be wrong but it is what I'm currently implementing and it half works.
That same script sends a message back to the extension that the search button has been clicked. Using the runtime.onMessage and tabs.onUpdated APIs I want to run another script that runs only if the webpage load resulted from the message received from the initial script. Currently I am testing it with an alert.

This executes without error but the alert that should only display from both the onMessage and onUpdated events being triggered but it is still being output on just manual navigation to any page. How could I go about having the second script only run from receiving the message of the button click and once the webpage is loaded?

The first script stars on "www.azdot.gov/home" but after the click button it goes to "wwww.azdot.gov/search" and I learned my script won't keep running on a new webpage. That is why I am attempting the onMessage and onUpdated approach.

I started working on this a week ago and it's my first time using javascript or making chrome extensions. This is also my first question here so I apologize for any mistakes I have made.

Below is my manifest:

{
    "name": "PVA WF1",
    "version": "0.1",
    "description": "Working extension but sendMessage portion not functional.",
    "manifest_version": 3,
    "author": "hobbledcobbled",
    "action": {
    //   "default_popup": "popup.html",
        "default_title": "PVA WF1"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "https://azdot.gov/home"
    ],
    "background": {
        "service_worker": "background.js"
    }
}

Below is my background.js code:

chrome.action.onClicked.addListener(async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['claimSubmitStart.js']
    });
});

try {
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        chrome.tabs.onUpdated.addListener(function (tabdId, changeInfo, tab) {
            if (changeInfo.status == 'complete' && message.action === 'clicked') { 
                chrome.scripting.executeScript({
                    target: { tabId: tab.id },
                    func: () => {
                        alert(document.title);
                    },
                });
            }
        });
    });
} catch (e) {
    alert(e);
}

Below is my script that runs from the extension being clicked on:

const searchInput = document.getElementById("edit-keyword");
const searchBtn = document.getElementById("edit-submit-solr-search");
if (searchInput && searchBtn) {(
    async () => {
        const message = { action: "clicked" };
        await chrome.runtime.sendMessage(message);
    })();
};
searchInput.value = "license";
searchBtn.click();

My understanding is that if I want the webpage to be loaded before I run the script to enter text on html elements, I should use the onUpdated listener. Am I not using it correctly? — hobbledcobbled, May 13 '23 at 01:06
Don't use messaging. Instead wait for the navigation inside onClicked, [example](https://stackoverflow.com/a/67244340). Note how the example unregisters the listener to prevent multiple callbacks. P.S. there's no `alert` in a service worker, so use console.log and look at [the background console](/a/10258029). — wOxxOm, May 13 '23 at 03:57

score 0 · Answer 1 · answered May 13 '23 at 05:32

Please try this.

background.js

const claimSubmitStart = () => {
  const searchInput = document.getElementById("edit-keyword");
  const searchBtn = document.getElementById("edit-submit-solr-search");
  if (searchInput && searchBtn) {
    searchInput.value = "license";
    searchBtn.click();
    return true;
  }
  else {
    return false;
  }
}

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const results = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: claimSubmitStart
  });
  if (results[0].result) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        alert(document.title);
      }
    });
  }
});

Chrome onUpdate and onMessage triggering when onMessage event listener shouldn't be

1 Answers1