FirefoxパネルのAddonスクリプトにHTMLパネルからユーザー入力を渡す方法

私はAddon SDKを使用しています。私はaddon index.jsにユーザ入力を渡す方法を混乱させる。私はContent Scriptを見ましたが、それは私が探しているものではありません。ユーザーがAddonボタンをクリックするとポップアップするHTMLページがあります。ここではHTMLコードは次のとおりです。Firefoxパネルの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}); 
}

私はそのようなことをどうやって実現できますか？

出典

2017-05-07 user7945230

HTMLパネルページからAddonスクリプトに値を渡すには、コンテンツスクリプトを追加する必要があります。私のパネルは信頼できるので（外部のWebページではなくAddonの内部で）、パネルにスクリプトを添付することで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>

、パネルの入力したテキストをとる（この例では、テキストを入力することにより終了）とアドオンの値は次のようになり発するスクリプトコード：パネルコードから、この（コードのようになります。：

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

出典

2017-05-07 18:44:24 user7945230

FirefoxパネルのAddonスクリプトにHTMLパネルからユーザー入力を渡す方法

答えて

関連する問題