Issues when connecting to a local plugin

[MCarlomagno]

Description

I have faced a few issues while testing integrating the plugin from local host:

1. Client connection using allowOrigins optional param.
2. Remix Theme (css styles) injection into my Iframe.

Note: These issues seemed to be persistent across different UI frameworks, I tried next, sveltekit & svelte

1. Client connection

The initial code I used to connect the client was:

    const plugin = new PluginClient({allowOrigins: '*'}); // * wildcard policy
    const client = createClient(plugin);

Assuming that the plugin followed allow origin policies standards. But that didn't work.

So then I tried using http://localhost:<port> instead.

    const plugin = new PluginClient({allowOrigins: 'http://localhost:<port>'});

That didn't work either, so after inspecting the codebase I found some inconsistent logic around allowOrigins options:

1. When the allowOrigins is a single string, like http://localhost:<port> the logic is to fetch that URL and compare the result response with origin using json format, so the response after calling fetch(http://localhost:<port>) should be ['http://localhost:<port>'] in order to make it work. Which to me is confusing.
   I expected this to be a direct comparation origin === 'http://localhost:<port>'.
2. When the value is an array, it checks that the origin matches with some of the values provided, which at first makes sense, but the origin received by the function is not the local origin, but the remix url instead. So setting:

    const plugin = new PluginClient({allowOrigins: ['http://localhost:<port>']});

didn't work either.

Workaround

Instantiate the client using the remix url worked to make it work:

const plugin = new PluginClient({allowOrigins: ['https://remix.ethereum.org']});
const client = createClient(plugin);

2. Remix styles injection

Once the the first issue was solved, I had a second issue trying to load remix styles into my iframe:

  const plugin = new PluginClient({allowOrigins: ['https://remix.ethereum.org']});
  const client = createClient(plugin);

So I after trying several options with no results, I started to debug the plugin code itself, and I found the following issue:

In line 20, when removing the protocol from the URL, the logic defaults to http, which throws an internal error in the UI saying something like http is not allowed. So the theme was not loading at all.

Workaround

Copy the listenOnThemeChanged and setTheme into my own project and fix the line

cssLink.setAttribute('href', theme.url!.replace(/^http:/,"").replace(/^https:/,""))

fixed:

cssLink.setAttribute('href', theme.url!)

And then call the listenOnThemeChanged after instantiating the plugin, final code:

    const plugin = new PluginClient({allowOrigins: ['https://remix.ethereum.org']});
    const client = createClient(plugin);
    listenOnThemeChanged(client);

By default, the cssLink is using https protocol which works without any need of modification.