議論 » 開発

Using GM.setValue with HTML element of type input

§
投稿日: 2023/06/23
編集日: 2023/06/23

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!

NotYouMod
§
投稿日: 2023/06/24

What do you want to achieve?

§
投稿日: 2023/06/24

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

§
投稿日: 2023/06/24

Settings dialog

§
投稿日: 2023/06/24

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.

§
投稿日: 2023/06/25

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>
§
投稿日: 2023/06/25

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.

NotYouMod
§
投稿日: 2023/06/25

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 🤷.

§
投稿日: 2023/06/26

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.

返信を投稿

返信を投稿するにはログインしてください。