Lolly URL Screenshot 拡張機能を使うと、web アプリはブラウザの中から任意の Web ページをスクリーンショットできます。これがない場合、URL のキャプチャにはデスクトップアプリが必要です - ブラウザページはそれ単体では他サイトのピクセルを読み取れません。拡張機能はそれができ、デスクトップアプリと同じキャプチャを使用します。
同じ仕組みでもう1つの役割も果たします。指定した1つのページを読み取り、Brand Studioが稼働中のWebサイトからブランドを抽出できるようにするというものです。どちらも以下で説明します。
Chromium ベースのブラウザで動作します: Chrome、Edge、Brave、Arc、Opera - Chrome 111 以降。
インストールされるまでの間も URL Screenshot は開くのでショットを作成できますが、ツールのコントロール上部の注記に不足しているものが表示されます。
signed by Lollyvector SVG自分で確認するGet the signed file4 paths~2.4k nodes4 groups29 KB
signed by Lollyvector SVG自分で確認するGet the signed file4 paths~2.4k nodes4 groups29 KB
待っている間もすべてのコントロールはライブです: 対象 URL、スクロール深度、待機時間、クロップの内側マージン、再配色。ホストが必要なのはキャプチャそのものだけです。
signed by Lollyvector SVG自分で確認するGet the signed file52 paths~3.6k nodes158 groups1 image62 KB
signed by Lollyvector SVG自分で確認するGet the signed file52 paths~3.6k nodes158 groups1 image62 KB
インストール
Chrome ウェブストアから
近日公開。 公開されればワンクリックでインストールし、Lolly を再読み込みするだけです。
自分で読み込む(開発者向け)
拡張機能はリポジトリ内の shells/chrome-extension/ にあります。
chrome://extensionsを開きます。- 右上の デベロッパーモード をオンにします。
- パッケージ化されていない拡張機能を読み込む をクリックし、
shells/chrome-extension/フォルダを選択します。 - Lolly を再読み込みします - これで URL Screenshot がブラウザで動作します。
仕組み
- 小さなスクリプトが拡張機能の存在を Lolly に伝えるため、URL Screenshot ツールは設定不要で自動的に有効になります。
- レンダリング時、拡張機能は対象ページをバックグラウンドタブで開き、DevTools Protocol 経由でキャプチャし(デスクトップアプリが使うのと同じ
Page.captureScreenshot)、その後タブを閉じて画像を返します。 - すべてあなたのブラウザ内、あなたのネットワーク上で完結するため、
localhostや社内サイトのキャプチャも動作します。キャプチャ自体はどこにもアップロードされません。発生するネットワーク通信は、あなたのブラウザ自身が指定されたページを読み込むものだけです。
キャプチャが実行されている間、一時タブに 「…このブラウザのデバッグを開始しました」 というバナーが一瞬表示されることがあります。これは DevTools Protocol が動作している証で、ショットが完了すると自動的に消えます。
Brand Studio のためにサイトを読み取る
Brand Studio の Website ソースは、すでにお持ちのサイトからブランドを作成します。Chromium 上ではこの拡張機能が読み取りを行い、デスクトップアプリではネイティブの fetch が同じ役割を果たし、拡張機能のない通常のブラウザではそのタイル自体が表示されません。
押したときに起こること:
- 1つのアドレス、1つのページ。拡張機能は同種のバックグラウンドタブでそれを開き、レンダリングされたマークアップ、スタイルシートのテキスト、いくつかのアイコンとロゴ画像を読み取り、タブを閉じます。リンクをたどることも、クロールすることもありません。
- 他所でホストされているスタイルシートやフォント(CDN、フォントサービスなど)も取得されます。ページの色や書体はそこに含まれているためです。クロスオリジンのリクエストはあなたの Cookie なしで送られ、同一オリジンのリクエストはページ自体と同じように Cookie を使用します。
- すべてに上限が設定されています - シート、画像、バイト数それぞれに上限があり - 悪意のあるページや壊れたページでもハングせず、部分的な情報を返します。
- バイト列はリクエスト元の Lolly タブにそのまま返されます。色、書体、ロゴへの解析はあなたのデバイス上で行われ、何もアップロードされません。
あなたが押すまで何も読み取られません。アドレスを貼り付けるだけではフィールドが埋まるだけです。
インストール後
Lolly タブを再読み込みしてください。「拡張機能を入手」というプロンプトが消え、URL Screenshot がギャラリーと Batch モードで利用できるようになります。
権限
manifest.json は4つの権限とホストアクセスを宣言しています。
debugger- DevTools Protocol を通じてバックグラウンドタブを操作します。スクリーンショットを撮るために必要です。tabs- 一時的なバックグラウンドタブを開き、後で閉じます。scripting- Brand Studio の Website ソースのために、指定されたサイト内で1ページ読み取り用のスクリプトを実行します。storage- 開いたタブの id をセッションストレージにのみ記録し、ブラウザが読み取りの途中で拡張機能をサスペンドした場合でもタブが確実に閉じられるようにします。次回起動時にクリアされ、あなたに関する情報は何も保存されません。host_permissions: ["<all_urls>"]- あらゆるサイトへのホストアクセスです。任意の URL を指定できるようにするためです。Chrome はこれをインストール時に「すべての Web サイトのすべてのデータの読み取りと変更」という広範な警告として表示します。
その警告にもかかわらず、拡張機能はあなたがキャプチャまたはインポートを指示した単一のページしか読み取らず、あなたの閲覧データを読み取ったり送信したりすることはありません - どこにも何もアップロードされません。
マニフェストには minimum_chrome_version: 111 も設定されています。現在のバージョンは 0.2.1 です。
トラブルシューティング
- まだ「拡張機能を入手」と表示される? Lolly タブを再読み込みしてください - 検出はページ読み込み時に行われます。
- このサイトで何も起こらない? 拡張機能は Lolly 自身のオリジンでのみ有効化されます。別のドメインでカスタムビルドを動かしていますか? 拡張機能の
manifest.jsonのcontent_scripts.matchesに追加してください。 - キャプチャが失敗する? URL に到達可能で
http://またはhttps://から始まっていることを確認してください。自動キャプチャを積極的にブロックするページもあります。