How to provide user feedback that does not require any user action to continue?

Question

I'm trying to implement a JavaScript bookmarklet that applies a transformation to the URL in the location bar.

The bookmarklet handles three possible cases, depending on the original URL in the location bar, and the effect of the transformation on it:

1. the original URL has the right form, and the new URL is different from it;
2. the original URL has the right form, and the new URL is identical to it ¹;
3. the original URL has the wrong form.

If (1) happens, the bookmarklet just loads the new URL; done.

If (3) happens, the bookmarklet pops up an alert dialog saying something like "no match", or "inapplicable URL", etc.

If (2) happens, I would like the bookmarklet to inform the user that nothing needs to be done, but I would like it to do this in a way that the user doesn't need to do anything in response (such as clicking OK).

If the bookmarklet could set the status bar (at the browser's lower-left corner), I'd be all set (at least for desktop browsers), but my understanding is that this is not the case.

On the other hand, providing the feedback through an alert dialog is precisely what I am trying to avoid, since it requires the user to click on the dialog's OK button in order to proceed.

Q: Is there some other way that the bookmarklet can provide the desired feedback?

(Since this is a bookmarklet, I am looking for very lightweight solutions. In case it matters, I am primarily interested in solutions that will work with desktop Firefox.)

---

^{1 The transformation that the bookmarklet applies to the original URL is idempotent, so case (2) will occur whenever the bookmarklet acts on a URL that is the result of an earlier application.}

Answer 1

Bookmarklets can manipulate the DOM and add any elements to it.

Here is a simple example of a feedback element in the bottom left corner:

javascript: (() => {
  function showFeedback(text) {
    const feedback = document.createElement('div');
    feedback.textContent = text;
    feedback.style = `
      background: black;
      color: white;
      font-size: 20px;
      padding: 1em;
      position: fixed;
      bottom: 0;
      z-index: 2147483647;
    `;

    document.body.append(feedback);

    setTimeout(() => {
      feedback.remove();
    }, 3000);
  };
  
  showFeedback('Feedback text...');
})();