如何将用户输入从 HTML 面板传递到 firefox Addon SDK 中的 Addon 脚本答案

【问题标题】：How to pass user input from HTML panel to Addon script in firefox Addon SDK如何将用户输入从 HTML 面板传递到 firefox Addon SDK 中的 Addon 脚本
【发布时间】：2017-05-07 12:10:07
【问题描述】：

我正在使用插件 SDK。我对如何将用户输入传递给我的插件 index.js 感到困惑。我查看了内容脚本，但它并不是我想要的。我有一个 HTML 页面，当用户单击 Addon 按钮时会弹出该页面。这是 HTML 代码：

<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
body {

        background-color:white;
      }
    </style>
  </head>

  <body>

  <form> 
      Enter name: <br>
      <input type="text" id="txt-field">
      <input type="submit" value="Add">
  </form>
  </body>
</html>

一旦用户单击 HTML 中的 add 按钮，我需要将用户输入的文本传递到我的 main.js 文件，然后我想永久存储它，除非用户手动删除它。这是 index.js：

var { ToggleButton } = require('sdk/ui/button/toggle');
var sdkPanels = require("sdk/panel");
var self = require("sdk/self");
var storage = require("sdk/simple-storage"); 

var button = ToggleButton({
  id: "my-button",
  label: "my button",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onChange: handleChange
});

var myPanel = sdkPanels.Panel({
  contentURL: "./text-entry.html",
  onHide: handleHide
});

function handleChange(state) {
  if (state.checked) {
    myPanel.show({
      position: button
    });
  }
}

function handleHide() {
  button.state('window', {checked: false});
}

你能指出我怎样才能做到这一点吗？

【问题讨论】：

标签： firefox firefox-addon firefox-addon-sdk

【解决方案1】：

为了将值从 HTML 面板页面传递到插件脚本，您需要添加一个内容脚本。由于我的面板是受信任的（在插件内部而不是外部网页），您可以通过将脚本附加到面板来实现传递在 HTML 面板中输入的值。面板代码如下（代码来自：this link

<html>
<head>
    <style type="text/css" media="all">
      textarea {
        margin: 10px;
      }
      body {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <textarea rows="13" cols="33" id="edit-box"></textarea>
    <script src="get-text.js"></script>
  </body>
</html>

然后，获取面板输入文本（在本例中，文本以 enter 结尾）并将值发送到插件的脚本代码如下所示：

// When the user hits return, send the "text-entered"
// message to main.js.
// The message payload is the contents of the edit box.
var textArea = document.getElementById("edit-box");
textArea.addEventListener('keyup', function onkeyup(event) {
  if (event.keyCode == 13) {
    // Remove the newline.
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    addon.port.emit("text-entered", text);
    textArea.value = '';
  }
}, false);
// Listen for the "show" event being sent from the
// main add-on code. It means that the panel's about
// to be shown.
//
// Set the focus to the text area so the user can
// just start typing.
addon.port.on("show", function onShow() {
  textArea.focus();
});

接收该值并将其发布在console.log中的插件代码是：

var data = require("sdk/self").data;
// Construct a panel, loading its content from the "text-entry.html"
// file in the "data" directory, and loading the "get-text.js" script
// into it.
var textEntryPanel = require("sdk/panel").Panel({
  contentURL: data.url("text-entry.html")
});

// Create a button
require("sdk/ui/button/action").ActionButton({
  id: "show-panel",
  label: "Show Panel",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

// Show the panel when the user clicks the button.
function handleClick(state) {
  textEntryPanel.show();
}

// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
textEntryPanel.on("show", function() {
  textEntryPanel.port.emit("show");
});

// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
textEntryPanel.port.on("text-entered", function (text) {
  console.log(text);
  textEntryPanel.hide();
});

【讨论】：