LoginSignup
0
1
@PoodleMaster(PoodleMaster)

【Chrome拡張】URLデコードで丸見えだ👀✨

Last updated at Posted at 2024-02-26

➊ はじめに

会社でTeamsからSharepointの資料を参照する際、ブラウザに表示されるURI（Uniform Resource Identifier）が、「https://example.com/?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF/file.txt」などとエンコードされていて、ファイルへのパス確認が難しいため、Chrome拡張のお勉強も兼ねて、複数バイトのURIをデコードするChrome拡張を作ってみたくなりました。

sample

ちなみに普通にブラウジングすると、ブラウザ上部のURI表示場所にはデコードされたURIが表示されますので、ここではイメージとしてUTF-16でエンコードされたURIを使っています。

➡これを使えば、エンコードされたURIからでもパスが丸見えだぜ！👀✨

➋ URIエンコードについて

URIの標準であるRFC 3986によれば、URI（Uniform Resource Identifier）内の非ASCII文字や特殊文字はパーセントエンコーディングによってエンコードする必要があります。このエンコーディングにおいて、RFC 3986では文字の符号化にはUTF-8が標準とされています。つまり、非ASCII文字や特殊文字をURI内で表現する際には、まずUTF-8にエンコードし、その後にパーセントエンコーディングを行う必要があります。

➌ 例えば

❖例えば

例えば、以下のようなURIの場合を考えます。

https://example.com/?text=こんにちは/file.txt

UTF-8の「こ」を16進数のコードで表すと「0xE3 0x81 0x93」の3バイトとなり、これにURIの規約通り「%」をつけて「%E3%81%93」と変換します。これを残りの文字列「んにちは」も同様に繰り返していくと以下のようになります。

https://example.com/?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF/file.txt

このように「こんにちは」を「%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF」のようにコード化することをエンコードと言います。またこれの逆を行うことをデコードと言います。

処理名称 処理
エンコード 「こ」➔「%E3%81%93」
デコード 「%E3%81%93」➔「こ」

❖ちなみに

ちなみにですが、URIはエンコードされた状態で処理され、ユーザにはデコードされた状態で見えているのが基本的です。以降の実践で確認してみてください。

image.png

❖用語まとめ

  • エンコード（encode）
    “en”は、〜にするという意味なので、Encodeとは、「コード化する」という意味になります。

  • デコード（decode）
    “de”は、動詞の意味を反転、除去させる意味があるので、Decodeとは、「コード化されたものから元に戻す」という意味になります。

  • コード化（Encoding）とは
    コード化（Encoding）とは、情報やデータをコンピュータが理解できる形式に変換するプロセスのことです。これは、テキスト、音声、画像、動画、数値などのさまざまな形式のデータを、コンピュータが処理しやすいバイナリ形式に変換することを指します。例えば、テキストだとSJIS、UTF-8、画像だとjpg、png、音声だとmp3、wav、動画だとH.264、mp4などがあります。

➍ 実践

https://example.com/?text=こんにちは/file.txt

それでは、上記へアクセスしてみてください。URIの日本語部分は「こんにちは」と表示されました。ではブラウザのURIを全部コピーして、メモ帳などへ貼り付けてみてください。
sample

URIの日本語部分は「%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF」と表示されました。
sample

ブラウザ上で表示されるURIは、日本語などの非ASCII文字が含まれていても、ユーザには見やすい形で表示されます。しかし、このURIをコピーして貼り付けると、エンコードされたURIがコピーされます。この挙動について、ユーザには見やすい形で表示されているが、内部的にはエンコードされたURIとして処理されていると考えると理解しやすいでしょう。

➎ 困りごと

Teamsなどを使っている際に、Sharepoint資料を添付された場合など、どの場所のファイルなのかパスが分からなくて困ったことが多々あります。どの場所のファイルなのかなどはURIにヒントが隠されていることが多いのですが、ブラウザ上のURIは日本語で表示されるのが基本なんですが、なぜかエンコードされたURIで表示されちゃうので、どこのファイルをいじくっているのかチンプンカンプンのときがあります。

そんなときにブラウザの「エンコードURI」から「デコードURI」へ変換したいと思って作ったのが、次のChrome拡張です。

➏ Chrome拡張

作ったChrome拡張です。
Chrome拡張ボタンを押下すると、「上段にエンコードURI」、「下段にデコードURI」を表示します。また念のための、URIコピーボタンも具備しています。
sample

デコード処理については、Chrome拡張側（ローカルPC）で処理しますので、インターネット上へURIが飛ぶこともなく安全です。

➐ ソースコード

それでは本題のソースコードです。
作るファイルは、以下の4つです。以下のファイルを全て同じフォルダに格納してください。

  1. json:manifest.json
  2. popup.html
  3. popup.js
  4. icon.png

(1) manifest.json

manifest.jsonは、Chrome拡張機能の設定ファイルであり、拡張機能の挙動や機能、権限、アイコンなどの情報を定義します。

