Initial steps towards Chrome support

[bovine3dom]

Build using yarn run build and then eval (yarn bin)/webpack --browser chrome. Load into chrome://extensions by toggling Developer Mode and then 'Load unpacked' the build/ directory.

What works:

• the options page (insofar as it appears)

• simple commands on the options page (e.g. j)

What doesn't work:

• our iframe is loaded into other pages but we don't capture keyevents

• new tab page (doesn't show but commandline does work)

• most ex-commands on the options page (we often hit errors due to using Firefox features that aren't in Chrome)

• styling on the command line

We clearly need a wrapper for the browser API that fails more gracefully where something isn't available / have some wrapper that allows us to mark a function call as non-essential (e.g. tabopen automatic container support, open browser.search support).

---

Related #1619. Pinging @saulrh as he expressed some interest in this.

[MatiasStorm]

I have been working on making the changes in the dolladolla work with the current state of the master branch. But I'm stuck on a problem...
I'm trying to import @webcomponents/custom-elements polyfil to replace customElements when using chrome, however i can't get webpack to import it correctly.

I have tried:

plugins.push(
     new webpack.ProvidePlugin({
            browser: 'webextension-polyfill-for-webpack',
            customElements: '@webcomponents/custom-elements'
      })
)

Which imports something, but i get an error saying the define method is not defied.

I have also tried this example mentioned in this issue but couldn't get it to work.

My current solution is just to import it in the finding.ts file which is the only place customElements is refrenced:

import "@webcomponents/custom-elements";
customElements.define("find-highlight", FindHighlight, { extends: "span" })

I know this is not ideal, but i can't get it to work with webpack and i have spent way to much time on this so i could use some help, if you know a solution @bovine3dom?

My changes are on my chrome-port branch.

[bovine3dom]

As far as I can tell, customElements is supported by Chrome out of the box. Have you tried window.customElements instead? (Edit: I've just checked on my phone - on Android, Chrome has customElements defined with no window necessary, so the problem must lie elsewhere).

I don't know what you're doing wrong with webpack - I haven't had to touch it much myself. I can look into it if you get really stuck.

I think this hits at a deeper issue, however: Tridactyl shouldn't break just because find mode doesn't work. Find mode should only be able to break find mode : )

I think a port to Chrome needs to do two fundamental things:

• graceful failure when an API isn't available. We're never going to get 100% compatibility between the browsers. This will help with supporting multiple versions of browsers at once too.
• automated testing so that any regressions can be spotted.

I think you might be getting a little ahead of yourself by trying to fix find mode :)

[glacambre]

I'd recommend not wasting too much energy on `find`, you can wrap the customElements.define call in a try/catch block for now and see if there are other problems. Since this is the only place where they are used we can just go back to creating elements manually with document.createElement if we want to.

[bovine3dom]

NB: using awesome-typescript-loader in this PR wasn't a conscious choice - it's just what we used in Tridactyl at the time. It isn't maintained so we should avoid using it. In #1914 we switched Tridactyl to ts-loader.

[saulrh]

I have also tried this example mentioned in this issue but couldn't get it to work.

I wouldn't be surprised if that example implementation has simply stopped working since it was posted. It has all of the hallmarks of a kludgy prototype with rough edges that'd break if you breathed on it. Particularly given that the bug has had no movement since 2019. I think that resolving that whole issue is outside the scope of this porting effort.

My current solution is just to import it in the finding.ts file which is the only place customElements is refrenced:

That feels reasonable to me, as long as there's a comment in the code documenting that it's a workaround. For this I personally tend toward TODO comments with links to discussions on PRs and issues.

[MatiasStorm]

Thanks for all of your help!
The customElements was the only issue hindering tridactyl from running in chrome.
I have made a conditional import of the customElements-polyfill and made a few more yarn commands for building and running tridactyl in chrome.

I will now try to find all of the places where tridactyl fails in chrome and make issues for them. I will also start looking at the tests, haven't look at them yet so it's probably gonna take me a few days to understand how everything works.