Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davedawkins/sutil-template-chromex
https://github.com/davedawkins/sutil-template-chromex
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/davedawkins/sutil-template-chromex
- Owner: davedawkins
- Created: 2021-09-28T19:23:56.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-19T11:09:27.000Z (over 1 year ago)
- Last Synced: 2024-07-02T02:38:40.300Z (2 months ago)
- Language: F#
- Size: 240 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-sutil - sutil-template-chromex - Creating a Chrome Extension in F# Using Sutil, by Dave Dawkins (Sample Apps)
README
## Creating a Chrome Extension in F# Using Sutil ##
This is the documentation for the template project found at [sutil-template-chromex](https://github.com/davedawkins/sutil-template-chromex).
Learn more about Sutil at [sutil.dev](https://sutil.dev).
This example was derived from [Getting Started with Chrome Extensions](https://developer.chrome.com/docs/extensions/mv3/getstarted/).
### Getting Started
The extension is ready-built in the `./dist` folder. Clone the repo and try it out as follows:
(By the way, these are the same instructions you'll find [here](https://developer.chrome.com/docs/extensions/mv3/getstarted/))
- In Chrome, go to `chrome://extensions`
- Click `Load unpacked`
- Select the `dist` folder
If all is well, you'll be able test the extension as follows:
### Developing the Extension
- Clone the repo
- Initialize the environment
```bash
$ npm install
$ dotnet tool restore
```
- Developing the UI
You can treat `Popup.fs` as a regular (Sutil) web application. In fact, you don't *have* to use Sutil here at all. You could just use the `Browser.Dom` APIs and go on a `document.createElement(..)` bender, though I feel you'll have more fun and an easier time using Sutil :-)
The modules `Background.fs` and `Popup.fs` do play different roles in the extension though, and this is best explained by the Chrome documentation. You'll see that `Background.fs` is where we can catch the `onInstalled` event.
- To build
```
$ npm run build
```
Upon each build, go back to the `chrome://extensions` page and `refresh` the extension.
### Console Output
Output from `Background.fs` will be visible in the developer window accessible from `Inspect views:
service worker` link, found on the `chrome://extensions` page.
Output from `Popup.fs` will be visible from the developer window accessible when you `right-click -> Inspect` inside the window created from `popup.html` (i.e., where the button appears when you activate the extension)
### Browser APIs
Currently, there is minimal support for the `chrome.storage.*` and `chrome.runtime.*` etc APIs. This will be a work-in-progress, but it's fairly easy to move your project forward in the meantime, thanks to Fable's awesome interop capabilities.
### Support for other Browsers
Currently, Sutil is exporting a `Chrome.*` API, but there is a polyfill that will allow me to unify this to a more useful `browser.*` API, and then it should be possible to create extensions for other browsers too.