如何將用戶輸入從HTML面板傳遞給Firefox中的Addon腳本Addon SDK

我正在使用Addon SDK。我很困惑如何將用戶輸入傳遞給我的插件index.js。我看了內容腳本，但它不完全是我所尋找的。當用戶點擊Addon按鈕時，我會彈出一個HTML頁面。下面是HTML代碼：如何將用戶輸入從HTML面板傳遞給Firefox中的Addon腳本Addon SDK

<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腳本，您需要添加一個內容腳本。由於我的面板是可信的（在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

如何將用戶輸入從HTML面板傳遞給Firefox中的Addon腳本Addon SDK

回答

相關問題