投稿日:

Chrome addon を作ってみようぜ！

Chrome addon を作ってみようぜ！

2 サンプル

2.1 テスト00 最小構成、スクリプト無しタイプ

2.1.1 この操作を行っている動画

2.1.2 manifest.json

{
  "name" : "helloworld",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension"
}

2.1.3 ファイル階層

  • chromeaddon000フォルダに入れてます。
chrome_addon_000
└── js
    └── manifest.json

1 directory, 1 file

2.1.4 作成したChromeアドオンをChromeにインストールする方法

  • Chromeを立ち上げ
  • Chromeのメニューの（メニューを開くところは画面の右上にあります。縦に３つ点が並んでいるところクリック）「その他ツール」「拡張機能」を選択して、拡張機能画面を出す。
  • 拡張機能画面の右上にある「デベロッパーモード」の横のところをクリックして有効にします。これをすると、「パッケージ化されていない拡張機能を読み込む」「拡張機能をパッケージ化」「更新」という３つのボタンが上部に現れます。
  • 「パッケージ化されていない拡張機能を読み込む」をクリックして、読み込みたい拡張機能のmanifest.jsonがあるディレクトリを選択して「開く」を押します。
  • 操作に成功すると、helloworld 0.0.1 という新しいChromeアドオンが追加されます。

2.2 テスト01 指定のサイト(私のブログhttps://blog.123abcsoft.com/)を開くとログが出力されて、ポップアップウインドウが表示される

2.2.1 この操作を行っている動画

2.2.2 manifest.json

  • テスト00に加えて、contentscriptsが追加されています。
  • contentscriptsのmatchesで、js要素にかかれている　helloworld.js を起動する動作となります。
  • FirefoxのGreasemonkey, ChromeのTampermonkey的な動作となります。
{
  "name" : "helloworld",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }]
}

2.2.3 helloworld.js

  • 1行目がデベロッパーツールのconsoleに文字列を表示する命令になっています。
  • 2行目がポップアップを出す命令になってます。
console.log("Hello World");
alert("Hello World");

2.2.4 ファイル階層

  • chromeaddon001フォルダに入れてます。

2.2.5 ファイル階層

  • chromeaddon001helloworld フォルダに入れてます。
chrome_addon_001_helloworld/
└── js
    ├── helloworld.js
    └── manifest.json

1 directory, 2 files

2.2.6 作成したChromeアドオンをChromeにインストールする方法

  • test01の最小構成のChromeアドオンと同じように追加できます。上を参照してください。

2.2.7 動作について

  • 私のブログhttps://blog.123abcsoft.com/ をアドオンインストール後に訪問すると、ポップアップが出て、デベロッパーツールのConsoleにも表示がで出ます。

2.3 テスト02 テスト01にアイコンを追加

2.3.1 この操作を行っている動画

  • 動画はまだ作成していないので、作成したら追加します

2.3.2 manifest.json

{
  "name" : "helloworld",
  "version" : "0.0.2",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.3.3 helloworld.js

  • テスト01のhelloworld.jsと同じ

2.3.4 fractal128.png

  • 128×128のpngファイルであれば何でもOK
  • 私はImageMagickの convert コマンドで生成しました。生成コマンドは以下のとおり
convert -size 128x128  plasma:fractal fractal128.png

2.3.5 ファイル階層

  • chromeaddon002addicon/ フォルダに入れてます。
chrome_addon_002_add_icon/
└── js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    └── manifest.json

2 directories, 3 files

2.4 テスト03 テスト02を、表示文字をstorageの変数からもってくるように改造

2.4.1 この操作を行っている動画

  • 動画はまだ作成していないので、作成したら追加します

2.4.2 manifest.json

  • chromeアドオンの設定関係を記述するファイル。
  • 前のテスト02から permissions(storage関連)、background追加
  • permissionsの設定で、storageへのアクセスを許可して、表示する文字列を保存してます。
  • background.jsがパッケージインストール時に実行されるように設定
{
  "name" : "helloworld",
  "version" : "0.0.3",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.4.3 background.js

  • 今回追加
  • 変数に表示する文字列を初期設定してます。
  • chrome.runtime.onInstalled.addListener(function() { … }) で　… がアドオンインストール時に実行されるようにイベント登録
  • chrome.storage.sync.set({helloworldtext : ‘Hello World!’}, function() { … }); で　storage の　helloworldtext の変数セット
  • chrome.storage.sync.get(‘helloworldtext’ , function(data) { … }); で　storage の　helloworldtext の変数をゲット。data.helloworldtext でその値にアクセス。
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({helloworldtext : 'Hello World!'}, function() {
    chrome.storage.sync.get('helloworldtext', function(data) {
      console.log("storage variale helloworldtext is '"+data.helloworldtext+"'");
    });
  });
});

2.4.4 helloworld.js

  • storageにいれてある変数を利用して表示するように改造
  • chrome.storage.sync.get(‘helloworldtext’ , function(data) { … }); で　storage の　helloworldtext の変数をゲット。data.helloworldtext でその値にアクセス。
chrome.storage.sync.get('helloworldtext', function(data) {
  console.log(data.helloworldtext);
  alert(data.helloworldtext);
});

2.4.5 fractal128.png

  • テスト02と同じものを利用しました。
  • 私はImageMagickの convert コマンドで生成しました。生成コマンドは以下のとおり
convert -size 128x128  plasma:fractal fractal128.png

2.4.6 ファイル階層

  • chromeaddon003addbackgroud.js/ フォルダに入れてます。
chrome_addon_003_add_backgroud.js/
└── js
    ├── background.js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    └── manifest.json

2 directories, 4 files

2.5 テスト04 テスト03をoption設定可能に

2.5.1 この操作を行っている動画

  • 動画はまだ作成していないので、作成したら追加します

2.5.2 manifest.json

  • chromeアドオンの設定関係を記述するファイル。
  • 前のテスト03にoptionspage追加
{
  "name" : "helloworld",
  "version" : "0.0.4",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "options_page": "options.html",
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.5.3 options.html

  • オプション設定画面
<!DOCTYPE html>
<html>
  <head>
    <style>
    </style>
  </head>
  <body>
    <script src="./jquery-3.4.1.min.js"></script>
    <div id="textInput">
      <input id="mytext"></input>
    </div>
    <div>
      <p>text for log and alart</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

2.5.4 options.js

  • input#mytext の内容が変化したらその値をstorageにセット
  • options.htmlを開いたら、input#mytext に現在のstorageの値をセットして表示
$('#mytext').change(function() {
  chrome.storage.sync.set({helloworldtext : $(this).val()}, function(data) {
    chrome.storage.sync.get('helloworldtext', function(data) {
      console.log("storage variale helloworldtext is '"+data.helloworldtext+"'");
    });
  });
});
chrome.storage.sync.get('helloworldtext', function(data) {
  console.log(data.helloworldtext);
  $('#mytext').val(data.helloworldtext);
});

2.5.5 jquery-3.4.1.min.js

2.5.6 background.js

  • テスト03と同じ

2.5.7 helloworld.js

  • テスト03と同じ

2.5.8 fractal128.png

  • テスト03と同じ

2.5.9 ファイル階層

  • chromeaddon004addoptions/ フォルダに入れてます。
chrome_addon_004_add_options/
└── js
    ├── background.js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    ├── jquery-3.4.1.min.js
    ├── manifest.json
    ├── options.html
    └── options.js

2 directories, 7 files

3 続きを追記してきます。

著者: NM Max

Created: 2019-06-28 金 12:51

Validate