How to package for safari with bepp in plasmo framework

sir-kokabi commented 1 month ago

I've built an extension for chrome in plasmo framework: plasmo build --target chrome-mv3 plasmo build --target safari-mv3

Plasmo also provides the option for targeting safari-mv3. However, I am uncertain about its significance since it requires additional steps on macOS. Check the related issue for more details. 🤔

How can I use your GitHub Action to build my Chrome extension for Safari? I would appreciate it if you could fork this sample repository and update the GitHub Action so that it builds the Safari version, then push back the installable package (for Safari) to the repo. Unfortunately, I don't have a Mac, and I'm unable to test anything related to this.

It's not clear why Apple is causing challenges for developers on other platforms, considering that the expansion of the Safari ecosystem would ultimately be advantageous for them. It's confusing that they're impeding their own progress – it's akin to shooting themselves in the foot! 😄

angelespejo commented 1 month ago

Amigo, thank you for opening the issue.

Don't worry about the Mac, the idea of the action is that users who don't have macOS can still build extensions for Safari. However, I must mention that to package Safari extensions, bepp makes use of xcrun safari-web-extension-converter (read more) and in my experience, this doesn't always result in a perfect conversion, especially for complex extensions. That's why building Safari extensions with bepp is marked as experimental.

Regarding your question, I've been checking the action and there were some issues preventing correct builds. I'm working on resolving these issues, and I'll notify you soon on how to package the extensions correctly.

Thank you for your feedback.

sir-kokabi commented 1 month ago

Good, but I haven't succussed to use bepp yet to check for any bugs. 😉

angelespejo commented 1 month ago

BEPP v1.1.0 is out and fixes the issue of converting from Chrome to Safari during the GitHub action process.

You can see how this action is executed in the pull request. view

How to upload your extensions to the GitHub releases section with GH Actions and BEPP

Example to upload releases of extensions already packaged with bepp:

`.github/workflows/release.yml`

name: Release Extensions

on:
  workflow_dispatch:

jobs:
  build:
    name: Build extensions with bepp
    runs-on: macos-13 # Must be macOS for Safari extension build
    steps:
      - name: 🛎 Checkout
        uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Get manifest.json version
        id: manifest
        run: |
          VERSION=$(jq -r '.version' chrome-mv3-prod/manifest.json)
          echo "Version read from manifest.json: $VERSION"
          echo "version=$VERSION" >> $GITHUB_OUTPUT

      ##########################################################################################
      # Build extensions with bepp
      # 
      # By default, the output of packaged extensions is in build/extensions
      ##########################################################################################
      - name: Build
        uses: pigeonposse/bepp@v1.1.0
        ##########################################################################################
        # For custom config file input
        # 
        # Default looks for file in workspace path bepp.config.json, bepp.config.yaml, bepp.config.toml
        # More info for config file: https:/bepp.pigeonposse.com/guide/build/config-file
        ##########################################################################################
        # with:
        #   file: './custom-bepp.config.json'

      - name: Create Release
        uses: ncipollo/release-action@v1
        with:
          tag: v${{ steps.manifest.outputs.version }}  # Use the version from manifest.json
          name: Twifiner v${{ steps.manifest.outputs.version }}  # Use the version from manifest.json
          body: |
            Twifiner Extension releases
          draft: false
          prerelease: false
          artifacts: build/extensions/*.zip # BEPP default output path
          allowUpdates: true

`./bepp.config.json`

{
    "shared": {
      "id": "Twifiner",
      "input": {
        "chromium": "./chrome-mv3-prod"
      }
    },
    "build": [
      { "type": "chrome" },
      { 
        "type": "safari", 
        "input": "./safari-mv3-prod"
      }
    ]
  }

Things to consider

As I mentioned earlier, bepp uses xcrun safari-web-extension-converter to convert Chrome to Safari. In my experience, this is not functional in practice (which is why in bepp we mark Safari as experimental), as xcrun safari-web-extension-converter may perform the conversion correctly but your extension code may not work properly due to compatibility issues with the Safari browser, and xcrun safari-web-extension-converter will not check this. So, it's important to manually check compatibility with Safari. However, in general, there are usually no problems with a standard conversion.

Our tests

bepp tests are done with an extension called super8 see repo. I do this to see if the conversion works with extensions that are somewhat more complex than usual, and the truth is that the extension in Safari works without any problems and without having to modify any code from the Chrome extension.

That is, our tests based on the super8 extension are successful, but does this mean it will happen the same with other extensions?

I will soon publish a blog on Medium explaining the Chrome-Safari conversion process with bepp and the pros and cons of Safari extensions, as well as my opinion on why Apple makes it so difficult.

Your extension

I have tested your extension in a GitHub Action and the conversion with bepp has worked correctly.

The problem is that I have tested it and the interface has not worked. I checked the workflow output and bepp marked warnings at this point:

Why doesn't the interface work? I don't know, but it's probably due to compatibility issues with your code and Safari (?)

Solutions

Several solutions come to mind:

Manually test in a macOS environment would be the most practical, although complicated if you don't have macOS.
Mark your Safari extension as experimental or beta would be a temporary solution. This can be done, for example, by changing the id or filename from the bepp config file. Example:

{
    "shared": {
      "id": "Twifiner",
      "input": {
        "chromium": "./chrome-mv3-prod"
      }
    },
    "build": [
      { "type": "chrome" },
      { 
        "type": "safari", 
        "id": "Twifiner-beta",
        "input": "./safari-mv3-prod"
      }
    ]
  }

What do you think? What would be the best way to solve this?

Conclusions

If you want to convert to Safari, the most practical way I can think of is to use bepp locally to easily convert and manually check if the extension works as expected, and if not, gradually correct any errors.

These are some of my conclusions, obviously open to discussion, as I'm sure I'm missing something 😎

Useful Links

If you have any feedback on bepp, don't hesitate to share it, whether it's possible improvements or bug reports, difficulties, etc.

Muchas gracias por comentar! 🐦🌈

sir-kokabi commented 1 month ago

Thanks for breaking it down so well! 🙏 I'll definitely keep your suggestions in mind.

sir-kokabi commented 1 month ago

https://forums.developer.apple.com/forums/thread/712328

angelespejo commented 1 month ago

https://forums.developer.apple.com/forums/thread/712328

The comment on the post indicates that the warning appears when running on systems with Safari versions lower than 15.4, but according to the GitHub Actions documentation, the oldest macOS runner uses Safari 17.3 which you can see here. I don't understand why this warning is occurring, but honestly, I don't think it's the problem.

Perhaps the extension's failure in Safari is due to some code incompatibility with the Safari browser itself, rather than being caused by the Chrome-to-Safari conversion by Bepp.

Attached is an image of the extension active in Safari.

The main issue I notice is that when the extension is active, it blocks access to Twitter.

Testing if everything works correctly without access to a macOS environment will likely be a challenge.

Even though it may not be related to Bepp, I'll still try to verify it myself from my own machine. If I find a solution, I'll submit a pull request to the project, and if a solution is found that could help in the future, I'll comment it here.

Thanks again!

sir-kokabi commented 1 month ago

Testing if everything works correctly without access to a macOS environment will likely be a challenge.

Yes it is really challenging.

Even though it may not be related to Bepp, I'll still try to verify it myself from my own machine. If I find a solution, I'll submit a pull request to the project, and if a solution is found that could help in the future, I'll comment it here.

Thank you.

pigeonposse / bepp