-1

Toobar item

I am developing a safari app extension. I have created a popup toolbar item that looks like this. How can I get the value from textfield when tapped on the submit button. Thank you so much.

Anup Deshpande
  • 67
  • 6

1 Answers1

0

I may b late but here you will find source code which shows you to add button event -> https://developer.apple.com/documentation/safariservices/safari_web_extensions/developing_a_safari_web_extension

You will require default_popup in manifest.json like,

"background": {
        "scripts": [ "background.js" ]
    },

    "content_scripts": [{
        "js": [ "content.js" ],
        "matches": [ "<all_urls>" ]
    }],
    
    "browser_action": {
        "default_icon": {
            "16": "images/toolbar-icon-16.png",
            "32": "images/toolbar-icon-32.png"
        },
        "default_popup": "popup.html"
    },

and popup.html would contain reference for popup.js=>

<head>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css" />
</head>
<body>
    <div id="title">
    Sea Creator
    </div>
    <button id="share">Share on example.com!</button>
</body>

popup.js would be like,

function shareOnExample()
{
    // Use optional permissions to request access to www.example.com.
    browser.permissions.request({origins: ['https://www.example.com/']}, (granted) => {
        if (granted) {
            // Share Sea Creator's info to example.com.
        }
    });
}

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("share").addEventListener("click", shareOnExample);
});

Here you see, click event listener is added for share button.

For more info, you can also check this video -> https://developer.apple.com/videos/play/wwdc2020/10665/

Paresh Thakor
  • 1,795
  • 2
  • 27
  • 47