如何在我的扩展火狐上加载网站后设置徽章文本答案

【问题标题】：how set badge text after loaded site on my extensions firefox如何在我的扩展火狐上加载网站后设置徽章文本
【发布时间】：2021-10-07 20:35:02
【问题描述】：

我正在尝试创建一个扩展，以便可以在 Firefox 中将隐藏输入标签 (<input type="hidden">) 的数量显示为标记文本（如图像 ==> ）

但我有两个挑战：

1- 要获得计数 <input type="hidden"> ，页面必须完全加载

2- 徽章文本只能在后台设置，我无法将输入的数量发送给它

当网站加载时，如何在 Firefox 中将数字 <input type="hidden"> 显示为标记文本？

manifest.js

{
  "browser_specific_settings": {
    "gecko": {
      "strict_min_version": "58.0a1"
    }
  },
  "background": {
      "scripts": ["background.js"]
  },
  "browser_action": {
    "browser_style": true,
    "default_title": "test",
    "default_popup": "test.html"
  },
  "description": "test",
  "homepage_url": "https://github.com/",
  "manifest_version": 2,
  "name": "test",
  "permissions": [
    "tabs"
  ],
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["test.js"]
    }
  ]
}

test.js

let HiddenInputCount = 0;
var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
    if(inputs[index].type == "hidden")
    {
      HiddenInputCount++;
    }
}

background.js

function updateCount() {
var HiddenInputCount = 0; //This variable must be set automatically!!!!
  browser.browserAction.setBadgeText({text: HiddenInputCount.toString()});
  if (HiddenInputCount != 0) {
    browser.browserAction.setBadgeBackgroundColor({'color': 'green'});
  } else {
    browser.browserAction.setBadgeBackgroundColor({'color': 'red'});
  }
}


updateCount();

【问题讨论】：

标签： javascript firefox-addon firefox-addon-sdk firefox-addon-webextensions firefox-developer-tools

【解决方案1】：

您在正确的轨道上，您现在需要做的就是利用runtime.sendMessage。

首先在您的内容脚本中添加test.js，一条消息：

chrome.runtime.sendMessage(hiddenInputCount)

然后在您的background.js 文件中设置一个监听器：

chrome.runtime.onMessage.addListener((request, sender, callback) => {
  // `request` in this example would be your hidden input value
  chrome.browserAction.setBadgeText({text: request.toString(), tabId: sender.tab.id});
  // you would probably update this to call `updateCount`
});

请注意，我也在设置 tabId 值。这样一来，每个页面的徽章计数都是准确的。

【讨论】：