簡単!Chrome拡張機能を自作する方法 – ワンタッチリンク生成機能を作ってみた

簡単にChromeの拡張機能を作る方法が紹介されていて真似してみたら、本当に簡単にできたのでメモしておきます。
元の記事は超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 #JavaScript – Qiitaです。ありがとうございました。

作りたい拡張機能

DとVを押すと、現在開いているページのタイトルとURLを取得し、「<a href=url>タイトル</a>」という文字列をコピーして、クリップボードに入れます。

フォルダ

どこでもいいので適当なフォルダを作ります。名前も適当でいいです。

manifest.json

次の通り書いてmanifest.jsonとしてフォルダに保存します。

{
  "manifest_version": 3,
  "name": "リンク生成",
  "version": "1.0.0",
  "description": "現在のページのタイトルとURLを取得しリンクを作成。",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

content.js

次の通り書いてcontent.jsとしてフォルダに保存します。

document.addEventListener('keydown', function (event) {
  keysPressed[event.key] = true;
  if (keysPressed['d'] && keysPressed['v']) {
    copyTitleAndURL();
  }
});

document.addEventListener('keyup', function (event) {
  delete keysPressed[event.key];
});

let keysPressed = {};

function copyTitleAndURL() {
  const url = window.location.href;
  const title = document.title;
  let htmlLink = `<a href="${url}">${title}</a>`;
  navigator.clipboard.writeText(htmlLink);
}

Chromeに反映する方法

Chromeの右上の三点アイコンをクリックし、拡張機能‐拡張機能を管理を選択します。
拡張機能が開くのでここに先程のフォルダをドラッグアンドドロップします。
これで使えるようになります。

ファイルを書き換えた場合は更新アイコンをクリックすると反映します。
今回のようにページから情報を取得する拡張機能の場合はページの更新も必要です。

コメント

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