UserScriptでPreactを使う試み

コピペ用

code:import

code:style.css

@import "/api/code/pokutuna/UserScriptでPreactを使う試み/style.css";

code:script.js

import "/api/code/pokutuna/UserScriptでPreactを使う試み/script.js";

---.icon

Content-Security-Policy 的に scrapbox にライブラリをコピペして使う

code:csp

あとで気づいたけど cdnjs.cloudflare.com で umd 版配ってるから実はこれみたらいける?

ブラウザの ES import は CORS ヘッダ必要なのでだめ

scrapbox の UserScript は以下の属性値

code:userscript.html

<script async="" src="/api/code/pokutuna/pokutuna/script.js?1593591296528" type="module" crossorigin="use-credentials" id="user-script"></script>

minify されてて名前かぶるし preact-hooks は preact を import しているからそのままの構造でもってきた

なんか自分でそういうビルド作って scrapbox に置いたほうが良さそう

JSX なしで書くのなんか頭を使う

htm の README の最初の画像がちょうどいい感じで偉い

code:style.css

.preact-component {

position: fixed;

left: 0;

bottom: 0;

z-index: 9999;

}

code:script.js

import { h, Component, render } from '/api/code/pokutuna/preact@10.4.4/script.js';

import { useState } from '/api/code/pokutuna/preact-hooks@10.4.4/script.js';

import htm from '/api/code/pokutuna/htm@3.0.4/script.js';

const html = htm.bind(h);

const Counter = () => {

}

// あらゆるページで出ると邪魔なので

if (document.title.includes('UserScript')) {

const app = h(Counter, null, null);

render(app, document.body);

}