この記事は2020/02/18現在の情報及びツールを元に執筆しています

本記事の目的

タイトル通りです

想定する読書

・これからGooglePlugin開発を行おうと考えている人
・その中で「HelloWorld的な文書のログ出し」や「開発環境構築」から悩んでる人

前置き

GooglePluginの開発の情報自体はちゃんと検索すればそれなりに散見されますが、
GooglePluginという固有名詞が存在する以上、検索力が無いと既存の完成品の紹介記事等が引っ掛かり、
「初期開発」そのものの情報が探りにくいので、HelloWorldのログを開発者ツールに流すまでを
筆者なりに探した結果見つけたページを引用しながら紹介します。

成果物

なお「文書読みたくないから動くプロジェクトよこせ！」って方は、以下からzipかCloneで取得。
https://github.com/HarleyPrincess/HelloGooglePlugin
（Cloneで取得する場合、別途、Gitのインストールおよび知識を必要とします）
（上記手法で横着をこいても、後述する『作ったプラグインの確認方法』手順は必要です）

環境構築

・GoogleChorme
https://www.google.com/intl/ja_jp/chrome/

・読者のお気に入りのコードエディタ
（エディタは色々と宗派がありますが、筆者はVSCode Windows版を推奨します）
https://code.visualstudio.com/

ついでに以下の日本語化設定もインストール後に行うとよいかと思います
Visual Studio Codeで日本語化する方法[Windows]

ディレクトリ構成

root_folder
│  manifest.json
│  popup.html
│
└─js
        background.js
        content_scripts.js
        jquery-3.4.0.min.js
        popup.js

各ソース説明

以下の記事を参考に、CSS部分やアイコン設定は今回必要ないと判断したので、とっぱらっています
https://karupoimou.hatenablog.com/entry/2019/04/22/032726

manifest.json

manifest.json

{
    "manifest_version": 2,
    "name": "HelloGooglePlugin",
    "description": "Google開発者ツールでHelloWorldをログに出すためだけのプラグイン",
    "version": "1.0",

    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*" ],
        "js": ["js/content_scripts.js"]
    }],
    "background": {
        "scripts": ["js/background.js"]
    },
    "browser_action": {
        "default_title": "HelloGooglePlugin",
         "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "background",
        "http://*/*",
        "https://*/*"
    ]
}

細かい説明は省略。
このプラグインを表す様々な情報を記すjson。
「プラグイン名」「プラグインの情報」「どんなファイルを使うか」
「実行に必要な許可情報」「実行するサイトの対象URL」等、雑多な情報を記述する設定ファイル。

popup.html

html.popup.html

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <!--<link rel="stylesheet" href="css/style.css">-->
      <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="js/popup.js"></script>
  </head>
      <body style="min-width:250px">
            <input type="button" id="popup_btn" value="Hello Google Plugin" /><br>
      </body>
</html>

Chormeのプラグインが並んでいる右上の小さいアイコンをクリックしたときに表示する
ポップアップ上のhtml。

popup.js

popup.js

$(function(){
    $("#popup_btn").click(function(){
        console.log('Hello Google Plugin by popup.js!');
    });
});

popup.htmlから呼び出されているjsファイル。
ひとまず、popup.htmlにidで名づけられたpopup_btnが押された時のイベントを記述。

content_scripts.js

content_scripts.js

console.log('Hello Google Plugin by content_scripts.js!');

こちらのスクリプトは「manifest.json」で記した「実行するサイトの対象URL」を
読み込んだ時に1回実行されます（もしかすると読み込み時ではなくアクセス時かもしれません）。

background.js

こちらに関しては、ちょっとまだ学が追い付てないです…。
かじった限りでは、他のjs同士の情報共有（変数の共有）に使えるだの（未検証）
どちらにせよ、今後開発するpluginでその機能が必要なので、その時にがっつり研究して検証予定。

jquery

これ言ったら刺されそうなんですけど、JavaScriptのライブラリ系は専門外です…。
なんかJavaScript界隈で有名で凄い奴という説明で、無知な自分の説明とさせてください…。

作ったプラグインの確認方法

自分が作ったプロジェクトを例に説明

1.GoogleChormeを開いて右上の「…」（を縦にしたボタン）をクリック
2.「設定」を選択
3.画面左の「拡張機能」を選択
4.「拡張機能」画面上の「パッケージ化されてない拡張機能の読み込み」を選択
5.manifest.jsonが入っているルートフォルダ（自分が作ったプロジェクトだとsrcフォルダ）を選択
6.画面右上の「１」で選んだボタンの左に、味気ない自作プラグインの小型アイコンが表示されているかチェック

HelloWorldの確認方法

こちらに画像付きで詳しく乗ってる良記事があったので共有いたします。

Chrome拡張機能開発　chrome.browserAction アクションボタンのサンプル
万が一消えたときに思い出せるように、
各種のjsファイルのConsole.Logの出力の確認方法を、軽く文書化しておきます

background.js

1.拡張機能画面を開く
2.自分が開発した拡張機能の表示部分の「ビューを表示：バックグラウンドページ」をクリック

content.js

1.実行確認したいページで、F12（一部キーボードはFnキー＋キーボード上部の対応したキー）を押す
2.Consoleが開くので、その状態で確認したいページで更新（F5）を押す

popup.js

1.GoogleChorme右上の自分のプラグインのアイコンを右クリック
2.「ポップアップを検証」を選択
3.ボタンを押してログを確認

#締め

以上で、GoogleChormeのpluginの開発環境と、主要ファイルでのConsole.Logでの確認方法が終わります。

alertでHelloしちゃだめなの？
それをpopup.htmlのボタンからやると、ブラウザがハングしてALT+CTRL+DELETEする羽目になるので、
文字列確認ならConsole.Logのほうが精神衛生と開発効率に良いです。