ぼくのかんがえた さいきょうの Chromeのつかいかた

## はじめに
Chrome、みんな大好きですよね。
そんなChromeライフがより快適なものとなるように、僕が重宝している拡張機能、操作、カスタマイズを紹介したいと思います！
（ほとんど知っているものだった場合、笑顔でそっといいねだけ押してブラウザバックしてください）

:::note warn
**注意： ショートカットキーはMacOSの想定です。**
:::
# 目次

- [拡張機能](#拡張機能)
    - [そもそもどこにあるねん問題](#そもそもどこにあるねん問題)
    - [拡張機能にショートカットキーを充てる](#拡張機能にショートカットキーを充てる)
        - [それぞれの拡張機能にショートカットキーを充てる](#それぞれの拡張機能にショートカットキーを充てる)
    - [おすすめ拡張機能](#おすすめ拡張機能)
        - [WebChatGPT](#webchatgpt)
        - [Superpower ChatGPT](#superpower-chatgpt)
        - [Clear Cache](#clear-cache)
        - [Find & Replace for Text Editing](#find-&-replace-for-text-editing)
        - [Video Speed Controller](#video-speed-controller)
        - [DeepL翻訳：読みながら、書きながら使える翻訳ツール](#deepl翻訳：読みながら、書きながら使える翻訳ツール)
- [DevTools](#DevTools)
    - [リファレンス](#リファレンス)
    - [小技](#小技)
        - [スクショを撮る](#スクショを撮る)
        - [Consoleで特定の要素を取得する](#consoleで特定の要素を取得する)
        - [Consoleで特定の全要素を取得する](#consoleで特定の全要素を取得する)
        - [Consoleで入力した直前の結果を使いたい](#consoleで入力した直前の結果を使いたい)
        - [Consoleの結果をクリップボードにコピーする](#consoleの結果をクリップボードにコピーする)
- [習得すると地味に便利なショートカット](#習得すると地味に便利なショートカット)
    - [タブを移動する](#タブを移動する)
    - [閉じたタブを開く](#閉じたタブを開く)
    - [シークレットモードを開く](#シークレットモードを開く)
    - [Devtools（要素指定で開く）](#devtools（要素指定で開く）)
    - [タブをまとめたい](#タブをまとめたい)
- [幸せな検索環境構築](#幸せな検索環境構築)
    - [特定のアドレスを含むページを検索に表示させない](#特定のアドレスを含むページを検索に表示させない)
    - [Qiitaの記事だけ表示したい](#qiitaの記事だけ表示したい)
    - [最新の技術記事を見たい](#最新の技術記事を見たい)
    - [特定の文字を含むページを除去したい](#特定の文字を含むページを除去したい)
    - [特定の文字列を絶対含むページだけ表示して！](#特定の文字列を絶対含むページだけ表示して！)
- [おわりに](#おわりに)


# 拡張機能
## そもそもどこにあるねん問題
どこにあるかすごく分かりづらいのでブックマーク奨励（アクセスしやすいところがあれば教えてください）。
https://chrome.google.com/webstore/

**素の開き方**
1. 右上の3点リーダー > その他のツール > 拡張機能
![スクリーンショット 2022-12-04 11.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/313a129e-24f7-c672-efa6-74e3177a75bf.png)

2. 左上のハンバーガーメニュー
![chrome___extensions_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/95f48084-69c3-84a6-2e14-ca4f5be1ebe2.png)

3. 左下のリンク
![chrome___extensions_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/c0d3a648-508d-c6a0-8ae6-38936cf74e2e.png)

再掲： **ブックマーク奨励！**

### それぞれの拡張機能にショートカットキーを充てる
1. 右上の3点リーダー > その他のツール > 拡張機能 >　左上のハンバーガーメニュー
![スクリーンショット 2022-12-04 11.38.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/8eddd99a-31b6-db29-2503-50c68ae2cb6f.png)

2. 鉛筆アイコン > 適応させたいコマンドを押す
![スクリーンショット 2022-12-04 11.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/90902d9f-6d41-3b72-09f5-e6bbbb3ce481.png)

## おすすめ拡張機能
### WebChatGPT
https://chrome.google.com/webstore/detail/webchatgpt-chatgpt-with-i/lpfemeioodjbpieminkklglpmhlngfcn
- ウェブ情報をもとにChatGPRが回答してくれる神拡張機能
- 2021年9月よりも新しい情報をもとに回答してくれるので、正確性＋信頼性UP
- 「URLの内容を要約して！」ができる

返答のベースとなる検索結果（多すぎると文字数を超えてしまうのでほどほどに）を指定する
![webchat.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/82edeb51-6b56-2158-cd21-963638da4e0a.jpeg)

すると検索結果を元にした返答が返ってくる（出典付き！）
![chat.openai.com_chat_model=gpt-4 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/d481384e-9d2f-5aa0-fdba-5e4393cdb7a1.png)


### Superpower ChatGPT
https://chrome.google.com/webstore/detail/superpower-chatgpt/amhmeenmapldpjdedekalnfifgnpfnkc
- ChatGPTとの会話の出力をMarkdownやJSONの形式でコピーできる
![スクリーンショット 2023-04-12 21.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/fef0c00d-dc3f-6b1b-1dc8-9d6062346463.png)
- ChatGPTとの会話履歴が消えない

- 文字数カウントしてくれている＋クリップボードがある（地味に嬉しい）
![スクリーンショット 2023-04-12 21.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/d43c9157-ec51-610b-4f32-0ed49adb325f.png)

- 履歴の検索ができる！
![スクリーンショット 2023-04-13 0.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/ac692fb7-5507-4eca-8cc5-07d738f0e115.png)

- お気に入りのプロンプトを保存して使いまわせる
![スクリーンショット 2023-04-12 21.21.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/3e4160f1-38ac-4fb4-4424-b878b7adda03.png)

これが地味にめっちゃくちゃ便利
![スクリーンショット 2023-04-12 21.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/f6a5b7c1-4878-bdcf-39a3-ec0525786cac.png)

- この拡張機能のコミュニティにプロンプトを共有できる＋他人のプロンプトをそのまま使える！


### Clear Cache
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
- ボタン一つでキャッシュをクリアできる
- ちょーべんり


### Find & Replace for Text Editing
https://chrome.google.com/webstore/detail/find-replace-for-text-edi/jajhdmnpiocpbpnlpejbgmpijgmoknnl
- 検索ツール
- 正規表現で検索できるので痒いところに手が届く検索ができる
- 検索でマッチした文字の置換もできるので結構便利

![regrex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/7cb08e88-d5fe-9fa0-2e0f-b1989e446c69.gif)


### Video Speed Controller
https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk
- 動画倍速ツール
- なんと18倍速まで対応
- 倍速した分だけ理解度は反比例するので注意
- Courseraなどの「全部見ないと完了にならない動画」を見るとき「全部飛ばして完了にするのはちょっとな...」というときに流し見用で使うのがいいかも


### DeepL翻訳：読みながら、書きながら使える翻訳ツール
https://chrome.google.com/webstore/detail/deepl-translate-reading-w/cofdbpoegempjloogbagkncekinflcnj
- 説明不要の英訳ツール。みんなインスコしてる？
- 文字を選択するとDeepLのアイコンがでるのでそれをクリックすると訳が出る
![deepL.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/9d00e3cb-0a45-ba39-f231-9b0eacd6d866.gif)


# DevTools
開き方： command ⌘ + option + I または F12
command ⌘ + shift + C： 要素指定で開く

## リファレンス
公式ドキュメント is 神
https://developer.chrome.com/docs/devtools/console/reference/

## 小技
### スクショを撮る
1. Devtoolsを開く
1. command ⌘ + shift + P
1. 「screen」 と　入力

![スクリーンショット 2022-12-04 13.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/89cce35a-1533-e9b6-ec85-a1e29c330398.png)

選択肢がいくつかありますが、それぞれ選択してみてどう映るか見てみましょう。
- スクリーンショットをキャプチャ
    - 現在表示されている画面のスクショが撮れる
![developer.chrome.com_docs_devtools_console_reference_ (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/228d5649-2692-4f60-a570-6affeb7391de.png)


- ノードのスクリーンショットをキャプチャ
    - 選択しているノードのスクショが撮れる
![スクリーンショット 2022-12-04 13.35.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/0be62f90-4b9d-b6b4-f3c7-e816670f1a81.png)

こちらがスクショできます。

![developer.chrome.com_docs_devtools_console_reference_ (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/d3f3274c-93a5-c7b0-4c17-dab35285a540.png)


- フルサイズのスクリーンショットをキャプチャ
    - ページ全体のスクショが撮れる

- 領域のスクリーンショットをキャプチャ
    - 選択した範囲のスクショが撮れる

### Consoleで特定の要素を取得する
```
$("セレクタ")
```
1. `document.querySelector`とほぼ一緒
2. `JQuery` と干渉する確率高め -> 次のやつを使った方がいいかも

### Consoleで特定の全要素を取得する
```
$$("セレクタ")
```
1. `document.querySelectorAll`とほぼ一緒
1. returnの型が`document.querySelectorAll`は　`NodeList` に対してこれは `Array` なのが超いい
    - NodeListだとArrayインターフェースが使えないので超ストレス
1. `$("セレクタ")`が無理なら `$$("セレクタ")[0]`が良いかも

![スクリーンショット 2022-12-04 18.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/c5570c54-992b-d21f-7a27-11f008a2094e.png)

こちらのカレンダーの日付の枠を取得したいなら

![スクリーンショット 2022-12-04 18.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/f3721ac4-c932-4d2d-c745-2a81ab97ea37.png)

こんな感じでデータを取得できる。


### Consoleで入力した直前の結果を使いたい
```
$_
```
![スクリーンショット 2022-12-04 13.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/4d161483-c084-07bc-f92e-25541c932a48.png)

### Consoleの結果をクリップボードにコピーする
```
copy()

// 例
copy($$("title")[0])
-> 結果がクリップボードにコピーされる
```
地味に便利

# 習得すると地味に便利なショートカット
## タブを移動する
- control + tab（右に移動）
- control + shift + tab（左に移動）

## 閉じたタブを開く
- command ⌘ + shift + T
- PCを一回再起動してChromeを開いたときなどに重宝, 最後に開いていたタブが全て復活する

## シークレットモードを開く
- command ⌘ + shift + N
- 拡張機能が干渉してエラーを起こすときにシークレットモードで開いてみると幸せなことがある

## Devtools（要素指定で開く）
- command ⌘ + shift + C
- 現在選択している要素にフォーカスされている状態でDevtoolsが開く

## タブをまとめたい
1. 現在開いているタブを右クリックする
1. 「タブを新しいグループに追加」を押す
![スクリーンショット 2022-12-04 13.57.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/0303c10f-7858-952b-e01b-bd86e0158e70.png)

3. タブのグループ名を設定する
![スクリーンショット 2022-12-04 14.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/886c2fe1-c25b-1d42-2d0a-eca987de5e1e.png)

4. まとめたいグループにタブを移動して整理する

超絶タブ地獄からある程度解放されそう（？）

# 幸せな検索環境構築
## 特定のアドレスを含むページを検索に表示させない
1. アドレスバーを右クリックして「検索エンジンとサイト内検索を管理する」をクリック
![スクリーンショット 2022-12-04 12.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/ae94664f-361c-4195-9f14-b6097fe16595.png)

2. サイト内検索の追加ボタンを押す
![スクリーンショット 2022-12-04 12.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/543897b8-edde-94a6-79d8-fa155c79c1e1.png)

3. 以下の内容を入力する
- 検索エンジン：任意のワード
- ショートカット：オリジナル検索エンジンを呼び出す文字列
- URL：適応させたいオリジナルの検索ルール
![スクリーンショット 2022-12-04 12.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/11824d5a-f22b-18ba-c462-7a43de4fb512.png)

おすすめの検索ルールはこちらです。
```
{google:baseURL}search?q=%s+-site:sejuku.net+-site:techacademy.jp+-site:-tech-camp.in&{google:RLZ}{google:originalQueryForSuggestion}{google:assistedQueryStats}{google:searchFieldtrialParameter}{google:iOSSearchLanguage}{google:searchClient}{google:sourceId}{google:contextualSearchVersion}ie={inputEncoding}
```

`{google:baseURL}` から `&{google:RLZ}`の間をカスタマイズするのですが
`search?q=%s`の末尾に `+-site:ドメイン名`の形式で追加していきます。
ここでは一部の技術記事サイトを除去して表示するようにします。
一例ですが`「js 文字列 置換 位置」`で検索してみます。

![スクリーンショット 2022-12-04 12.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/b4584929-93b9-8ee4-a3b1-3825040fcaf4.png)

これを先ほど設定した検索ツールを使用して検索してみます。
先ほど検索するための文字列を「g」にしたので、アドレスバーにgを入力してスペースを入力すると設定した検索エンジンに切り替わります。
そして `「js 文字列 置換 位置」`で検索してみます。

![jsdelete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/8a2e1853-1bde-4e8b-90f4-f9538c22bf59.gif)

上記ルールで設定した設定が適応されているのが確認できます。

![スクリーンショット 2022-12-04 12.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/0bbc1371-88fc-61df-d09d-c2522fee5947.png)

### Qiitaの記事だけ表示したい
上記の検索ルールを
```
https://qiita.com/search?q=%s
```
に変更する
![スクリーンショット 2022-12-04 13.11.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/68d51be7-ea46-d0a5-38b9-a1b0da7023f2.png)

![qita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/fc5880a3-a932-0eca-3e96-74d3545bd082.gif)


## 最新の技術記事を見たい
1. 検索タブの右端の「ツール」を選択
1. 「期間指定なし」を特定の期間に設定する

![スクリーンショット 2022-12-04 12.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/f7adbfb4-7ab8-55c5-db24-83a9594afd15.png)

jsなどの記事は古いと全く当てにならないので重宝します。

## 特定の文字を含むページを除去したい
以下を検索の最後につける
```
-文字
```

## 特定の文字列を絶対含むページだけ表示して！
以下を検索の最後につける
```
"文字"
```


# おわりに
これで最高のChromeライフ！！

明日は @tfactory さんによる「GCPでGDPR対応する」についてです。
引き続き、[GMOアドマーケティング Advent Calendar 2022](https://qiita.com/advent-calendar/2022/gmo-am) をお楽しみください！