超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】

## はじめに
みなさんはChromeの拡張機能を使っていますか？
僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。

今回は、普段の業務の効率を上げるのも兼ねて自作してみました!



## 最低限準備するもの
- manifestファイル
- Javascriptファイル

ぶっちゃけ、これだけで動きます。

## 実際に作ってみよう
それでは実際に作成していきましょう。
今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。

まずは、manifestファイルから設定していきます!

## manifestファイル
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja

を参考にして、備忘録も兼ねて説明していきます。
今回は、最低限の設定を行います。

```manifest.json
{
  "manifest_version": 3,
  "name": "Create markdown link",
  "version": "1.0.0",
  "icons": {
      "16": "logo/16.png",
      "48": "logo/48.png",
      "128": "logo/128.png"
  },
  "description": "Create markdown link from selected text",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": [
      "content.js"
    ]
  }]

}
```

### manifest_version
拡張機能が使用するマニフェストファイル形式のバージョンを指定します。現在のバージョンは3です。

早ければバージョン2は2024年6月以降に廃止され、無効になりインストール/使用できなくなるので
3を指定しましょう。

https://developer.chrome.com/blog/resuming-the-transition-to-mv3?hl=ja

### name
Chromeウェブストア、インストールダイアログ、ユーザーのChrome拡張ページ( chrome://extensions/ )で表示される拡張機能の名前です。
最大文字数は75文字です。

### version
拡張機能のバージョン番号を識別する文字列のことです。
1から4つの数字をdotで区切る事ができます。
全てがゼロのバージョンは指定できません。

### icons
128x128 のアイコンを常に提供する必要がある。
このアイコンはインストール中とChromeウェブストアで使用されます。

拡張機能管理には48x48のアイコンが使用され、ファビコンには16x16のアイコンが使用されます。

### description
拡張機能を説明する文字列です。
最大文字数は132文字で、Chromeウェブストアとユーザーの拡張機能管理ページ両方に表示されます。

### content_scripts
```.json
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": [
      "content.js"
    ]
  }]
```
コンテンツスクリプトを使用する際に記載します。

**matches**はcontent_scriptsに対する**必須**項目で、
対象となるURLパターンを指定します。
`<all_urls>`を指定することで、全てのURLに対してコンテンツスクリプトを実行できます。

**js**はコンテンツスクリプトとして実行するJavaScriptファイルを指定します。

## JavaScriptファイル(content.js)
```content.js
document.addEventListener('keydown', function(event) {
  keysPressed[event.key] = true;
    if (keysPressed['d'] && keysPressed['v']) {
      copySelectedTextAsMarkdown();
    }
});

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


let keysPressed = {};

function getSelectedTextAndUrl() {
  const selectedText = window.getSelection().toString();
  const url = window.location.href;
  return { selectedText, url };
}

function copyAsMarkdown(selectedText, url) {
    let markdownLink = `[${selectedText}](${url})`;
    navigator.clipboard.writeText(markdownLink);
}


function copySelectedTextAsMarkdown() {
    const { selectedText, url } = getSelectedTextAndUrl();
    copyAsMarkdown(selectedText, url);
}

```

上記が実際に作成したJavascriptファイルになります。
DとVを押すと、選択したテキストとURLをMarkdown形式でクリップボードにコピーするようになっています。

さて実際に動作を確認してみましょう!



![chrome.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/b351e609-6067-ed73-5011-cf820cd1ba80.gif)

キーボードクリック操作は分かりにくいかも知れませんが、DとVを選択した後に教えています。
Markdown 形式で無事にクリップボードにコピーし、貼り付けることができましたね!

## おわりに
今回はChromeの拡張機能を作成してみました。
ウェブストアに公開するためには、手順を踏む必要がありますが独自で作成したり
チームメンバーに共有する分には簡単に行えます!

皆さんも是非、自分だけのChromeの拡張機能を作成してみてください!


## 参考資料
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja

https://support.google.com/chrome/a/answer/2714278?hl=ja

https://www2.kobe-u.ac.jp/~tnishida/programming/ChromeExtension-02.html

https://developer.chrome.com/blog/resuming-the-transition-to-mv3?hl=ja