Convert Chrome/Firefox Extension to Safari

Hey everyone,


I have a Chrome and Firefox extension that I'm trying to port over to Safari however I'm running into a few issues.


I can't seem to find a way to run similar code to these two functions:

chrome.extension.connect (or browser.runtime.connect in Firefox)

chrome.tabs.query({active: true, currentWindow: true, url: ["http://*/*", "https://*/*"]}, function(tabs) (runs the same on firefox)

Anyone know a workaround in safari that might be useful? I've scoured the web and can't seem to find a good solution.

Answered by Frameworks Engineer in 613755022
There is a xcrun safari-web-extension-converter tool in Xcode 12 Beta to convert extensions. This is covered in Converting a Web Extension for Safari. It will also be covered later today in the Meet Safari Web Extensions WWDC session.

Can you tell me a bit more about what your extension does? What behaviors are you trying to get out of chrome.extension.connect and chrome.tabs.query?


Thanks!
Brian

According to BigSur documentation, it is now possible with Safari 14:

Support for Web Extensions is now available. Existing Chrome and Firefox extensions can be converted for Safari using xcrun safari-web-extension-converter and distributed through the App Store for use in Safari 14. (55707949)

I am still looking for that Command Line Tools...
There is a xcrun safari-web-extension-converter tool in Xcode 12 Beta to convert extensions. This is covered in Converting a Web Extension for Safari. It will also be covered later today in the Meet Safari Web Extensions WWDC session.
12
alarouche, you must (1) install the Xcode 12 beta and then (2) select it. For example, if you have installed Xcode-beta into /Applications,
Code Block bash
sudo xcode-select -s /Applications/Xcode-beta.app
After performing these two steps, then the command shown in the WWDC video
Code Block bash
xcrun safari-web-extension-converter /path/to/my/extension/folder
will work.
I don't believe safari-web-extension-converter is part of the command line tools, but as mentioned above it ships as part of Xcode 12. Its current location is Xcode-beta.app/Contents/Developer/usr/bin/safari-web-extension-converter, but xcrun should be able to find it if you have set up your developer directory correctly (you can check with xcode-select -p).
I'm using the Xcode 12 Beta and have Safari Technology Preview 14 installed. I'm on Catalina, not Big Sur (can't upgrade yet as have many tools that will probably break). When I run the xcrun command:

Code Block xcrun safari-web-extension-converter /path/to/extension/code


I get this msg:

Code Block
safari-web-extension-converter requires at least Safari 14.0 to run.
Unable to parse manifest.json at file:///path/to/extension/code


Will this run under Catalina or is Big Sur the min. OS version required to use this tool?
It will work on Catalina, but you will need to install Safari 14 for it, which is not currently available.
Safari Technology Preview 14 was made available yesterday. I have it and am using it, but still can't get the extension conversion script to work.
You can use this method as well if you are getting the error that it is unable to find the safari-web-extensions not found.

Code Block
DEVELOPER_DIR="/Applications/Xcode-beta.app/Contents/Developer/"

then run

Code Block language
export DEVELOPER_DIR

now you should be able to run the xcrun safari-web-extension-converter without trouble.

This is not working. I have Safari 14 installed on Catalina end even set it as default browser. Still getting:

Code Block
safari-web-extension-converter requires at least Safari 14.0 to run.
Unable to parse manifest.json at ...



The safari-web-extension-converter tool does not work with Safari Technology Preview (even STP 109). It requires Safari 14 beta, which is only on macOS Big Sur right now. Sorry for the inconvenience.
I have Big Sur macOS 10.16 (20A4299v), Safari Version 14.0 (16610.1.15.51.2), XCode Version 12.0 beta (12A6159) installed and I am getting the error:

xcrun safari-web-extension-converter Language-Learning-with-Netflixv4.0.0.crx
Unable to parse manifest.json at file:///Users/codrut/Downloads/Language-Learning-with-Netflix
v4.0.0.crx

xcrun safari-web-extension-converter Language-Learning-with-Netflixv4.0.0.crxUnable to parse manifest.json at file:///Users/codrut/Downloads/Language-Learning-with-Netflixv4.0.0.crx

You need to expand the CRX file (which is just a ZIP archive) into a folder first. The safari-web-extension-converter tool expects a folder path.
In my case it seems the developer included ^M characters in manifest.json. I have extracted the crx file.
Thanks for the tool and I am able to fully create a valid xcode project with this tool. Bingo!

But if we take reference for SeaCreator, when we tap on the extension icon, it turns into blue to indicate the extension is active and whenever any page is rendered, all fish names will be automatically replaced with emojis.

What I need is I want the replace action to be executed only when I explicitly press the extension button. So, whenever I open a new webpage I must have to explicitly press extension toolbar button only then replacement should be done.

In the code I have attached, I did try few things but none help.
Code Block
//browser.runtime.addEventListener("message", handleMessage, false);
//function handleMessage(msgEvent) {
// alert('message received');
var wordReplacementMap = {"Fish": "🐠", "Shark": "🦈", "Squid": "🦑", "Whale": "🐋"};
for (var wordToReplace in wordReplacementMap) {
replace(document.body, wordToReplace, wordReplacementMap[wordToReplace]);
}
//}
//chrome.runtime.sendMessage("message");


I am always facing -> undefined browser or undefined chrome.

In my original extension project I have used node modules and AJAX also so there are lots of dependencies why I did took reference for Apple's example.

The main thing is I want to turn off automatic script injection and only execute my script code when user taps on extension button. I don't need popup - just execution on tap of button.

I have also posted Stackoverflow questions for this here -> https://stackoverflow.com/questions/62774734/safari-web-extension-injecting-script-only-when-extension-button-is-clicked

I hope I have made my point clear. Please suggest me solution on this.

Thanks.
Convert Chrome/Firefox Extension to Safari
 
 
Q