Firefox 패널의 Addon 스크립트에 HTML 패널의 사용자 입력을 전달하는 방법

Addon SDK를 사용하고 있습니다. 내 addon index.js 사용자 입력을 전달하는 방법에 혼란 스러워요. 나는 Content Script를 보았지만 정확히 내가 찾는 것은 아니다. 사용자가 Addon 버튼을 클릭하면 팝업되는 HTML 페이지가 있습니다. 여기에 HTML 코드입니다 : 사용자가 HTML에서 add 버튼을 클릭하면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>

, 나는 사용자가 내가 사용하지 않는 한 영구적으로 저장하려면 다음 내 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 스크립트로 값을 전달하려면 콘텐츠 스크립트를 추가해야합니다. 내 패널이 신뢰할 수 있기 때문에 (외부 웹 페이지가 아닌 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 패널의 사용자 입력을 전달하는 방법

답변

관련 문제