my document inquiry runs properly if I run it on page load, but not through a button click, the code is the same and the variables are passed right

I am making a chrome extension that will fill a text field of a website if conditions are met. The document query succeeds if I set the code to run on message receipt (which happens on page load) but if I use the exact same code inside of a button click listener where I want it, the query returns null instead of the appropriate field. I cant see what the issue is.

also, I planned to deal with this later but if you have any ideas that would be great, the overall code runs successfully every other attempt. its always fail, succeed, fail, succeed, etc

var url = "it didnt work.";
var discount = "What are you doing";
var penguin;
var duck;

// this listens for a message to be sent from the background script containing the cookie variables,
// which happens on page load.
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // this sets the variables from the message to easily accessible ones
  url = request.url;
  discount =;
  // this saves the variables to local storage so they can be retrieved outside of this function{ site: url, code: discount });

  if (discount == undefined) {
    // error alert if the variables didnt pass successfully
    alert("shit be fucky, reload");
  } else {
    // alert that everything was successfull - currently off because it got annoying
    //       alert(url + " " + discount)
    // fill field running on page load instead of on button click
    var discountInput = document.querySelector(
    fillField(discountInput, discount);
// this listens for button click from popup file
document.addEventListener("DOMContentLoaded", function () {
  var contents = document.getElementById("content");
  contents.addEventListener("click", onClick);
// this runs when the button is clicked
function onClick() {
  // retreives the stored variables["site", "code"], function (result) {
    //changes the variable names so they dont get confused with the global ones if they dont pass properly
    penguin =;
    duck = result.code;
  // alert to show what the variables are - currently off
  // alert(penguin + " " + duck)
  //passes variables into next function
  check_cookie_name(penguin, duck);

function check_cookie_name(penguin, duck) {
  // gets the info from current browser tab and sets the url as a variable
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var activeTab = tabs[0];
    var activeTabURL = activeTab.url;
    // alert to verify variables
      "the current URL is " +
        activeTabURL +
        "rn" +
        "rn" +
        "the partner website is " +
        penguin +
        "rn" +
        "rn" +
        "the discount code is " +

    // if the current website matches the url saved with the discount code
    if (activeTabURL.includes(penguin)) {
      // gets the discount code input field from the current tab and runs the fill function
      var discountInput = document.querySelector(

      fillField(discountInput, duck);
      // alert that everything has passed down and fill function should run
        "the fill function was triggered with values " +
          discountInput +
          " and " +
    // alert that something has gone wrong.
    else {

function fillField(field, value) {
  // if the input area name is found on the page, it fills it with the value passed in.
  if (field) {
    field.value = value;
    // alert that the function has run
    alert("fill ran on input field " + field + " with value of " + value);


A tool for design-by-contract in Golang

Ethereum boilerplate – React components and hooks for fast building dApps