プロカードゲーマーと学ぶ、Chrome拡張機能作成①

2023年6月8日 03:47

技術系の発信もしていきたいので、やったことを記事にする。

Chrome拡張機能でクソかっこいい自分専用の最強ツールを作りたい！

ということで、いきなりクソかっこいい最強ツールを作るのはハードルが高いため、とりあえず動くなんかChrome拡張機能を作ってみる。

ゴールが見えない遠いところに向かうより、できることを増やしながら小さい目標を達成していくほうが楽しいし効率がいいものだ。

【本記事の目標】
30分ぐらいでChromeでウェブページのメモしたい部分を保存、一覧表示する超単純なメモアプリを作成して動作を確認する。

まず、Chromeの拡張機能を作るにはmanifestというChromeを開いたら拡張機能がどのプログラムを実行するのかが記述されたファイルを作る必要があるらしい。そして当然ここから実行されて、Chromeの実行中にバックグラウンドで動かしたいプログラムも必要である。

作る必要があるもの：
①manifest
②バックグラウンドで動かすプログラム

さらに、メモした内容を別タブでページを開いて確認できるようにしたい。そのためには別ページの本体（html）とそれを動かすプログラムがいる。

作る必要があるもの（追）：
③メモした内容を確認するページ
④確認ページを動かすためのプログラム

なるほどな。

じゃあ、作ったぞ！（ChatGPTが）

①manifest.json

{
    "manifest_version": 3,
    "name": "拡張機能界のアルケミー",
    "version": "1.0",
    "description": "選択した単語をメモとして保存する拡張機能",
    "permissions": ["storage", "contextMenus", "tabs"],
    "background": {
      "service_worker": "background.js"
    },
    "action": {},
    "web_accessible_resources": [
      {
        "resources": ["memo.html", "memo.js"],
        "matches": ["<all_urls>"],
        "use_dynamic_url": false
      }
    ]
  }

②background.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
      "id": "addMemo",
      "title": "メモを追加",
      "contexts": ["selection"]
    });
  });
  
  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId === "addMemo") {
      let text = info.selectionText;
      let timestamp = new Date().getTime();
      let saveObj = {};
      saveObj[timestamp] = text;
      chrome.storage.sync.set(saveObj, function() {
        console.log('メモを追加しました: ', text);
      });
    }
  });

  chrome.action.onClicked.addListener(function(tab) {
    chrome.tabs.create({ url: 'memo.html' });
  });

③memo.html

<!-- memo.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>メモ一覧</title>
    <style>
      .memo {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>メモ一覧</h1>
    <div id="memo-list"></div>
    <script src="memo.js"></script>
  </body>
</html>

④memo.js

window.onload = function() {
    const memoList = document.getElementById('memo-list');
    chrome.storage.sync.get(null, function(items) {
      for (let key in items) {
        if (items.hasOwnProperty(key)) {
          let memoDiv = document.createElement('div');
          memoDiv.className = 'memo';
          memoDiv.textContent = items[key];
          memoList.appendChild(memoDiv);
        }
      }
    });
  }