firefox web 扩展教程：脚本重复自身

Question

我已经按照以下指南在 Firefox 插件中训练自己： https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension

然后我开始调整代码以添加我自己的函数，保持不变 architecture/logic。

但后来我注意到我的功能在通过单击菜单启动时执行了几次，实际上是自加载页面以来我在插件菜单中单击的次数。

示例：我创建了一个名为 Repeat Test 的菜单选项，它链接到一个名为 "Repeat Test" 的函数，它只是 console.log('1'); - 第一次点击，我得到 1 - 第二次点击，我得到 1 / 1 - 第三次点击，我得到 1 / 1 / 1

那是从哪里来的？

我的代码：

beast.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="choose_beast.css"/>
  </head>

  <body>

<div class="beast">Remove Model Map</div>
<div class="beast">Color Formulas</div>
<div class="beast">Image Overlay</div>
<div class="beast">Repeat Test</div>

<script src="choose_beast.js"></script>
  </body>

</html>

choose_beast.js:

   function optionSelection(myvar) {

  switch (myvar) {
    case "Remove Model Map":
      return "modelMap";
    case "Color Formulas":
      return "colorFormulas";
    case "Image Overlay":
        return "imageOverlay";
    case "Repeat Test":
      return "repeatTest";
  }
}

document.addEventListener("click", function(e) {
  if (!e.target.classList.contains("beast")) {
    return;
  }

  var clickedOption = e.target.textContent;
  var optionActivated = optionSelection(clickedOption);

  chrome.tabs.executeScript(null, {
    file: "/content_scripts/beastify.js"
  });

  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {option: optionActivated});


  });


});

最后，beastify.js：

function myaddon(request, sender, sendResponse) {

  switch (request.option){
    case "modelMap": removeModelMap();
    case "colorFormulas" : colorFormulas();
    case "imageOverlay" : overlay();
    case "repeatTest" : repeatTest();
  }

}

function repeatTest()
{
  console.log('1');
}

chrome.runtime.onMessage.addListener(myaddon);

Answer 1

我在这里发现了问题。此代码

chrome.tabs.executeScript(null, {
    file: "/content_scripts/beastify.js"
  });

包含在单击事件管理器中，因此每次单击时都会执行脚本，这增加了以后每次单击时都会向脚本发送消息的事实。

不知道是不是写错了（其实mozilla网站上是这样的）： https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension

但这对我来说很烦人。我会通知他们的。

firefox web 扩展教程：脚本重复自身

firefox web extension tutorial: script repeat itself

firefox

firefox-addon