素人でもChatGPTでFirefoxのアドオンを作れた話

創作

こんにちは。カラガラです。

突然ですが皆さんは、「引用」ってご存じですか？

人の言葉や文章を、自分の話や文の中に引いて用いること。

出典：「引用」の意味や使い方 わかりやすく解説 Weblio辞書 (https://www.weblio.jp/content/%E5%BC%95%E7%94%A8)

ブログにおいてはこんな感じで、他のサイトの情報を掲載する引用をよく使います。

そして、引用した情報には出典をつけなければいけません。

これ、やらなければいけないことは分かってるんですけど、面倒くさいんです……。

リンクのコピペだけなら大丈夫ですが、当サイトでは環境省ホームページの出典の記載を参考に

「出典：ページのタイトル（ページへのリンク）」

という形式で記載しています。

なので今までの手順としては……

  1. 「出典：」と打ち込む
  2. Ctrl+Dでブックマークに追加する画面を表示する
  3. 当該ページのタイトルをコピーしてブックマークに追加する画面を閉じる
  4. 「出典：」の後ろにタイトルをペーストする
  5. 当該ページのURLをコピーする
  6. 「出典：ページのタイトル」の後ろに（）括弧を打ち込む
  7. 括弧内にURLをペーストする

というめちゃくちゃ面倒くさい手順を踏んでおりました。

「出典：ページのタイトル（ページへのリンク）」の形式でコピーしてくれるFirefoxのアドオンとかないかなー……

と思ったところで、

「あっ、ChatGPT使えば作れるんじゃね」と思い、作ってみました。

とりあえずChatGPTに要望を投げる

とりあえずChatGPTに聞いてみました。

するとこんな回答が返ってきました。

Firefoxのアドオンを作成するには、主にJavaScriptの知識が必要です。以下に、必要な手順と基本的なスクリプトの例を示します。

まず、Firefoxアドオンの基本的なファイル構造を作成しましょう。必要なファイルは以下のとおりです。

  1. manifest.json: アドオンのメタ情報と設定を含むJSONファイル。
  2. background.js: アドオンの主な機能を提供するJavaScriptファイル。

1. manifest.json

json
{
  "manifest_version": 2,
  "name": "Citation Copier",
  "version": "1.0",
  "description": "Copies the citation in the format 'Source: Site Name (Link)'.",
  "permissions": ["activeTab", "clipboardWrite"],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "Copy citation"
  }
}

2. background.js

javascript
function copyToClipboard(text) {
    function onCopy(event) {
        event.clipboardData.setData("text/plain", text);
        event.preventDefault();
    }

    document.addEventListener("copy", onCopy, false);
    document.execCommand("copy");
    document.removeEventListener("copy", onCopy, false);
}

function copyCitation(tab) {
    const citation = `出典：${tab.title} (${tab.url})`;
    copyToClipboard(citation);
}

browser.browserAction.onClicked.addListener((tab) => {
    copyCitation(tab);
});

ここでは、browser.browserAction.onClicked.addListenerを使ってアドオンのアイコンがクリックされたときにcopyCitation関数を呼び出しています。copyCitation関数は、現在のタブのタイトルとURLを取得し、それを使って引用を作成し、クリップボードにコピーします。

これらのファイルを作成したら、Mozillaの公式ドキュメンションに従ってアドオンをロードしてテストしてみてください。それらが正常に動作することを確認したら、Firefoxのアドオンストアにアップロードして公開することができます。

なんかたぶんできました……。

Firefoxのアドオンの作り方を調べる

ChatGPTが出してきたのはコード的な何かだと思うので、このコードをどうすればいいかわかりませんでした。

こういう時はインターネットの力を借りましょう。

するとこんなサイトに行き着きました。

Firefoxのアドオン開発について(ファイルの作成&動作確認まで) | 森林ソフト
forest-soft.xyz
Firefoxのアドオン開発について(配布編) | 森林ソフト
forest-soft.xyz

このサイトを参考にアドオンの作成手順をまとめると……

  1. アドオン用のディレクトリフォルダのことを作成する
  2. メモ帳にChatGPTが書き出した「manifest.json」と「background.js」の内容をコピペし、ファイル名と拡張子も「manifest.json」、「background.js」にする
  3. 「about:debugging」で一時的に「manifest.json」ファイルを読み込んで動作確認をする
  4. 動作が大丈夫ならzipファイルにまとめてアドオンを登録する

といった手順です。とっても簡単ですね。

これが私のアドオン　「出典コピペ」じゃー！！！

ChatGPTが作ってくれたFirefoxアドオン「出典コピペ」の動作はこんな感じ。

アドオンのアイコンをクリックすると、今表示されているサイトの情報を

「出典：タイトル（リンク）」

の形式でコピーしてくれます。

これでブログ執筆が捗ること間違いなしです。というか捗っています。いま。

まとめ

  • 素人でも、簡単なアドオンならChatGPTで作れるよ

というお話でした。

これからの時代、自分に合ったプログラムを自炊していく時代なのかもしれませんね。

凄いプログラムは外食的な感じで。

ありがとうChatGPT。それではさようなら。

コメント

タイトルとURLをコピーしました