Lolly URL Screenshot 拡張機能を使うと、web アプリはブラウザの中から任意の Web ページをスクリーンショットできます。これがない場合、URL のキャプチャにはデスクトップアプリが必要です - ブラウザページはそれ単体では他サイトのピクセルを読み取れません。拡張機能はそれができ、デスクトップアプリと同じキャプチャを使用します。
同じ仕組みで、ほかに2つの役割も果たします。画像スロットに貼り付けた Web アドレスを、そのページのスクリーンショットに変えられます(このページをスクリーンショット)。また、指定した1つのページを読み取り、Brand Studio が稼働中の Web サイトからブランドを抽出できるようにします。どのリクエストも、拡張機能での承認を待ちます。
Chromium ベースのブラウザで動作します: Chrome、Edge、Brave、Arc、Opera - Chrome 111 以降。
インストールされるまでの間も URL Screenshot は開くのでショットを作成できますが、ツールのコントロール上部の注記に不足しているものが表示されます。
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KB自分で確認する署名済みファイルを取得
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KB自分で確認する署名済みファイルを取得
待っている間もすべてのコントロールはライブです: 対象 URL、スクロール深度、待機時間、クロップの内側マージン、再配色。ホストが必要なのはキャプチャそのものだけです。
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KB自分で確認する署名済みファイルを取得
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KB自分で確認する署名済みファイルを取得
インストール
Chrome ウェブストアから
近日公開。 公開されればワンクリックでインストールし、Lolly を再読み込みするだけです。
自分で読み込む(開発者向け)
拡張機能はリポジトリ内の shells/chrome-extension/ にあります。このフォルダは本番用ビルドで、https://lolly.tools の Lolly でのみ動作します。
chrome://extensionsを開きます。- 右上の デベロッパーモード をオンにします。
- パッケージ化されていない拡張機能を読み込む をクリックし、
shells/chrome-extension/フォルダを選択します。 - Lolly を再読み込みします - これで URL Screenshot がブラウザで動作します。
ローカルの開発サーバーを使う場合は、pnpm run pack:chrome-extension:dev を実行し、代わりに dist/chrome-extension-dev を読み込みます。このパッケージは http://localhost:5173 も受け付け、名前に Development が付きます。
仕組み
- 小さなスクリプトが拡張機能の存在を Lolly に伝えるため、URL Screenshot は追加の設定なしでキャプチャを保存できます。
- すべてのリクエストをあなたが承認します。Lolly が求めると、拡張機能は専用の Approve page request ウィンドウを開き、リクエスト元のサイト、スクリーンショットとページの内容のどちらを求めているか、そしてページのアドレスを表示します。Approve once を押すまで、何も読み取られません。Cancel を押すか、ウィンドウを閉じると、リクエストは終了します。
- あるサイトのリクエストを初めて承認すると、Chrome が、拡張機能にそのサイトへのアクセスを許可するかどうかも尋ねます。一度許可すると Chrome はそのアクセスを保持しますが、以降のリクエストもそのたびに Approve once が必要です。
- 承認は1回のリクエストにだけ有効で、30秒で期限切れになります。待機中または実行中にできるリクエストは同時に1つだけで、承認済みのリクエストは55秒で停止します。Lolly のページが閉じたり遷移したりした場合や、対象ページが別のサイトに移動した場合、リクエストはキャンセルされます。
- 承認すると、拡張機能は対象ページをバックグラウンドタブで開き、DevTools Protocol 経由でキャプチャし(デスクトップアプリが使うのと同じ
Page.captureScreenshot)、その後タブを閉じて、リクエストした Lolly タブに画像を返します。 - すべてあなたのブラウザ内、あなたのネットワーク上で完結するため、
localhostや社内サイトのキャプチャも動作します。ページはあなたのブラウザセッションで読み込まれるので、ログイン済みのページでは、結果に非公開の情報が含まれることがあります。キャプチャ自体はどこにもアップロードされません。発生するネットワーク通信は、あなたのブラウザ自身が指定されたページを読み込むものだけです。
キャプチャが実行されている間、一時タブに 「…このブラウザのデバッグを開始しました」 というバナーが一瞬表示されることがあります。これは DevTools Protocol が動作している証で、ショットが完了すると自動的に消えます。
Brand Studio のためにサイトを読み取る
Brand Studio の Website ソースは、すでにお持ちのサイトからブランドを作成します。Chromium 上ではこの拡張機能が読み取りを行い、デスクトップアプリではネイティブの fetch が同じ役割を果たし、拡張機能のない通常のブラウザではそのタイル自体が表示されません。
押したときに起こること:
- 1つのアドレス、1つのページ。承認すると、拡張機能は同種のバックグラウンドタブでそれを開き、レンダリングされたマークアップ、スタイルシートのテキスト、いくつかのアイコンとロゴ画像を読み取り、タブを閉じます。リンクをたどることも、クロールすることもありません。
- 他所でホストされているスタイルシート(CDN、フォントサービスなど)も取得されます。ページの色や書体はそこに含まれているためです。クロスオリジンのリクエストはあなたの Cookie なしで送られ、同一オリジンのリクエストはページ自体と同じように Cookie を使用します。
- すべてに上限が設定されています - シート、画像、バイト数それぞれに上限があり - 悪意のあるページや壊れたページでもハングせず、部分的な情報を返します。
- バイト列はリクエスト元の Lolly タブにそのまま返されます。色、書体、ロゴへの解析はあなたのデバイス上で行われ、何もアップロードされません。
アドレスを貼り付けるだけではフィールドが埋まるだけです。読み取りを開始して Approve once を押すまで、何も読み取られません。
インストール後
Lolly タブを再読み込みしてください。「拡張機能を入手」というプロンプトが消え、URL Screenshot(ユーティリティ内)でキャプチャをファイルに保存でき、このツールを Batch モードでも利用できるようになります。
権限
manifest.json は4つの権限を宣言しており、サイトへのアクセスは1サイトずつ求めます。
debugger- DevTools Protocol を通じてバックグラウンドタブを操作します。スクリーンショットを撮るために必要です。tabs- 一時的なバックグラウンドタブを開いて後で閉じ、承認してから Lolly のページも対象ページも移動していないことを確認します。scripting- Brand Studio の Website ソースのために、指定されたサイト内で1ページ読み取り用のスクリプトを実行します。storage- 開いたタブの id をセッションストレージにのみ記録し、ブラウザが読み取りの途中で拡張機能をサスペンドした場合でもタブが確実に閉じられるようにします。次回起動時にクリアされ、あなたに関する情報は何も保存されません。optional_host_permissions: ["http:///", "https:///"]- サイトへのアクセスで、インストール時には付与されません。Approve once を押すと、拡張機能は、そのリクエストの1つのサイトへのアクセスを Chrome に求め、Chrome は各サイトについて初回にあなたへ確認します。
拡張機能はあなたが承認した単一のページしか読み取らず、あなたの閲覧データを読み取ったり送信したりすることはありません - どこにも何もアップロードされません。
マニフェストには minimum_chrome_version: 111 も設定されています。現在のバージョンは 0.4.0 です。
トラブルシューティング
- まだ「拡張機能を入手」と表示される? Lolly タブを再読み込みしてください - 検出はページ読み込み時に行われます。
- このサイトで何も起こらない? 拡張機能が動作するのは
https://lolly.toolsだけで、開発用パッケージではhttp://localhost:5173も対象です。Lolly のセルフホスト版など別のオリジンでは、そのオリジンをmanifest.jsonとpolicy.jsの両方に記載した、別の拡張機能ビルドが必要です。マニフェストを編集するだけでは、もう動作しません。 - キャプチャが失敗する? URL に到達可能で
http://またはhttps://から始まっていることを確認してください。自動キャプチャを積極的にブロックするページもあります。Cancel を押した場合、承認ウィンドウを閉じた場合、または30秒以上待った場合は、キャプチャをやり直してください。