Browser extension that demonstrates the Web Annotation Discovery mechanism: subscribe to people’s annotation collections/‘feeds’, to see their notes on the web; and create & publish annotations yourself.

web-annotation-discovery-we.../src/content_script/ index.tsx
48 lines
1.4 KiB

  1. import '../webextension-polyfill';
  2. import { RpcServer } from 'webextension-rpc';
  3. import { h, render } from 'preact';
  4. import classes from './index.module.scss';
  5. import { App } from './App';
  6. import { discoverAnnotationsEmbeddedAsJSONLD } from './discovery';
  7. import { annotateSelection } from './AnnotationCreationHelper';
  8. export const contentScriptRpcServer = new RpcServer({
  9. annotateSelection,
  10. discoverAnnotationsEmbeddedAsJSONLD: async () =>
  11. discoverAnnotationsEmbeddedAsJSONLD(),
  12. // fetchJson: async (...args: Parameters<typeof fetch>) => {
  13. // const response = await fetch(...args);
  14. // let json;
  15. // try {
  16. // json = await response.json();
  17. // } catch (error) {
  18. // json = undefined;
  19. // }
  20. // const { ok, redirected, status, statusText, type, url } = response;
  21. // return {
  22. // json,
  23. // headers: response.headers.entries(),
  24. // ok,
  25. // redirected,
  26. // status,
  27. // statusText,
  28. // type,
  29. // url,
  30. // };
  31. // },
  32. });
  33. main();
  34. async function main() {
  35. const containerId = classes.container;
  36. let container = document.getElementById(containerId);
  37. if (!container) {
  38. container = document.createElement('div');
  39. // use class as id too.
  40. container.id = containerId;
  41. container.setAttribute('class', classes.container);
  42. document.body.append(container);
  43. }
  44. render(<App appContainer={container} />, container);
  45. }