How do I add a UI to a Safari Web Extension?

I have a Safari Web Extension that successfully receives a message from a webpage and returns a response.

I now want to add a user interface to the Safari Web Extension. How do I do this?

I have modified the default template code as follow to add an NSAlert for testing. The modal runs, but no alert ever appears, and the code remains stuck at runModal.

What is the correct way to add a UI to a webextension?


- (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {

    id message = [context.inputItems.firstObject userInfo][SFExtensionMessageKey];

    NSLog(@"Received message from browser.runtime.sendNativeMessage: %@", message);

    NSAlert* alert = [[NSAlert alloc]init];
    [alert setMessageText:message[@"request"]];
    [alert setInformativeText:@"Hello"];
    [alert runModal];

    NSExtensionItem *response = [[NSExtensionItem alloc] init];

    response.userInfo = @{ SFExtensionMessageKey: @{ @"id": message[@"id"], @"uuid": message[@"uuid"], @"contentType": message[@"contentType"], @"response": message[@"request"] } };

    [context completeRequestReturningItems:@[ response ] completionHandler:nil];

}
@end

When do you want to show this UI? A few ways that you can present UI from your Web Extension are:

  • A popover from your Web Extension's toolbar button (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups)
  • You can load HTML from your extension's bundle in a tab in Safari, to do that you could navigate a tab to a page using the getURL API (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getURL)

Five months later, anyone making Safari Web Extensions?

How do I add a UI to a Safari Web Extension?
 
 
Q