Chrome Share API

Viewed 102

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.

    <style>
        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 {
        }
    </style>
</head>

<body>
    <center>
    <button class="share-button" type="button" title="Share">
        <svg>

            <use href="#share-icon"></use>

        </svg>
        <span>Share</span>
    </button>
    <svg class="hidden">
        <defs>
            <symbol id="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" class="feather feather-share">
                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                <polyline points="16 6 12 2 8 6"></polyline>
                <line x1="12" y1="2" x2="12" y2="15"></line>
            </symbol>
        </defs>
    </svg>
    <script id="rendered-js">
        const shareButton = document.querySelector('.share-button');
        const shareDialog = document.querySelector('.share-dialog');
        const closeButton = document.querySelector('.close-button');
        shareButton.addEventListener('click', event => {
            if (navigator.share) {
                navigator.share({

                    title: 'example.com',

                    text: 'Check out this website I found.',

                    url: 'https://example.com'
                }).

                    then(() => {

                        console.log('Thanks for sharing!');

                    }).

                    catch(console.error);

            } else {
                shareDialog.classList.add('is-open');
            }
        });
        closeButton.addEventListener('click', event => {
            shareDialog.classList.remove('is-open');
        });
    </script>
</body>

</html>

enter image description here

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎

1 Answers

It doesn't. The Google Developers recommend to use the Web Share API like you do when you want to have an UI.
But why would you even want to implement it the other way? It is much more compatible to use an API that does at least work on a few browsers more than only in Chrome, even if the Web Share API still does not provide full Browser support.

Related