Greasy Fork

Hello,

I'd like to get examples for best or better practices using GM.setValue with HTML element input.

Currently, the only way I came up with using GM.setValue is by assigning an event listener to HTML element.

Thank you in advance!

What do you want to achieve?

That script already occupies all the viewport, so I want to use it as much as possible.

Settings dialog

Another reason, is that Falkon, for which this feed parser/reader project is originally for, doesn't yet support Userscript action menu, so an HTML based dialog is the best option for me.

This code doesn't work when await GM.setValue(key, value); is not commented.

function settings() {
  for (const controller of document.querySelectorAll('#page-settings input, #page-settings select')) {
    controller.addEventListener ('input', async function() {
    //controller.addEventListener ('click', function() {
      let value, key = this.name;
      if (this.type == 'radio') {
        value = this.id;
      } else
      if (this.type == 'checkbox') {
        value = this.checked;
      } else
      if (this.value) {
        value = this.value;
      } else
      if (this.checked) {
        value = this.checked;
      }
      //await GM.setValue(key, value);
      console.log(key, ':', value);
    });
  }
}

<div class="about-newspaper" id="page-settings">
  <h1>Settings (Demo page)</h1>
  <p>This page will be functional in the next week.</p>
  <table>
    <tr>
      <td>
        <span>Items</span>
      </td>
      <td>
        <span><input type="number" name="item-number" id="item-number" min="5" max="50"/> <label>№</label></span>
        <span>Default number of items to display (max. 50)</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Text Size</span>
      </td>
      <td>
        <span>
          <input type="number" name="font-size" id="font-size" min="0" max="50"/>
          <label>px.</label>
        <span>Change default text size (max. 50px)</span>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Font Style</span>
      </td>
      <td>
        <span>
          <input type="radio" name="font-type" id="font-sans"/>
          <label for="font-sans">Sans</label>
          <input type="radio" name="font-type" id="font-serif"/>
          <label for="font-serif">Serif</label>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span for="font-sans">Mode</span>
      </td>
      <td>
        <span>
          <select name="mode" id="mode">
            <option value="mode-bright">Bright</option>
            <option value="mode-dark">Dark</option>
            <option value="mode-sepia">Sepia</option>
          <select>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Podcast</span>
      </td>
      <td>
        <span>
          <input type="checkbox" name="play-enclosure" id="play-enclosure"/>
          <label for="play-enclosure">Play Audio</label>
        </span>
        <span>
          <input type="checkbox" name="disable-enclosure" id="disable-enclosure"/>
          <label for="disable-enclosure">Disable Enclosures</label>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Hide</span>
      </td>
      <td>
        <span>
          <input type="checkbox" name="hide-audio" id="hide-audio"/>
          <label for="hide-audio">Audio</label>
        </span>
        <span>
          <input type="checkbox" name="hide-image" id="hide-image"/>
          <label for="hide-image">Image</label>
        </span>
        <span>
          <input type="checkbox" name="hide-media" id="hide-media"/>
          <label for="hide-media">Media</label>
        </span>
        <span>
          <input type="checkbox" name="hide-video" id="hide-video"/>
          <label for="hide-video">Video</label>
        </span>
      </td>
    </tr>
  </table>
  <button id="close">Close</button>
</div>

The code is working.

See async function settings() at userscript.

Please do let me know if there is a better way to apply this functionality.

Actually, using async directive is enough. I just don't really like the way you save the keys, but there should to complete code refactoring, so I don't think I have time for this 🤷.

What better way would be to save the keys?

And concerning to the overhaul code, I want to make it as modular as possible.

This userscript is an older version, using XSLTProcessor. The script now uses DOMParser because XSLTProcessor doesn't work the same with all web browsers.

I'd love to get instructions on how to improve the code of the project.