The latest Bike 2 preview adds DOMScripts.
They allow extensions to load scripts in a WebView. These loaded “DOMScripts” have full access to the WebView’s DOM/HTML and they can also communicate back to the extension that installed them by posting messages.
I played with this a lot yesterday and had some fun. I have added (not yet released) selection events, and that’s allowed me to build a synonyms view in the inspector: Select a word in Bike and then see a list of synonyms in the inspector. I’ve wanted this kind of thing for a long time!
With that said, I haven’t done all that much web programming, and I have some questions.
Questions
Network access
Currently if you give an extension permission to load a DOMScript then you are giving them full network access since they can fetch from the browser context. So UI permission is tied to network access.
I am thinking of disabling the WebView network (just use WebView for display) and instead will add a fetch function to the extension script context. This will separate the fetch permission from the DOMScript permission. The extension will just need to postMessage the results to the UI for rendering… I think this is the right design, but thoughts? Any reason you would need network access directly in the WKWebView?
Include standard libraries?
Should I bundle common API’s with Bike and make them available in the WebView. For example React or D3js? Other libraries I should consider? The benefit is it could make copy/paste sharing of interesting scripts much easier. The downside is overtime things will need update and maybe break old scripts.
Related, should I adapt React (tsx) as the standard way for extensions to build Bike UI? or should plain DOM be the standard way for extensions? I’m leaning toward standard DOM, because I don’t really understand react at a deep level. While at the same time noticing that react examples do look very nice and clean.
Generally Bike’s extension UI needs are simple, but it might be nice having a standard way to do things. And I will want to build out a tab view and accordion style sections, etc.
At the moment I am leaning towards including D3js… I think we could have a lot of nice outline visualizations with little code.
I’m looking forward to (interactive) WebView presentation of nested text !
First questions in response to yours:
- (network) might it look feasible for graphic files (linked to in Bike paragraphs, for example) to be fetched for display in the WebView ? Would that require full network access ? I’m thinking of contexts in which one is presenting ideas and arguments to others.
- (standard libraries)
D3js can be very powerful and pleasing – in the context of slightly longer paragraphs (say at least 8 or 10 words rather than 1), have you seen a way of getting text to wrap within a bounded D3js rectangle ? (My impression of D3js TreeViews is that they work most easily with label of a single word or two)React – Perhaps others here have more experience with it than I do ? I may just have a bias towards vanilla and minimised dependencies 
I think so, though not possible yet.
After a big of searching I think I have found the proper lever to block all external network request from a WKWebView… while still allowing file:// requests. This is good news because it means these extensions can be relatively safe. They can show a view without requiring network access.
I do think extensions should be able to load resources from:
- The extension’s folder
- In the future, when supported, a document bundle format
That will require a little connection work on my part, but I think will fit well into the model. I don’t know that it will be possible to whitelist fetching of urls that are in the document. Maybe, but would require more thinking.
There is an escape hatch here which is that network fetch is allowed in main context when extension has that “fetch” permission. I’m releasing an update that shows how this works in a few min… but that fetch API should be able to reach any URL and then send the data back to web view.
Hope that makes sense. The issue is that I want to separate fetch permission from domScript permission.
No, I basically know nothing when it comes to D3js except the it seems a standard, and the results are pretty, and it seems like it would be fun to map outlines into that sort of view.
The most obvious case would be using the model sheet api. See your outline in a different form, click on a node/row, and that dismisses the sheet and you go back to standard Bike.
If things don’t fit well then I think it’s up to the extension. In my mind trimming text makes sense here… at least for the use I was thinking of it would be mostly fun big picture and navigation, not reading full text.
1 Like