Open2024/07/05にコメント追加2

Karte Blocks

WebサイトにScript一行埋め込むだけ。

<script src="https://cdn-blocks.karte.io/{PROJECT_ID}/builder.js"></script>

ウェブサイト本来のDOMが表示される前に同期的に割り込んで、それを置換している

// DOMの変更設定
const DOM_REWRITES = [{ selector: 'body > div', html: '<div>hello</div>' }];

// DOMがロードされたときに、DOMを変更する
document.addEventListener('DOMContentLoaded', () => {
  DOM_REWRITES.forEach(({ selector, html }) => {
    const element = document.querySelector(selector);
    if (!element) return;
    element.outerHTML = html;
  });
});

Blocksの管理画面で変更DOMの設定を保存
保存のHook によって、Builder Server へサードパーティスクリプトの生成と配信のリクエストを送信
Builder Serverは、webpackを用いサードパーティスクリプトを生成し、Stroage にアップロード
CDNがStorageからスクリプトを取得して配信

tomoki

KARTE BlocksではChrome Extensionとiframe を使い、管理画面上に外部のウェブサイトをシームレスに組み込む方法を採用しています。