Edit Visually browser extension – iteration 2

[adamziel]

🚧 A more involved description TBD 🚧

Large changes:

• Snappy loading
• WordPress, PHP, and everything needed to run the editor is now shipped with the extension.
• There's no more iframe and a modal. Instead, there's a separate editor window. Manifest v3 makes the iframe non-feasible.
• An external domain with a loopback service worker is used to work around Manifest v3 limitation
• Extension service worker is involved, which breaks Firefox compat (not sure about Safari)

cc @dmsnell

[brandonpayton]

I made a note to poke at this tomorrow. I'd love to see more of what you've done here.

Manifest v3 makes the iframe non-feasible.
An external domain with a loopback service worker is used to work around Manifest v3 limitation

What is this limitation?

Extension service worker is involved, which breaks Firefox compat (not sure about Safari)

It is probably possible to use the older background page approach for a manifest v3 Firefox extension, once you are happy with the Chrome version.

Also, IIRC, the offscreen document being used here was created to fill a gap that was left when Chrome switched away from background pages, so I wonder whether the background page in Firefox could serve in the same way. (Or perhaps Firefox also has support for offscreen documents).

[adamziel]

What is this limitation?

@brandonpayton tl;dr, you either can't eval() and use inline <script> tags on content served from the extension, or, when using a "sandbox" page, you can't have a service worker.

A fuller answer is on these diagrams I drawn while exploring different avenues:

---

---

[adamziel]

This worked for me for eval and including custom scripts:

HTML:

<iframe src="chrome-extension://hjaafimkfjnfdabpmpcilmpiemgmjcgb/sandbox-page.html?abc" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

Manifest.json:

  "sandbox": {
    "pages": [
      "sandboxed-page.html"
    ]
  },
  "web_accessible_resources": [
    {
      "resources": [ "sandboxed-page.html" ],
      "matches": [ "<all_urls>" ]
    }
  ],
  "content_security_policy": {
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self' https://playground.wordpress.net/; frame-src 'self' https://playground.wordpress.net/;"
  },

---

Another idea is to postMessage to an external iframe that runs the code and responds with the results. For that, this setup worked for me:

Manifest.json:

    "content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self';child-src 'self' https://playground.wordpress.net/; frame-src 'self' https://playground.wordpress.net/;"
    },
    "web_accessible_resources": [
        {
            "resources": ["regular-extension-page.html"],
            "matches": ["<all_urls>"]
        }
    ],

regular-extension-page.html:

<iframe
    src="https://playground.wordpress.net/"
    sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
></iframe>