Chrome Extension only works when popup is inspected

Question

Purpose for extension: Save eBay seller usernames that are manually inputted by users. The eBay seller is added when we have continuous issues with the product (ie defective, wrong item sent, a hassle to open returns with, etc.).
When an eBay username (stored in the extension) is present on a product page, the background color of the page flashes red a few times indicating that you should not purchase from this seller.

Type in the username. Click "Set". The username will then be added to the "blacklist". All stored usernames are visible above the text entry box.

Issue: The extension will only save the username if you Inspect the popup before interacting with the extension. These are the steps I follow temporarily...
1. Right click on popup
2. Click "Inspect Popup"
3. Enter the username
4. Click "Set"

I am at a standstill. Any help is appreciated.

manifest.json

{
  "manifest_version": 2,
  "name": "eBay Blacklist",
  "version": "2.0",
  "content_scripts": [
    {
      "matches": [
        "*://*.ebay.com/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "browser_action": {
    "default_icon": "CLAYTON-emoji.png",
    "default_title": "eBay Blacklist",
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage"
  ]
}

content.js

/*
 *  Finds the username when viewing a product on eBay
 */
var ebayUsername = document.querySelector('#CenterPanel #CenterPanelInternal #RightSummaryPanel .mbg-nw').innerHTML;
console.log(ebayUsername);
/*
 *  The area to alert the user that the username is blacklisted.
 *  Currently flashes the body to whatever color is set on line 28
 */
var ebayun = document.querySelector('#Body');

/*
 *  When a blacklisted username is present on an active listing, the users screen
 *  will flash.
 */
chrome.storage.sync.get("data", function(items) {
  var check = ebayUsername;
  var length = items.data.length;
  for (i = 0; i < length; i++) {
    if (items.data[i] == check) {
      var defaultBgColor = ebayun.style.backgroundColor;
      var counter = 0;
      setInterval(function() {
          if (ebayun.style.backgroundColor == defaultBgColor && counter < 4) {
              ebayun.style.backgroundColor = "#ff3030";
              ebayun.style.transition = "background-color 0.5s ease";
              counter++;
          }
          // After 4 loops of the flashing alert color, flashing stops.
          // The backgroundColor is set to declared color on line 28.
          else if (counter == 4) {
            ebayun.style.backgroundColor = "#ffcccc";
          }
           else {
              ebayun.style.backgroundColor = defaultBgColor;
          }
        }, 400);
    }
  }
});

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="data"></div>
  <input type="text" id="text"></input>
  <button id="set">Set</button>

  <br><br>

  <input type="text" id="toDelete"></input>
  <button id="delete">Delete Username</button>

  <br><br><br>

  <button id="clear">Delete All</button>
  <script type="text/javascript" src="popup.js"></script>
</body>
</html>

popup.js

document.body.onload = function() {
  chrome.storage.sync.get("data", function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      if (items.data == undefined)
        items.data = "";
      document.getElementById("data").innerText = items.data;
    }
  });
}

// DELETES ALL STORED USERNAMES
document.getElementById("clear").onclick = function() {
  chrome.storage.sync.clear(function() {});
  alert("All usernames deleted!");
  window.close();
}
// Deletes one username by choice
document.getElementById("delete").onclick = function() {
  var exists = false;
  var index = 0;
  var indexToDelete;
    chrome.storage.sync.get("data", function(items) {
    var deleteMe = document.getElementById("toDelete").value;
    var length = items.data.length;
    console.log("deleteMe:",deleteMe);
    for (index = 0; index - 1 < length; index++) {
      console.log("Index:", index);
      if (items.data[index] != deleteMe) {
        console.log("Index Data:", items.data[index]);
      }
      if (items.data[index] == deleteMe) {
        console.log("Index Data:", items.data[index]);
        indexToDelete = index;
        exists = true;
      }
    }
    console.log("Exists: ",exists);
    if (exists == true) {
      alert("Username \"" + items.data[indexToDelete] + "\" deleted!");
      items.data.splice(indexToDelete, 1);
      chrome.storage.sync.set({"data" : items.data })
      window.close();
    } else {
      alert("Username not found!");
    }
  });
}

document.getElementById("set").onclick = function() {
  var exists_alert;
  var exists = true;
  chrome.storage.sync.get("data", function(items) {
    if (items.data == undefined) {
      items.data = [document.getElementById("text").value];
      alert('Username added!!!');
      window.close();
    }
    else {
      var check = document.getElementById("text").value;
      var length = items.data.length;
      for (i = 0; i < length; i++) {
        if (items.data[i] == check) {
          exists = true;
        } else {
          exists = false;
        }
      }
      if (exists == false) {
        items.data.push(document.getElementById("text").value);
        alert('Username added!!!');
        window.close();
      }
      if (exists == true) {
        alert('Username already exists!');
      }
    }
    chrome.storage.sync.set({ "data" : items.data }, function() {
    console.log(items.data);
    });
  });
}

Answer 1

I have tested your code in my browser and it is setting the user text without inspecting code.

Can you verify again and check if you are not missing anything, or are there any errors coming to your console. Things seem fine at my end

Chrome Extension only works when popup is inspected

Question

1 answers

solution1
0 2018-01-13 13:28:55

Chrome Extension only works when popup is inspected

Question

1 answers

solution1 0 2018-01-13 13:28:55

solution1
0 2018-01-13 13:28:55