Gyazoにuploadした画像URLをコピペするPage Menu
2023-02-17 21:15:59 deprecated
CSPが壊れたFirefoxが手元になくなったので、どこからも使えなくなった
気が向いたらTamperMonkey依存のを作るかも
移動した
PageMenuから直接GyazoのURLを取得できる
いちいちタブを開く必要がなくなる
使い方
2. 以下を自分のページに貼り付ける
jsimport {GYAZO_ACCESS_TOKEN} from '/api/code/your-private-project/GYAZO_ACCESS_TOKEN/auth.js';
import {addGyazoMenu} from '/api/code/takker/Gyazoにuploadした画像URLをコピペするPage_Menu/script.js';
addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum: 10}); GYAZO_ACCESS_TOKEN に1.で取得したAccess Tokenを入れるAccess Tokenは外部に漏れるとまずいので、private projectのコードブロックに貼り付けて、そこから読み込むことを推奨する
private projectのコードブロックなら、参加しているuser以外読み込むことができない
your-private-project には自分のprivate projectの名前を入れるyour-private-project/GYAZO_ACCESS_TOKEN/auth.jsexport const GYAZO_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;既知の問題
mobile版で動かない？
Loading... まではでるが、そこから何も変化しない2021-01-02 11:05:34 エラーメッセージ
>Uncaught (in promise) ReferenceError: timer is not defined
> at loadGyazoImages (script.js:35)
ホントだ。
try の中で timer を定義しちゃったから、 catch で使えないんだん？てことはAPI叩くのに失敗しているのか？
2021-01-02 11:08:31
catch 内部でのエラー内容>index.js:49 Refused to connect tohttps://api.gyazo.com/api/images?access_token=...&per_page=10because it violates the following Content Security Policy directive:connect-src 'self' i.gyazo.com wss://scrapbox.io https://upload.gyazo.com https://gyazo.com https://storage.googleapis.com https://sentry.io.
CSPに引っかかった？
じゃあなんでPC版FirefoxからだとAPI叩けるんだ？
browserの種類にかかわらず、mobileでは
api.gyazo.com にアクセスできないみたい流石にちぐはぐな挙動なので、報告しておいた
2021-01-05 mobileのときはOpen Gyazo page menuに切り替えることにした
script.jsimport {isMobile} from '/api/code/takker/mobile版scrapboxの判定/script.js';
const id = 'Gyazo Viewer';
export function addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum, theme = 'light'} = {}) {
if (isMobile()) {
scrapbox.PageMenu.addMenu({
title: 'Gyazo',
image: 'https://i.gyazo.com/503a911fea542532aa5aba0a88eb7b60.png',
onClick: ()=> window.open('https://gyazo.com/captures'),
});
} else {
scrapbox.PageMenu.addMenu({
title: id,
image: 'https://i.gyazo.com/503a911fea542532aa5aba0a88eb7b60.png',
onClick: () => loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}),
});
}
}
async function loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}) {
let timer = null;
try {
const promise = fetch(`https://api.gyazo.com/api/images?access_token=${GYAZO_ACCESS_TOKEN}&per_page=${imageNum}`);
// 読み込みに時間がかかるようであれば、読み込み中の表示を出す
timer = setTimeout(() => {
scrapbox.PageMenu(id).addItem({
title: 'Loading...',
image: `https://img.icons8.com/ios/180/${theme === 'dark' ? 'FFFFFF/' : ''}loading.png`,
onClick: () => {},
})},
100);
const res = await promise;
const images = await res.json();
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
images.filter(image => image.image_id !== '')
.forEach(image =>
scrapbox.PageMenu(id).addItem({
title: image.metadata.title ?? 'Untitled',
image: image.url,
onClick: () => navigator?.clipboard?.writeText?.(image.permalink_url),
})
);
} catch(e) {
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
scrapbox.PageMenu(id).addItem({
title: 'Failed to load the image list.',
image: `https://i.gyazo.com/9fb0ce04c8ce55890f1388e21f36dccc.png`,
onClick: () => {},
});
console.log('Failed to load the image list. %o',e);
}
}#2023-02-17 21:16:48
#2021-01-02 11:24:47
#2020-12-31 13:14:19