index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="index.js"></script>
    <link rel="stylesheet" href="../third-party/awsm/awsm.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <main>
      <section>
        <h1>Action API Demo</h1>
        <p>
          Before experimenting with these APIs, we recommend you pin the
          extension's action button to your toolbar in order to make it easier
          to see the changes.
        </p>
        <img src="../images/pin-action.png" />
      </section>

      <section id="toggle-state">
        <h2>enable / disable</h2>

        <p>
          Clicking the below <em>toggle enabled state</em> button will enable or
          disable the extensions' action button in Chrome's toolbar and
          extensions menu.
        </p>

        <p>
          When disabled, clicking the action will not open a popup or trigger
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#event-onClicked"
            ><code>action.onClicked</code></a
          >
          events.
        </p>

        <button id="toggle-state-button">toggle enabled state</button>

        <div class="flex">
          <figure>
            <img src="../images/action-enabled.png" />
            <figcaption>Action enabled</figcaption>
          </figure>
          <figure>
            <img src="../images/action-disabled.png" />
            <figcaption>Action disabled</figcaption>
          </figure>
        </div>
      </section>

      <section id="popup">
        <h2>Popup</h2>

        <p>
          This demo's <a href="manifest.json">manifest.json</a> file sets the
          value of <code>action.default_popup</code> to
          <code>popups/popup.html</code>. We can change that behavior at runtime
          using
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-setPopup"
            ><code>action.setPopup</code></a
          >.
        </p>

        <label>
          Change popup page<br />
          <select id="popup-options">
            <option value="/popups/popup.html">Hello world (default)</option>
            <option value="/popups/a.html">A</option>
            <option value="/popups/b.html">B</option>
            <option value="">onClicked handler</option>
          </select>
        </label>

        <div class="spaced">
          <label>
            Current popup value
            <input type="text" id="current-popup-value" disabled />
          </label>
        </div>

        <p>
          Register a handler to change how the action button behaves. Once
          changed, clicking the action will open your new favorite website.
        </p>
        <button id="onclicked-button">Change action click behavior</button>
        <button id="onclicked-reset-button">reset</button>
      </section>

      <!-- badge -->

      <section id="badge-text">
        <h2>Badge Text</h2>

        <p>
          The action's badge text is a text overlay with a solid background
          color. This provides a passive UI surface to share information with
          the user. It is most commonly used to show a notification count or
          number of actions taken on the current page.
        </p>

        <div class="spaced">
          <label>
            Enter badge text (live update)<br />
            <input type="text" id="badge-text-input" />
          </label>
        </div>

        <div class="flex">
          <label class="full-width">
            Current badge text
            <input type="text" id="current-badge-text" disabled />
          </label>
          <button id="clear-badge-button">clear badge text</button>
        </div>

        <div class="spaced">
          <button id="set-badge-background-color-button">
            Randomize badge background color
          </button>
        </div>

        <div class="flex">
          <label class="full-width">
            Current badge color
            <input type="text" id="current-badge-bg-color" disabled />
          </label>
          <button id="reset-badge-background-color-button">
            Reset badge color
          </button>
        </div>
      </section>
      <!-- Badge Text Color !-->
      <section>
        <h2>Badge Text Color</h2>
        <p>
          The
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-setBadgeTextColor"
            ><code>action.setBadgeTextColor</code></a
          >
          method allows you to change the color of the badge text.
        </p>

        <div class="spaced">
          <button id="set-badge-txt-color-button">
            Randomize badge text color
          </button>
        </div>

        <p>
          The
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-getBadgeTextColor"
            ><code>action.getBadgeTextColor</code></a
          >
          method allows you to read the current color of the badge text.
        </p>

        <div class="flex">
          <label class="full-width">
            Current badge text color
            <input type="text" id="current-badge-txt-color" disabled />
          </label>
          <button id="reset-badge-txt-color-button">
            Reset badge text color
          </button>
        </div>
      </section>

      <!-- badge - icon -->

      <section id="setIcon">
        <h2>Icon</h2>

        <p>
          The
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-setIcon"
            ><code>action.setIcon</code></a
          >
          method allows you to change the action button's icon by either
          providing the path of an image or the raw
          <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData"
            >ImageData</a
          >.
        </p>

        <button id="set-icon-button">set a new action icon</button>
        <button id="reset-icon-button">reset action icon</button>
      </section>

      <!-- badge - hover text (title) -->

      <section id="title">
        <h2>Hover Text</h2>

        <p>
          The action's title is visible when mousing over the extension's action
          button.
        </p>

        <p>
          This value can be read and changed at runtime using the
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-getTitle"
            ><code>action.getTitle</code></a
          >
          and
          <a
            href="https://developer.chrome.com/docs/extensions/reference/action/#method-setTitle"
            ><code>action.setTitle</code></a
          >
          methods, respectively.
        </p>

        <div class="spaced">
          <label>
            Enter a new title (debounced)<br />
            <input type="text" id="title-input" />
          </label>
        </div>

        <div class="flex">
          <label class="full-width">
            Current title
            <input type="text" id="current-title" disabled />
          </label>
          <button id="reset-title-button">reset title</button>
        </div>

        <div class="flex">
          <figure>
            <img src="../images/title-no-hover.png" />
            <figcaption>Default appearance</figcaption>
          </figure>
          <figure>
            <img src="../images/title-hover.png" />
            <figcaption>Title appears on hover</figcaption>
          </figure>
        </div>
      </section>
    </main>
  </body>
</html>