{"id":13398591,"url":"https://github.com/davedawkins/sutil-template-chromex","last_synced_at":"2025-04-09T00:35:58.954Z","repository":{"id":133632549,"uuid":"411412330","full_name":"davedawkins/sutil-template-chromex","owner":"davedawkins","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-19T11:09:27.000Z","size":246,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T10:50:22.365Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davedawkins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-09-28T19:23:56.000Z","updated_at":"2023-01-30T17:34:56.000Z","dependencies_parsed_at":"2024-01-15T22:44:37.006Z","dependency_job_id":"b8d3ac63-0a2d-442e-bb18-cd571a2752d9","html_url":"https://github.com/davedawkins/sutil-template-chromex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedawkins%2Fsutil-template-chromex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedawkins%2Fsutil-template-chromex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedawkins%2Fsutil-template-chromex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedawkins%2Fsutil-template-chromex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davedawkins","download_url":"https://codeload.github.com/davedawkins/sutil-template-chromex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247951693,"owners_count":21023770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:28.989Z","updated_at":"2025-04-09T00:35:58.932Z","avatar_url":"https://github.com/davedawkins.png","language":"F#","funding_links":[],"categories":["Sample Apps"],"sub_categories":[],"readme":"## Creating a Chrome Extension in F# Using Sutil ##\n\nThis is the documentation for the template project found at [sutil-template-chromex](https://github.com/davedawkins/sutil-template-chromex).\n\nLearn more about Sutil at [sutil.dev](https://sutil.dev).\n\nThis example was derived from [Getting Started with Chrome Extensions](https://developer.chrome.com/docs/extensions/mv3/getstarted/).\n\n### Getting Started\n\nThe extension is ready-built in the `./dist` folder. Clone the repo and try it out as follows:\n\n(By the way, these are the same instructions you'll find [here](https://developer.chrome.com/docs/extensions/mv3/getstarted/))\n\n- In Chrome, go to `chrome://extensions`\n- Click `Load unpacked`\n- Select the `dist` folder\n\nIf all is well, you'll be able test the extension as follows:\n\n![Sutil Chrome Extension](https://user-images.githubusercontent.com/285421/135159208-eaaa6fbc-7611-4a9f-94a5-53135e191f89.gif)\n\n### Developing the Extension\n\n- Clone the repo\n\n- Initialize the environment\n\n```bash\n$ npm install\n$ dotnet tool restore\n```\n\n- Developing the UI\n\nYou 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 :-)\n\nThe 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.\n\n- To build\n\n```\n$ npm run build\n```\n\nUpon each build, go back to the `chrome://extensions` page and `refresh` the extension.\n\n\u003cimg width=\"539\" alt=\"image\" src=\"https://user-images.githubusercontent.com/285421/135159835-bd6ec235-612f-4d2f-a72b-0a07466338d4.png\"\u003e\n\n### Console Output\n\nOutput from `Background.fs` will be visible in the developer window accessible from `Inspect views:\nservice worker` link, found on the `chrome://extensions` page.\n\nOutput from `Popup.fs` will be visible from the developer window accessible when you `right-click -\u003e Inspect` inside the window created from `popup.html` (i.e., where the button appears when you activate the extension)\n\n### Browser APIs\n\nCurrently, 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.\n\n### Support for other Browsers\n\nCurrently, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavedawkins%2Fsutil-template-chromex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavedawkins%2Fsutil-template-chromex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavedawkins%2Fsutil-template-chromex/lists"}