如何將用戶輸入從HTML面板傳遞到firefox插件SDK中的插件腳本

Question

我正在使用Addon SDK。 我對如何將用戶輸入傳遞給我的插件index.js感到困惑。 我看了Content Script，但這並不是我想要的。 我有一個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面板頁面傳遞到Addon腳本，您需要添加內容腳本。 由於我的面板是受信任的（在Addon內部，而不在外部Web頁面中），因此可以通過將腳本附加到面板來實現在HTML面板中輸入的傳遞值。 面板代碼看起來像這樣（來自此鏈接的代碼

<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結尾）並向Addon發出值，如下所示：

// 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的Addon代碼為：

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插件SDK中的插件腳本

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-07 18:44:24

如何將用戶輸入從HTML面板傳遞到firefox插件SDK中的插件腳本

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-07 18:44:24

解決方案1
0 已采納 2017-05-07 18:44:24