Chrome扩展程序仅在检查弹出窗口时有效

时间:2018-01-13 11:47:25

标签: javascript google-chrome-extension

扩展目的:保存用户手动输入的易趣卖家用户名。当我们对产品有持续的问题时(即发送有缺陷的,错误的商品,打开退货的麻烦等),我们会添加eBay卖家。
当产品页面上有eBay用户名(存储在扩展名中)时,页面的背景颜色会闪烁红色几次,表示您不应该从该卖家处购买。

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.

问题:如果您在与扩展程序交互之前检查弹出窗口,则扩展程序将仅保存用户名。 这些是我暂时遵循的步骤......
 1.右键单击弹出窗口
 2.单击“检查弹出窗口”
 3.输入用户名
 4.单击“设置”

我处于停滞状态。任何帮助表示赞赏。

的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);
    });
  });
}

1 个答案:

答案 0 :(得分:0)

我已在浏览器中测试了您的代码,并且正在设置用户文本而不检查代码。

您可以再次验证并检查您是否遗漏了任何内容,或者您​​的控制台是否有任何错误。我最终看起来很不错