見出し画像

仕事を便利にChrome/Edgeのスマートタブ管理拡張機能

リス

デュアルモニターで作業効率を倍増！シンプルな活用方法とは？

デュアルモニターの魔法を体験したことはありますか？

最近、自分の作業環境をアップデートしてデュアルモニターを導入してみました。正直、最初は「そこまで変わるの？」という疑問がありましたが、一度使ってみるとその快適さに驚かされました。今更感はありますが。。

1つのモニターで作業をしていると、どうしてもウィンドウの切り替えが面倒。調べ物をしながら、別のタスクに移るたびに集中が途切れてしまいます。でも、デュアルモニターにすると、片方で資料を開きながら、もう片方でメインの作業ができて便利。

どんな人におすすめ？

  • クリエイティブ系の仕事をしている人: デザインや動画編集の際に、参考資料を常に見ながら作業できるのは大きな利点です。

  • エンジニア: コーディングしながら、別のモニターでプレビューやデバッグツールを表示することで、効率が大幅にアップします。

どんな環境で使っている？

私の場合、メインのモニターには27インチのフルHDディスプレイを使用し、サブモニターには24インチのモニターを配置。大きすぎず、デスクスペースも十分に確保できるサイズ感が気に入っています。これなら、長時間の作業でも疲れにくいです。

結論としては、デュアルモニターは生産性を格段に上げてくれる素晴らしいツールです。特に、複数のタスクを同時にこなす必要がある方には、ぜひ一度試してみる価値がありますよ。

タブを管理する新しい方法 – スマートタブ拡張機能が便利すぎる！

Chrome/Edgeユーザー必見！

「仕事中に大量のタブを開いてしまって、どれがどれだか分からなくなってしまう...」という経験とか、毎回開くタブ群、カテゴリ別のタブなどを管理できたら楽かなぁと思っていました。せっかく拡張機能を自分で作れるようになったので、スマートタブというChrome/Edgeの拡張機能を作ってみました。

この拡張機能の特徴は、開いているタブを簡単に保存して後から復元できること。たとえば、調べ物をしている時に、別の仕事が入ってきた場合、そのタブをそのまま保存して、後でまとめて復元することが可能です。電源切っていても大丈夫です。いやもうあるとは思うのですが。。

使い方は簡単！

  • タブを保存: 開いているタブを「プロジェクトA」や「リサーチ」など、カスタム名を付けて保存します。

  • タブの復元: 後でそのタブセットを開けば、すぐに作業を再開できる。

実際に使ってみて感じたこと

仕事が複数のプロジェクトにまたがると、どうしてもタブが増えてしまうんですよね。以前は、必要なタブを再度開き直す手間がストレスでしたが、スマートタブを使い始めてからはその手間が激減しました。一定時間たつと使っていないタブを落としてPCを軽くする機能も実装したのですが、あとから探すケースも多かったのでこの機能は排除しました。。

こんな人におすすめ！

  • リサーチが多い人: 調べ物をしているとタブがどんどん増えていくので、それを整理するのに最適。

  • 複数のプロジェクトを同時進行している人: それぞれのプロジェクトごとにタブセットを作っておけば、簡単に切り替えができます。


各種ファイル


manifest.json


説明:

{
  "manifest_version": 3,
  "name": "スマート管理ツール",
  "version": "1.1",
  "description": "タブのスマート管理機能",
  "permissions": ["tabs", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

  • manifest.jsonは、Chrome拡張機能の設定ファイルです。

  • 必要な権限 (tabs, storage)を定義しています。

  • popup.htmlをデフォルトのUIに設定し、background.jsをバックグラウンドスクリプトとして設定しています。

popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スマートタブ管理ツール</title>
  <style>
    body { font-family: Arial, sans-serif; width: 300px; padding: 10px; }
    button { padding: 10px; margin: 5px; width: 100%; }
  </style>
</head>
<body>
  <h3>スマートタブ管理ツール</h3>
  
  <input type="text" id="sessionName" placeholder="セッション名を入力" />
  <button id="saveSessionBtn">セッションを保存</button>
  <button id="restoreSessionBtn">セッションを復元</button>
  
  <script src="popup.js"></script>
</body>
</html>

説明:

  • popup.htmlは、拡張機能のポップアップUIです。

  • 「Session Name」入力フィールドと「Save」「Restore」ボタンを提供します。

  • popup.jsでUIの操作を処理しています。

popup.js

document.getElementById('saveSessionBtn').addEventListener('click', () => {
  const sessionName = document.getElementById('sessionName').value.trim();
  if (sessionName) {
    console.log('セッション名「' + sessionName + '」を保存します。');
    chrome.runtime.sendMessage({ action: 'saveSession', sessionName });
  } else {
    alert('セッション名を入力してください。');
  }
});

document.getElementById('restoreSessionBtn').addEventListener('click', () => {
  const sessionName = document.getElementById('sessionName').value.trim();
  if (sessionName) {
    console.log('セッション名「' + sessionName + '」を復元します。');
    chrome.runtime.sendMessage({ action: 'restoreSession', sessionName });
  } else {
    alert('セッション名を入力してください。');
  }
});

// セッション保存完了後のメッセージ表示
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'sessionSaved') {
    alert('現在開いているタブを保存しました');
  }
});

説明:

  • popup.jsは、ポップアップUIでユーザー操作を処理します。

  • 「Save Session」ボタンがクリックされると、saveSessionメッセージをバックグラウンドスクリプトに送信します。

  • 「Restore Session」ボタンがクリックされると、restoreSessionメッセージをバックグラウンドスクリプトに送信します。

background.js

// セッションを保存する関数
function saveSession(sessionName) {
  chrome.tabs.query({}, (tabs) => {
    const tabUrls = tabs.map(tab => tab.url); // タブのURLリストを取得
    chrome.storage.local.set({ [sessionName]: tabUrls }, () => {
      console.log('セッション名「' + sessionName + '」が保存されました。URLリスト:', tabUrls);
      // セッション保存後にメッセージを表示
      chrome.runtime.sendMessage({ action: 'sessionSaved' });
    });
  });
}

// セッションを復元する関数
function restoreSession(sessionName) {
  chrome.storage.local.get([sessionName], (result) => {
    const tabUrls = result[sessionName];
    if (tabUrls && tabUrls.length > 0) {
      console.log('セッションを復元しています: URLリスト', tabUrls);
      tabUrls.forEach(url => {
        chrome.tabs.create({ url }, (tab) => {
          console.log('URL: ' + url + ' のタブが復元されました。');
        });
      });
    } else {
      console.log('「' + sessionName + '」という名前のセッションが見つかりませんでした、またはセッションが空です。');
      alert('「' + sessionName + '」という名前のセッションが見つかりませんでした、またはセッションが空です。');
    }
  });
}

// メッセージを受け取ってセッション操作を実行
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'saveSession') {
    console.log('セッション「' + message.sessionName + '」を保存するメッセージを受信しました。');
    saveSession(message.sessionName);
  } else if (message.action === 'restoreSession') {
    console.log('セッション「' + message.sessionName + '」を復元するメッセージを受信しました。');
    restoreSession(message.sessionName);
  }
});


icon.png


いいなと思ったら応援しよう！