Closed1

Chrome拡張機能を作ってみる

はるはる

はじめに

引用サイトだと、エラーが起きてしまったので、Chatgptに変更してもらったのでメモしておきます。

手順

元々のコードだと、エラーが起きるので、content.jsは以下に変更

// 拡張機能アイコンがクリックされたら実行
chrome.action.onClicked.addListener(() => {

    // 左端を残して全てのタブを消す
    function deleting(pages) {
        const len = pages.length - 1;
        for (let i = len; i > 0; i--) {
            chrome.tabs.remove(pages[i].id);
        }
    }

    // エラー起きてたらメッセージ出力
    function onError(error) {
        console.log(`エラーメッセージ: ${error}`);
    }

    // currentWindow:アクティブウィンドウ上のみ実行
    chrome.tabs.query({ currentWindow: true }, (pages) => {
        if (chrome.runtime.lastError) {
            onError(chrome.runtime.lastError);
        } else {
            deleting(pages);
        }
    });
});

manifest.jsonファイルは以下

{
 "name": "Sample Extension",
 "version": "1.0",
 "manifest_version": 3,
 "action": {
   "default_icon": {
     "16": "./extension.png"
   }
 },
 "background": {
   "service_worker": "./content.js"
 },
 "permissions": [
   "tabs"
 ]
}

以下がディレクトリ構造

📁 Sample-Extension
├── content.js
├── manifest.json
└── extension.png

実行方法

  1. Chromeを開く
  2. 「パッケージ化されていない拡張機能を読み込む」をクリック
  3. Sample-Extensionのディレクトリを選ぶ
  4. 追加された拡張機能をクリックする
    ※「Chromeで開いているタブを一番左の1つを残して全て閉じる」という機能が作動する

引用

https://qiita.com/mizo__/items/5951a7d94ab0ff8cf49b

このスクラップは5ヶ月前にクローズされました