Question

在我开始之前-是的，我知道对类似问题有一些答案，但是没有一个是完整的。即没有问题中没有的文件，您将无法在答案中使用信息。

因此，我试图设置一个可在chrome扩展程序中使用的脚手架，在该扩展程序中，我可以在弹出窗口的字段中键入内容并将其存储在后台。然后，我可能会使用此变量在字段上调用API（例如，天气应用的邮政编码）。

我在这里要做的就是将徽章文本设置为在弹出窗口中输入的消息。

我已经尝试在此问题的其他答案中使用代码，但是我无法使任何事情起作用，这就是为什么我将其保持非常简单的原因。

manifest.json （这里没什么疯狂的）：

{
  "name": "Popup to Background Communication",
  "description": "Chrome Extension Scaffolding for Communication between
    the popup and the background script.",
  "manifest_version": 2,
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

popup.html （显示带有求和按钮的字段）

<!doctype html>
<html>

  <div class="field_entry">
    <p>Enter Message to be Sent:</p>
    <form id = "messageForm">
      <input type="text" id="messageToSend" />
      <input type="submit"/>
    </form>
  </div>

</html>

popup.js （侦听提交并从后台调用函数）：

function sendToBackground() {
  var messageFromForm = document.getElementById("messageToSend");
  var background = chrome.extension.getBackgroundPage();
  background.setBadgeToMessage(messageFromForm);
}

document.getElementById('messageForm')
            .addEventListener('submit', sendToBackground);

background.js （保留要从弹出窗口更改为消息的变量）

var badge = "0";

function setBadgeToMessage(msg){
  badge = msg;
  chrome.browserAction.setBadgeText(badge + "");
};

我提交时没有任何反应。我认为这是错误的，我正在访问来自popup.js的变量，该变量是background.js的本地变量，但似乎至少应该更改复制到popup.js的版本并更改徽章。

任何帮助将不胜感激。我已经连续两天在墙上撞头了，这似乎是一个非常简单的问题。

Answer 1

您快到了。但是，您不能将Element作为消息传递给Chrome API。 browserAction.setBadgeText的文档指定一个对象。这样做：

function sendToBackground() {
  var messageFromForm = document.getElementById("messageToSend").value;
 chrome.runtime.getBackgroundPage((background) => background.setBadgeToMessage(messageFromForm));

  ...
}

...

function setBadgeToMessage(msg){
  badge = msg;
  chrome.browserAction.setBadgeText({ text : badge });
}

在Chrome扩展程序中将变量从popup.js发送到background.js

1 个答案: