fujjima / hypothesis-extension Goto Github PK

概要

• yarnのライブラリからmarkdownエディタを選定する
• chrome拡張内で使ってみる

候補

• https://github.com/mixmark-io/turndown
• https://zenn.dev/hayato94087/articles/649e8d817165d8#markdown%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

editor

• https://docs.komagata.org/5467
• https://github.com/markedjs/marked
  • 導入自体は簡単そう
  • ドキュメントと使用例が多い
  • メンテも頻繁にされていそう
• https://github.com/benweet/stackedit
  • 導入が簡単そうだが、メンテが放棄されてそう

要件

• markdownエディタはページ上に表示する
• チェックボックスをサポートしている
• テキストエリアの拡大縮小は可能
• サーバーから送信されたテキストがあってもmarkdownとして変換し表示できる

設計メモ

• エディタ部分は普通のテキストエリアで、プレビュー時のみmarkdown形式に表示するだけでいいのは

• エディタ描画のタイミングについて

  • 該当の要素がDOM内に追加されたタイミング時
    • chrome拡張のapiでDOMの変更を検知できるものがあるかどうか
      • MutaionEvent系のAPIは廃止されているっぽい
        • https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent
        • https://developer.chrome.com/blog/mutation-events-deprecation/
      • MutationObserverを使うっぽい
        • https://neos21.net/blog/2020/10/04-02.html

• 描画方法について

  • ドキュメントに対する変更を検知し、指定部分のテキストエリアの置き換えを行う
  • write、previewの切り替えでテキストエリアと変換内容の切り替えを行う
  • チェックボックスの変更はプレビュー部分からもできるようにしたい

調査メモ

• hypothesisによって追加された部分は基本的に Shadow Dom属性を持つ
  • そのため、内部の要素の取得には以下のようにして .shadowRootを使う必要がある。

  const shadowRoot = document.querySelector('hypothesis-sidebar').shadowRoot;

• 上記でhypothesisによって追加された要素でも取得すること自体は可能
  • ただし、内部の要素を書き換えようとすると「Uncaught DOMException: Blocked a frame with origin {URL} from accessing a cross-origin frame.」が表示される
    • postMessageでの通信等をするためには、両ドメインのサイトが postMessage を実装している必要があるので、実現が難しそう
• そのため、クロスドメインでのiframe内の要素の変更等は厳しそう
• 上記理由から、クライアント側の実装を変更する方針にする
  • 開発ドキュメント
  • 対象レポジトリ