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

Question

我正在使用 Addon SDK。我对如何将用户输入传递给我的插件感到困惑 index.js。我查看了内容脚本，但它并不是我想要的。当用户单击插件按钮时，我会弹出一个 HTML 页面。这是 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});
}

你能告诉我怎样才能实现这样的目标吗？

Answer 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 中接收值和 post 的插件代码是：

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

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

How to pass user input from HTML panel to Addon script in firefox Addon SDK

firefox

firefox-addon

firefox-addon-sdk