title: Chrome Share API
body: <p>Does anyone know if the new share button in Chromium-based browsers has an API? I currently have the following HTML embedded on my website which activates the system share sheet of your device, but I'd rather have it use the Chrome one when possible.</p>
  <pre><code>    &lt;style&gt;
          a {
              color: #000000;
              text-decoration: none;
          }
  
          a:hover {
              color: #000000;
              text-decoration: none;
              cursor: pointer;
          }
  
          body {
              overflow: hidden;
              background-color: black;
              -webkit-text-size-adjust: 100%;
              scroll-behavior: none;
          }
  
          html {
              box-sizing: border-box;
          }
  
          .zoomA {
              width: 60px;
              height: auto;
              /* ease | ease-in | ease-out | linear */
              transition: transform ease-in-out 0.3s;
          }
  
          img {
              border: 0;
          }
  
          .zoomA:hover {
              transform: scale(1.4);
          }
  
          body {
              font-family: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
          }
  
          .hidden {
              display: none;
          }
  
          svg {
              width: 20px;
              height: 20px;
              margin-right: 7px;
          }
  
          button,
          .button {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              height: auto;
              padding-top: 8px;
              padding-bottom: 8px;
              color: #b7b7b7;
              text-align: center;
              font-size: 14px;
              font-weight: 500;
              line-height: 1.1;
              letter-spacing: 2px;
              text-transform: capitalize;
              text-decoration: none;
              white-space: nowrap;
              border-radius: 10px;
              border: 1px solid #00cc69;
              cursor: pointer;
              background: #000;
          }
  
          button:hover,
          .button:hover {
              border-color: #00cc69;
              background: #000;
              color: #b7b7b7;
              outline-color: #000;
              text-decoration-color:#000;
          }
  
          button:active,
          .button:active {
              border-color: #00cc69;
              background: #000;
              color: #b7b7b7;
              outline-color: initial #000;
              text-decoration-color:#000;
              background-image: none;
          }
  
          .share-button,
          .copy-link {
              padding-left: 30px;
              padding-right: 30px;
          }
  
          .share-button,
          .share-dialog {
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;center&gt;
      &lt;button class=&quot;share-button&quot; type=&quot;button&quot; title=&quot;Share&quot;&gt;
          &lt;svg&gt;
  
              &lt;use href=&quot;#share-icon&quot;&gt;&lt;/use&gt;
  
          &lt;/svg&gt;
          &lt;span&gt;Share&lt;/span&gt;
      &lt;/button&gt;
      &lt;svg class=&quot;hidden&quot;&gt;
          &lt;defs&gt;
              &lt;symbol id=&quot;share-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;
                  stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-share&quot;&gt;
                  &lt;path d=&quot;M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8&quot;&gt;&lt;/path&gt;
                  &lt;polyline points=&quot;16 6 12 2 8 6&quot;&gt;&lt;/polyline&gt;
                  &lt;line x1=&quot;12&quot; y1=&quot;2&quot; x2=&quot;12&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;
              &lt;/symbol&gt;
          &lt;/defs&gt;
      &lt;/svg&gt;
      &lt;script id=&quot;rendered-js&quot;&gt;
          const shareButton = document.querySelector('.share-button');
          const shareDialog = document.querySelector('.share-dialog');
          const closeButton = document.querySelector('.close-button');
          shareButton.addEventListener('click', event =&gt; {
              if (navigator.share) {
                  navigator.share({
  
                      title: 'example.com',
  
                      text: 'Check out this website I found.',
  
                      url: 'https://example.com'
                  }).
  
                      then(() =&gt; {
  
                          console.log('Thanks for sharing!');
  
                      }).
  
                      catch(console.error);
  
              } else {
                  shareDialog.classList.add('is-open');
              }
          });
          closeButton.addEventListener('click', event =&gt; {
              shareDialog.classList.remove('is-open');
          });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Z1iOE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z1iOE.jpg" alt="enter image description here" /></a></p>
  <p>‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎</p>