Search code examples
f#fable

How to use the window.chrome API in fable

I'm going to develop a Chrome extension using fable+feliz,

But when I'm coding, I found IDE does not recognize the window.chrome API, which is very important to Chrome extension developing enter image description here

So after some searching I installed the npm package @types/chrome

enter image description here

And use ts2fable translate the .d.ts file into a fs typefile.

enter image description here

IDE tells me that this file has a lot of errors, and I fixed some of them, but still remain a lot. enter image description here

so I just comment these problem code.

However, I still don't know how to use the chromeAPI in the .fs file and bind it properly to the corresponding js object, because what I tried to get above is the type definition Chrome, which is not window.chrome , not an instance. I don't think I can privately declare this instance instead of window.chrome, because then I might be calling my own chrome API instead of the Chrome API bound to the browser.

Solution

  • At the API boundary it's usually easiest to use Fable Emit to "cheat" the type system and get you started. Untested but something like:

    module ChromeAPI = 
    [<Emit("window.chrome")>]
    let chrome : IChromeAPI = jsNative