Convert Web Extension to Safari App Extension

Question

I have Web Extensions which currently runs on Chrome, Firefox and Opera. Now I'm wondering is there a way to use same code to build Safari App Extension, maybe something like PhoneGap(wrap all existing JS code in Safari App Extension project) or there are limitations like tabs handling for javascript and some things just have to be written in native code.

Thanks

Answer 1

You should be able to reuse Content Scripts from your Web-Extensions (but you need to rewrite code to be able to send/receive messages with "background"). Background script will have to be re-written in Swift or Objective-C.

You need to developp:

• a Mac Host Application (which will be a companion to the Extension) : Swift or Objective-C (this app must have minimum features to pass Apple review - check the Apple guidelines for Mac Apps)
• the extension : in Swift or Objective-C + HTML/JS (as for other browsers) The code in Swift (or Obj-C) for the extension is the equivalent of the background page you have in Web Extensions. It will control the toolbar button, life-cycle of the extension and can talk with injected scripts.

You have an (small) example on Apple website : https://developer.apple.com/documentation/safariservices/safari_app_extensions?changes=_2&language=objc

You should not use Extension Builder anymore (accessible from Developer menu in Safari) since this is for legacy (pure JS) extensions only. So you need to get in XCode.

Last thing, but not least... Safari App Extensions, compared to Safari legacy extensions, are "a bit" more limited (for instance, you won’t be able to open the toolbar popup programmatically, just as with Chrome web-extensions actually).

Answer 2

You may refer with this link on how to convert Google Chrome Extension to Firefox or Safari extension.

There is currently a bit of manual work to be done.

https://github.com/kritollm/chrome-extension-api-for-safari-and-firefox

After I first wrote this post, I have been aware of two other projects which are very similar.

https://code.google.com/p/adblockforchrome/source/browse/trunk/port.js and

https://github.com/jetpack-labs/chrome-tailor-jetpack

Also, here's the official guide to how to convert Chrome extensions to Firefox add-on using WebExtensions.

Answer 3

If we're talking about a Safari App extension and not a legacy safari extension (deprecated in Safari v12), then my understanding is that the background script needs to be rewritten in swift. Regarding the content scripts, they are still in JS but all the messaging written with chrome API calls must be rewritten using Safari app APIs.

Answer 4

Not all things can be written in Swift. For example, I've tried call dylib from extensionHandler, but was failed.

Answer 5

Now there is an official support for this converting:

Converting a Web Extension for Safari

Answer 6

As per above, the content scripts can remain the same as the bundles you create in your Firefox and Chrome extensions. You will just need to include it in your plist. To avoid rewriting all the background logic in Swift, I used a library called JavascriptCore provided by Apple. This allows you to create a JavaScript context and pass data from the Swift background to your JavaScript background bundle.

For example: safariExtensionHandler.swift has a function called messageReceived. This function can call a global JavaScript function in your code from Swift using JavascriptCore.

Answer 7

May be it too late to share my finding, but nevertheless.

Short answer for the possibility of converting web extension to safari app extension is Yes. It definitely possible, But it's hard to do so.

I had a hard time Figuring out the best possible and minimal way to port web extension to safari app-extension.

Problems with porting Web Extension

1. Safari App-Extension doesn't offer API for tab/window management. (i.e when a tab or window is added, removed or update, unique Identifier for windows and tab)
2. Require some learning or prior experience with swift/objective -c to implementation background functionality.
3. Debugging becomes a pain point during development.

Solution

Writing some amount of swift/objective-c code is inevitable. But writing a bridge code in swift/objective C to facilitate the communication between content-script and background-script makes life easier.

• Approach 1 using bridging code Architectural Design

In the diagram, Content-script remains the same, the background-script is injected by creating a webview. Now Any message received from content-script is forward to the webView background-script. Also setup the browser extension API using evaluvateJavascript

webView.evaluateJavaScript("chrome.runtime.id=function() { return "+ extensionId + " }")

• Approach 2 : Using Electron powered browser extension

Electron JS uses web technologies like simple HTML, CSS, and JavaScript. It does not require native skills unless you want to do something advanced. It can be designed for a single browser. Its file system belongs to Node.js APIs and works on Linux, Mac OS X, Windows.

By using native node modules enables you to write in C++ and ObjectiveC (or Swift) and expose an API to node.js using v8. This gives you a lot of flexibility and power but requires the most time to develop and still being to reuse you background-script by running in electron context.

Sample Application built using this approach https://github.com/AdguardTeam/AdGuardForSafari

If you want to do Window/Tab Management in safari app extension refer WindowTabManagement

UPDATE

If you are planning to port your legacy extension with zero native code (Objective-c/swift). Please follow this repo https://github.com/avast/topee

Answer 8

You can actually do this fairly easy.

• Keep in mind you need Xcode v.12 and Safari 12 for this to work.

1. Download the .crx file from the chrome store.
   1. I used this: https://crxextractor.com
2. Unzip with terminal «unzip».
3. From terminal type xcrun safari-web-extension-converter /path/to/manifest/ and run it - enter yes when asked if swift. This should open Xcode.
4. From Xcode - Compile and run.
5. Now to activate it:
   1. Go to safari, preferences, enable dev mode.
   2. Then go to the new «develop» tab - next to bookmarks.
   3. «Allow Unsigned Extensions»
6. Go then to the preferences and extensions, and you should see your extension.