{"id":122829,"date":"2021-01-05T17:00:38","date_gmt":"2021-01-05T17:00:38","guid":{"rendered":"https:\/\/developer.apple.com\/news\/?id=qiz0arxc"},"modified":"2021-01-05T17:00:38","modified_gmt":"2021-01-05T17:00:38","slug":"how-to-convert-existing-web-extensions-for-safari","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2021\/01\/05\/how-to-convert-existing-web-extensions-for-safari\/","title":{"rendered":"How to convert existing web extensions for Safari"},"content":{"rendered":"
<\/div>\n

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently \u2014 all while using the same extension model and APIs found in extensions for Google Chrome, Mozilla Firefox, and Microsoft Edge browsers.<\/p>\n

If you have an existing web extension you\u2019d like to prepare for distribution in the Mac App Store, it\u2019s easy to to get started with the converter tool in Xcode 12. Here\u2019s how to go about it.<\/p>\n

\n
\n
<\/a> <\/section>\n
<\/p>\n

Meet Safari Web Extensions<\/h4>\n

<\/a> <\/p>\n

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently. We\u2019ll show you how to build a new Safari Web Extension and host it on the App Store, as well as how to use the safari-web-extension-converter tool to migrate existing extensions…<\/p>\n<\/section>\n<\/section>\n<\/section>\n

Learn more about Safari App Extensions<\/a><\/p>\n

Convert an extension<\/h3>\n

Before getting started, make sure you\u2019ve installed the latest versions of Xcode 12, Command Line Tools, and Safari 14. When ready, you can then run the following command in the Terminal app:<\/p>\n

xcrun safari-web-extension-converter \/path\/to\/my\/extension\/<\/code><\/pre>\n
The converter tool will search for your extension\u2019s manifest at .\/path\/to\/my\/extension\/manifest.json<\/code> and generate a default configuration for your Xcode project. If the configuration appears correct, type yes<\/code> at the prompt and press the Return<\/strong> key. If not, type no<\/code> and you can enter the converter tool\u2019s interactive mode to customize the configuration.<\/p>\n
\n
Note: Verify your keys<\/strong><\/em>
\nDuring the conversion process, safari-web-extension-converter<\/code> will look through your manifest for any keys that aren\u2019t supported by your installed version of Safari. If Xcode finds any issues, the app will display a warning message. If you receive this, consider whether the affected keys are critical for your extension to function. You may still be able to leave these keys in place and have everything run smoothly, but be sure to test your extension to confirm.<\/em><\/p>\n
\n
Adjust a converted extension in Xcode<\/h3>\n
Safari Web Extensions require a container app so that you can easily distribute your extension on the Mac App Store. As part of the conversion process, Xcode automatically creates and opens a container app project that contains your extension files. From here, you can test your extension, make any necessary code changes, update your extension\u2019s icon, and upload your container app for distribution through the Mac App Store.<\/p>\n
Test, test, and test again<\/strong>
\nWhile inside your Xcode project, you can build and run your extension by either pressing Command-R<\/strong> or the Play<\/strong> button in the upper left portion of the screen. <\/p>\n
Your container app has a button to open Safari Extensions preferences. Select this button to open Safari and enable your extension in the browser.<\/p>\n
Note: If this is your first time testing an extension through Xcode, you\u2019ll need to enable support for unsigned extensions in Safari. To do so, follow these steps:<\/p>\n
    \n
  1. Open Safari<\/strong>.<\/li>\n
  2. Select Safari > Preferences<\/strong>.<\/li>\n
  3. Navigate to the Advanced<\/strong> tab.<\/li>\n
  4. Check the \u201dShow Develop menu in menu bar\u201d<\/strong> checkbox.<\/li>\n
  5. Navigate to the Develop menu and select \u201dAllow Unsigned Extensions.\u201d<\/strong> You may have to enter your admin password to make changes.<\/li>\n<\/ol>\n
    Make any code changes<\/strong>
    \nBy default, your Xcode project references your extension\u2019s existing content as well as native Swift or Objective-C code to create the container app. After testing, you can make any needed changes to this project; any alterations you make will automatically show up as part of your Safari Web Extension the next time you build your Xcode project.<\/p>\n
    Update your icon<\/strong>
    \nXcode will use any extension icons listed in your manifest as your app icon, which will also display on your Mac App Store listing. Because Safari Web Extension icons are typically smaller, however, you may want to update to a higher-resolution version of this image for the best look. <\/p>\n
    <\/div>\n
    To change your icons, select the Assets.xcassets folder in the Xcode sidebar, then drag the new icons into the appropriately-sized image wells.<\/p>\n
    Add any additional files to your Xcode project<\/strong>
    \nIf you need to add additional resources or code files to your extension after conversion \u2014 for example, images used by your user interface or other dependencies missed during conversion \u2014 you will also need to manually include these files in your Xcode project.<\/p>\n
    <\/div>\n
    To do so, select any additional files in Finder and drag them into the Resources<\/strong> folder within your Xcode project, located in the left sidebar. Uncheck \u2019Copy items if needed\u2019<\/strong> in the file dialog to make sure these files automatically associate with your app.<\/p>\n
    Distribute your extension<\/h3>\n
    When you\u2019re ready to share your extension, sign in with your Apple Developer account to App Store Connect and upload the container app to for distribution. Remember to review the App Store guidelines before submitting to the Mac App Store; Apple reviews all extensions and extension updates to verify they work reliably.<\/p>\n
    Learn more about submitting extensions to the Mac App Store<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently \u2014 all while using the same extension model and APIs found in extensions for Google Chrome, Mozilla Firefox, and Microsoft Edge browsers. If you have an existing web extension you\u2019d like to prepare for distribution in […]<\/p>\n","protected":false},"author":2,"featured_media":122830,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-122829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-developer-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/122829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=122829"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/122829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/122830"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=122829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=122829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=122829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}