DEVOUR

devour browser tools — Demo

拡張機能の主要機能を実際に試すことができます。

前提

方法 A: 拡張アイコンでコピー

ツールバーの拡張アイコンをクリックしてコピーする方法です。ドメインルールにマッチする場合、そのセレクタが優先されます。

  1. ツールバーの拡張アイコンをクリックします
  2. ビルトインルール（devour.jp → #content）に基づき、テキストがクリップボードにコピーされます
  3. 成功すると緑色の "OK" バッジが表示されます

方法 B: 右クリック → Copy preset element

ドメインルールに基づいてコピーする方法です。

  1. このページ上の任意の場所で右クリックします
  2. コンテキストメニューから "Copy preset element (domain rule)" を選択します
  3. ビルトインルール（devour.jp → #content）に基づき、テキストがクリップボードにコピーされます
  4. 成功すると緑色の "OK" バッジが表示されます

方法 C: 右クリック → Copy element innerText / innerHTML

右クリックした要素のテキストまたは HTML を直接コピーする方法です。

  1. コピーしたい要素（例: この段落）を右クリックします
  2. コンテキストメニューから以下のいずれかを選択します：
    • "Copy element innerText" — テキストコンテンツをコピー
    • "Copy element innerHTML" — HTML マークアップをコピー
  3. 右クリックした要素の内容がクリップボードにコピーされます
  4. 成功すると緑色の "OK" バッジが表示されます

方法 D: 右クリック → Options

コンテキストメニューからオプション画面を開く方法です。

  1. 任意の要素を右クリックします
  2. コンテキストメニューから "Options" を選択します
  3. オプション画面が新しいタブで開きます
  4. Domain 欄に devour.jp、Selector 欄に右クリック位置の要素セレクタが自動入力されていることを確認します

方法 C テストデータ

以下の枠内を右クリックして、innerText と innerHTML の違いを確認できます。

devour の公式サイトは https://devour.jp/ です。太字やコードを含むテキストで、innerText と innerHTML の差が確認できます。

操作コピーされる内容
Copy element innerTextdevour の公式サイトは https://devour.jp/ です。太字やコードを含む…
Copy element innerHTMLdevour の公式サイトは <a href="…">…</a> です。<strong>太字</strong>…

ペースト

上記 A / B / C いずれかでコピーした後、以下の方法でペーストできます。

下のテキストエリアで動作を確認できます。

方法 A〜C の操作後、テスト用テキストエリアをクリックして Ctrl+V（Mac: Cmd+V）でペーストできることを確認してください。

テキストエリアとクリップボードの内容をクリアします。

Feature Toggles の確認

  1. オプション画面で Per-domain Copy を無効にします
  2. 赤色の "OFF" バッジが表示され、アイコンクリック・右クリックのコピー操作が無効になることを確認します
  3. オプション画面で Per-domain Copy を再度有効にします
  4. 同じ操作を実行し、緑色の "OK" バッジが表示されコピーが復帰することを確認します

確認ポイント

概要

Zenn の Web 編集機能をブロックし、CLI/Git での記事管理を徹底するための機能です。

以下のテストは、オプション画面の Feature Toggles で Zenn Web Editor ブロックが有効（デフォルト）であることを前提とします。

リダイレクトの確認

  1. https://zenn.dev/articles/example-slug/edit にアクセスします
  2. https://zenn.dev にリダイレクトされることを確認します

UI ブロックの確認

前提条件: Zenn にログイン済みで、記事が1件以上あること（未公開・公開問いません）。

  1. Zenn ダッシュボードにアクセスします
  2. 「編集する」ボタンがグレーアウトされていることを確認します
  3. ホバー時にツールチップが表示されることを確認します
  4. 記事タイトルのリンクが閲覧ページに変更されていることを確認します

Feature Toggles の確認

  1. オプション画面で Zenn Web Editor ブロック を無効にします
  2. Zenn ダッシュボードをリロードし、編集ボタンが通常通り機能することを確認します
  3. オプション画面で Zenn Web Editor ブロック を再度有効にします
  4. Zenn ダッシュボードをリロードし、ブロックが復帰していることを確認します

確認ポイント