How to read user input in HTML page and pass it to the Addon script then store it using SDK

Add-ons Development
#1

I am using Addon SDK. I am confused on how to pass user input to my addon index.js. I looked at Content Script but it is not exactly what I look for. I have an HTML page that pops up when the user clicks on the Addon button. Here is the HTML code:
<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
body {

		background-color:#b3dbfa;
      }
    </style>
  </head>
  
  <body>
	    
  <form> 
	  Enter URL: <br>
	  <input type="text" id="txt-field">
	  <input type="submit" value="Add">
  </form>
  </body>
</html>

Once the user clicks add, I need to pass the text that the user entered to my main.js file then I want to store it permanently unless the user deleted it manually. Here is the 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});
}
#2

In order to pass values from the HTML panel page to the Addon script you need to add a content script. Since my panel is trusted (internal to the Addon and not external web page), you can achieve passing values entered in the HTML panel by attaching a script to the panel. The panel code looks like this (codes from: 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>

Then, the script code that takes the panel’s entered text (in this example, the text ends by enter) and emits the value to the Addon looks like this:

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

And the Addon code that receives the value and post it in the console.log is:

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

Please make sure that you actually want to use the deprecated Add-On SDK.

And then:

You are sending something (.port.emit("text-entered", ..., but I don’t see that you listen to messages at all.

#4

Thanks NilkasG. Yes, I am aware about SDK will not be active soon.

What I really want to do is 1) read user’s input from the HTML panel once he press the button (e.g. Add), store the user’s input data, and retrieve it at later stage but I’m not there yet. Am I doing it right? I mean is it the right way to do this using the emit and on ??

Regarding I am sending something something using emit, I just want to make sure that the Addon script get the message and I do that using console.log(text); in the Addon script.

I hope that I’m reading user’s input data in the right way?? Please, confirm to me.
I still need to figure our how to store and retrieve it.

#5

Doing this in a WebExtension is not only future-proof but also easier.

If you are aware of the Add-on SDKs deprecation, please do tell why you are using it for a new add-on anyway. Before I invest time to figure out what the best solution to your problem is, I need to know the whole picture (or at least more of it).

#6

I just remembered that I’m doing pretty much the same thing in an older extension:

const Prefs = require('sdk/simple-prefs');

require('sdk/panel').Panel({
	contentScriptOptions: Prefs.prefs.excludeList || '',
	contentScript: '('+ function() {
		document.querySelector('textarea').value = self.options;
		self.port.on('hide', () => {
			self.port.emit('save', document.querySelector('textarea').value);
		});
	} +')()',
	contentURL: 'data:text/html;charset=utf-8,<html><head></head><body><textarea style="height: calc(100vh - 20px); width: calc(100vw - 20px);"></textarea></body></html>',
	width: 650,
	height: 600,
	onHide() {
		this.port.emit('hide');
	},
})
.show()
.port.on('save', data => Prefs.prefs.excludeList = data);

The only difference is that it saves it’s data on the panels ‘hide’ event. There is no submit button.

#7

Thanks. I will definitely migrate to webextension once the SDK is deprectaed in November 2017. I want to finish an exercise in SDK. It’s not fully clear to me what your code does. Can you explain a bit more.

#8

I want to finish an exercise in SDK

If you see this purely as an exercise, then you should exercise to read other peoples code and solve your own problems.

If you have problems whose solutions have an actual value (and be it that you want to learn something useful), I’ll gladly help.

#9

Thank you. It has an actual value for my need. I will really appreciate if you could help.