manifest.json
{
  "manifest_version": 3,
  "name": "URI Decoder",
  "version": "1.0",
  "description": "URI Decoder.",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "icon.png"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

(2) popup.html

popup.htmlは、Chrome拡張機能のポップアップページを定義しています。

popup.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL Decode</title>
  <style>
    body {
      width: 450px;
      word-wrap: break-word;
    }
  </style>
</head>

<body>
  <button id="copyButton">COPY</button>
  <span id="urlContainer"></span>
  <br>
  <button id="copyDecButton" style="display: none;">COPY</button>
  <span id="urlDecContainer" style="display: none;"></span>
  <div id="status"></div>
  <script src="popup.js"></script>
</body>

</html>

(3) popup.js

popup.jsは、Chrome拡張機能のポップアップページで使用されるJavaScriptファイルです。

文字の符号化にはUTF-8が標準とされているのですが、おまけで、URIがUTF-16（%uXXXX 形式）の場合でも、デコード対応するようにしてあります。

popup.js
// -----------------------------------------------------------------------------
// 「popup.html」表示時に発火する'DOMContentLoaded'イベントリスナーの設定
// -----------------------------------------------------------------------------
document.addEventListener('DOMContentLoaded', function () {

  // ページが読み込まれたら URL をデコード
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var currentTab = tabs[0];

    if (currentTab && currentTab.url) {
      var decodedUrl = decodeUnicode(currentTab.url);
      document.getElementById('urlContainer').innerText = currentTab.url;

      // 同じ場合はデコード関連のボタンとコンテナを非表示にする
      if (currentTab.url !== decodedUrl) {
        document.getElementById('copyDecButton').style.display = 'inline';
        document.getElementById('urlDecContainer').style.display = 'inline';
        document.getElementById('urlDecContainer').innerText = decodedUrl;
      }
    } else {
      console.error("無効なタブまたはURLプロパティが見つかりません.");
    }
  });

  // 「COPY」ボタン押下時に発火する'click'イベントリスナーの設定
  document.getElementById('copyButton').addEventListener('click', function () {
    var urlText = document.getElementById('urlContainer').innerText;
    copyToClipboard(urlText);
  });

  // 「COPY」ボタン押下時に発火する'click'イベントリスナーの設定
  document.getElementById('copyDecButton').addEventListener('click', function () {
    var urlText = document.getElementById('urlDecContainer').innerText;
    copyToClipboard(urlText);
  });
});

// -----------------------------------------------------------------------------
// URLをデコードする関数
// -----------------------------------------------------------------------------
function decodeUnicode(url) {

  try {
    url = decodeURIComponent(url);
    // UTF-16（%uXXXX 形式）を通常の URL エンコードに変換してデコード
    url = url.replace(/%u([0-9A-Fa-f]{4})/g, function (match, hex) {
      return String.fromCharCode(parseInt(hex, 16));
    });
  } catch (err) {
    // UTF-16（%uXXXX 形式）を通常の URL エンコードに変換してデコード
    url = url.replace(/%u([0-9A-Fa-f]{4})/g, function (match, hex) {
      return String.fromCharCode(parseInt(hex, 16));
    });
  }

  try {
    url = decodeURIComponent(url);
  } catch (err) {
    console.error("decodeURIComponent ERROR:", url, err);
  }
  return url;
}

// -----------------------------------------------------------------------------
// クリップボードへテキストをコピーする
// -----------------------------------------------------------------------------
async function copyToClipboard(text) {

  try {
    // クリップボードへコピーチャレンジ
    await navigator.clipboard.writeText(text);

    // クリップボードへコピーチャレンジ成功
    const successMessage = 'クリップボードへのコピーが成功しました.';
    console.log(successMessage + ':', text);
    document.getElementById('status').innerText = successMessage;

  } catch (err) {

    // クリップボードへコピーチャレンジ失敗
    const errorMessage = 'クリップボードへのコピーが失敗しました.';
    console.error(errorMessage + ':', err);
    document.getElementById('status').innerText = errorMessage;
  }
}

(4) icon.png

著作権フリーのもので、デコードとかコピーとかそれっぽい画像を見つけて「icon.png」というファイル名に変更しておいてください。

➑ Chrome拡張追加方法

  1. Chromeを立ち上げ、右上の3点リーダ「︙」から「拡張機能➔拡張機能を管理」を選択してください
    sample

  2. 拡張機能画面が立ち上がったら、右上の「デベロッパーモード」を「ON」にしてください

  3. 「パッケージ化されていない拡張機能を読み込む」を押下して、➐で作ったプログラムのフォルダを指定してください
    sample

  4. パズルマーク「🧩」みたいなChrome拡張機能ボタンを押下して、「URI Decoder」をピンドメ「📌」しておいてください
    sampleuploading...0

  5. ツールバーに「URI Decoder」が表示されたらインストール完了です
    sample

➒ Chrome拡張の使い方

Chrome拡張の使い方ですが、普通にブラウジングしてください。デコードしたいURIのときに「URI Decoder」を押下してメニューを表示し、必要があれば「COPY」ボタンを押下してクリップボードへコピーしてください。
sample

  • 上段：URIエンコードの表示（クリップボードへのコピー機能）
  • 下段：URIデコードの表示（クリップボードへのコピー機能）

➓ さいごに🫡

Chrome拡張は以前もやったのですが、忘れてきたのでなんか作ってみたいなと思っていたのと、調度良い課題（欲望）があったので、トライしてみました。今回は、Chrome拡張の作成方法の再確認、URIのエンコード/デコードの簡単な規約確認、javascriptプログラムなどのお勉強ができました。直接的に要求仕様が合致する人は少ないと思いますが、Chrome拡張を作ってみたいという方には、簡単なソースコードなので参考になるかもと思いQiitaに出力しておきます。また課題を見つけてChrome拡張作ってみたいと思います！

⓫ ボヤキ😶‍🌫️

本記事とはあまり関係ないんですが、Pythonでツールを作っては生産性向上をバリバリしているんですが、会社はあまり評価してくれないですよね…💩💩💩どうしたものか…
以上ボヤキでした。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1