Chrome Extension作成に役立つURL集

# 作成者のレベル
私自身、Chrome Extensionを作るのは初めてです。
以前、[Webサイトを一度作成したこと](https://qiita.com/nori0__/items/3334a1a9812ba020f32d)がありますが、ほとんど初学者です。

ただ、Chrome Extensionは、沢山の人が作成しているため参考に出来るサイトが多く、初学者でも作りやすかったです。
そこで、参考にしたサイトのURL集を記載していきます。

作成中、ハマったことは別の記事で記載します。

# 作成したChrome Extensionで使った機能
作ったChrome Extensionは、Qiitaの記事を作成する時にMarkdownのリンクが連続で作成するものです。
(この記事を作成するのに使いました)

作成したChrome Extension、[Markdown Links Creater](https://chrome.google.com/webstore/detail/markdown-links-creater/mehjjeabilngkppolejabfpjckgikifm?hl=ja&gl=JP)は、コピーする度に新たに作成するリンクに加え、過去に作成したリンクを追記してクリップボードへコピーします。  
<img width="640" alt="markdownlinkscreater-ss.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/b6566167-22e2-4e2a-3495-86c6b42cb8cf.png">

過去にコピーしたリンクを追記してコピーするかどうかは、オプション画面で設定できます。
追記するリンクもオプション画面で整理できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/dfe651b1-c125-3284-2cc9-9c70bb395d58.png)

よって、使った主な機能は以下になります。これらを中心にサイトを紹介します。

- Event Page
- Brower Action
- Option Page
- chrome.storage API

# URL集
## Chrome Extensionの開発に必要な概念 
[Chrome拡張の開発方法まとめ　その1：概念編 - Qiita](https://qiita.com/k7a/items/26d7a22233ecdf48fed8#browser-action%E3%81%A8page-action)

[Chrome拡張機能の開発 その1\-1：概要編 \- Qiita](https://qiita.com/gtracker64/items/4a6b0ffca3935a90d4d3)

## 公式のサンプル集
[Sample Extensions - Google Chrome](https://developer.chrome.com/extensions/samples)  

## Manifest File
[Manifest File Format - Google Chrome](https://developer.chrome.com/extensions/manifest)  
Manifest Fileの書き方に困った時
[Chrome 拡張機能のマニフェストファイルの書き方 - Qiita](https://qiita.com/mdstoy/items/9866544e37987337dc79)

## Context Menu
[chrome.contextMenus - Google Chrome](https://developer.chrome.com/apps/contextMenus)  
Context Menuのオプションの書き方に困った時
[Chrome 拡張機能 ー コンテキストメニュー(ContextType/ItemType） - Qiita](https://qiita.com/howdy39/items/9ac0564da56246472fc5#fn1)

実装方法の確認
[Google Chrome Extensionを作ってみた-その7- ｜ DevelopersIO](https://dev.classmethod.jp/ria/google-chrome-extension-7/)
[try catch and ...release: コンテキストメニューなChrome拡張機能の作り方](https://trycatchand.blogspot.com/2013/08/chrome-extensions-contextmenus.html)  


## Event Page
必要なときにロードされ、実行されるページ。
[Manage Events with Background Scripts - Google Chrome](https://developer.chrome.com/extensions/background_pages)  

[ChromeのEvent Pagesで実現する省メモリな拡張機能 \| monolithic kernel](https://blog.mono0x.net/2012/11/08/chrome-event-pages/)

## Chrome Extensionの種類
### Browser Action
ブラウザ全体に作用するタイプで、Chromeの検索バー横にアイコンが表示される。
ポップアップを表示したりもできる。
[chrome.browserAction - Google Chrome](https://developer.chrome.com/extensions/browserAction)  

### Page Actions
特定のページでのみ作用するタイプ。
[chrome.pageAction - Google Chrome](https://developer.chrome.com/extensions/pageAction)  

### Override Pages
Chromeが提供するページを作成したHTMLで置き換えるタイプ。
[Override Pages - Google Chrome](https://developer.chrome.com/extensions/override)  

## Option Page
ユーザーがChrome Extensionに関する設定を行うページ。
[Give Users Options - Google Chrome](https://developer.chrome.com/extensions/options)  

## chrome.storage API
[[Chrome Extensions（機能拡張）開発] localStorageを使って異なるスコープ間でデータのやり取りを行う方法 | maesblog](https://mae.chab.in/archives/2861)よりlocalStorageも使えるのですがlocalStorageの場合、background.jsを使ってChrome ExtensionsとWebサイト間のデータのやり取りを行わなければなりません。

chrome.storage APIは、以下のメリットがあったのでこちらを採用しました。

- background.jsがなくても、Chrome ExtensionsとWebサイト間のデータがやり取りできる
- クッキーやキャッシュを削除しても、データが保持される
- データ変更時のコールバック関数を登録できる

[chrome.storage - Google Chrome](https://developer.chrome.com/extensions/storage)  
chrome.storage APIの概要を知りたい
[Chromeエクステンションを作ろう：ストレージ編 - Qiita](https://qiita.com/dhun/items/cf18e43cb0376fcff302)  
実装方法を知りたい
[chrome.storageでchrome extension用のデータを保存・取得 | EasyRamble](https://easyramble.com/chrome-storage-set-and-get.html)  

chrome.storageの実態を確認したい
chrome.storage.localの場合は以下にあります(Windows)。
C:\Users\{ユーザー名}\AppData\Local\Google\Chrome\User Data\Default\Local Extension Settings\{拡張のID}
[chrome.storageの実体の場所 - Qiita](https://qiita.com/k7a/items/cf644471d34d31f398e9)  

## デバック
デバックの仕方が分からないとき
[Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita](https://qiita.com/guru_taka/items/37a90766f4f845e963e5#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AE%E6%96%B9%E6%B3%95)  

## 権限の要求記載
権限の種類
[Declare Permissions - Google Chrome](https://developer.chrome.com/extensions/declare_permissions)  
ユーザーに通知される権限
[Declare Permissions and Warn Users - Google Chrome](https://developer.chrome.com/extensions/permission_warnings)  

権限設定の重要性について
[ブラウザ拡張の権限でどこまで（悪いことを）できるのか？とその対策【デモあり】 - Qiita](https://qiita.com/tksugimoto/items/0e9ada7efc3b6570e10c)  

作成したChrome Extensionは公開するため、権限の要求は必要最小限で済むようにしました。

```json
    "permissions": [
        "tabs",
        "contextMenus",
        "storage"
    ]
```
私の作成したChrome Extensionの権限は、閲覧履歴の読み取り権限がありますが、これは`tabs`を追加したためです。
`tabs`がないと、ブラウザアイコンを押下した際にURLやページのタイトルをイベントハンドラーの引数から取ってこれなかったからです。

```js:background.js
// ブラウザアイコンクリック時にページリンクをMarkdown形式でコピーするイベントハンドラの登録
chrome.browserAction.onClicked.addListener(createLink);

function createLink(info, tab) { // ブラウザアイコン押下時、info.urlやinfo.titleがundifined
    let url;
    if (info.mediaType === 'image') {
        url = info.srcUrl;
    } else {
        url = info.linkUrl || info.pageUrl || info.url;
        if (!url) {
            if (tab)
                url = tab.url;
        }
    }

    let text = info.selectionText || info.title || url;

    if (tab)
        text = tab.title;

    if (url && text)
        saveLink('[' + text + '](' + url + ')');
}
```

## Chromeストアへの公開方法
[Publish in the Chrome Web Store - Google Chrome](https://developer.chrome.com/webstore/publish)  


## その他
### JavaScriptでクリップボードに文字をコピーする
クリップボードに文字をコピーするには、テキストを画面外に作って、クリップボードにコピーするだけです。
コピーした後は、テキストボックスを削除します。簡単。

```js
    // テキストエリアを作って値を入れる
    let ta = document.createElement('textarea');
    let st = ta.style;
    st.position = 'fixed';
    st.left = '-100%';
    ta.value = text;

    // 作成したテキストエリアをbody要素に追加
    document.body.appendChild(ta);

    // テキストエリアを選択
    ta.select();

    // クリップボードにコピー
    let result = document.execCommand('copy');

    // body要素から作成したテキストエリアを削除
    document.body.removeChild(ta);
```

参考
[JavaScriptでクリップボードに文字をコピーする(ブラウザ) - Qiita](https://qiita.com/simiraaaa/items/2e7478d72f365aa48356)