PC

自分でChrome拡張機能を作ろう!

投稿日:8月 5, 2017 更新日:

はじめに

みなさんは、Google Chrome(グーグル クローム)を使っているとき、たまに拡張機能(かくちょうきのう)をインストールしたりしませんか?

丸で囲んだのが作った拡張機能だ

これは、使い勝手をよくしたり、便利機能があったりして、とてもうれしいものです。

さて、この拡張機能を「自分で」作ってみたいと思ったことはありませんか?

実は、Windowsアプリのように重たい開発ソフトを入れることなく、メモ帳から始めることができるんです!

準備物

・パソコン(できればWindows 10)

・Google Chrome

・編集ソフト(atom.ioがおすすめですが、メモ帳でも構いません)

環境を整えよう

まず、エクスプローラーを開いて、デスクトップなどでもいいので、フォルダを作りましょう。名前は、ここでは「webapp」と名付けましょう。

フォルダが作成された

作成できたら、webappフォルダに移動してください。これで準備完了です。

まずは「自己紹介ファイル」を作ろう

まず、Chromeの拡張機能を作るには、ブラウザで「これは拡張機能だな」と認めてもらえるように、「自己紹介ファイル」を作らなくてはいけません。(※IT用語が分かる方へ:マニフェストファイルと呼びます。)

まず、メモ帳を起動してください。起動したら、入力作業に入ります。

自己紹介ファイルのコード

{
“manifest_version”: 2,
“name”: “テスト拡張機能”,
“description”: “拡張機能テスト”,
“version”: “1.0”,
“browser_action”: {
“default_icon”: “icon.png”,
“default_popup”: “index.html”,
“default_title”: “テスト拡張機能”
},

 “content_scripts”: [
 {
  “matches”: [“http://*/*”,”https://*/*”],
   “js”: [“jquery.js”,”appContent.js”]
 }
 ],

“permissions”: [“<all_urls>”]
}

 

コードの説明

まず、自己紹介ファイルの説明をします。表にまとめました。

 

 
プロパティ説明
manifest_version自己紹介ファイルのバージョンを書きます。必ず2を指定します。
nameアプリの名前を書きます。
descriptionアプリの説明を書きます。
versionアプリのバージョンを書きます。
browser_actiondefault_icon:アプリのアイコンを指定します

default_popup:アプリをクリックしたときに出てくる画面を指定します

default_title:アプリにマウスをかざしたときに表示する文字を指定します

content_scriptsmatches:この拡張機能が動く条件URLを指定します。

js:条件がそろったときに読み込むJavaScriptファイルを指定します。

上のコードをコピーしてメモ帳に貼り付けて構いません。

できたら、保存してください。この時、「manifest.json」と名前を付けてください。

そして、テキストドキュメントではなく、「すべてのファイル」を選んでください。

リストから「すべてのファイル」を選ぶ

これで自己紹介ファイルは完成です!次は、メインとなるものを作ります。

ページにいたずらしちゃう拡張機能にしよう

さて、メインとなるプログラムを作ります。

ここでは、「ページにいたずらをする」拡張機能を作ります。

ページにいたずらをするコード

$(function () {
   var edit = $("body").html().replace(/ー/g,"━━━━(゚∀゚)━━━━");
   $("body").html(edit);

});

説明はここではスキップします。簡単に言うと、ページの「-」を「━━━━(゚∀゚)━━━━」に置き換えるものです。

新しくメモ帳を開いて、コピー&ペーストしてください。

保存するときは名前を「content.js」にしてください。また、下のリストは「テキスト文書」ではなく「すべてのファイル」を選んでください。

「すべてのファイル」を選ぶ

これで、メインプログラムはできました。

アイコンをクリックすると出る吹き出しを作ろう

最後に、アイコンをクリックすると出てくる「ポップアップ」というものを作りましょう。

アプリアイコンを押すと出てくる「ポップアップ」

 

 

 

 

 

 

 

 

 

 

 

 

それでは、また新しくメモ帳を開きます。

ポップアップするコード

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<h3>テスト拡張機能</h3>
<p>この拡張機能は、サイトをいじります。</p>
</body>
</html>

これを保存します。名前は「index.html」にします。

また、下のリストは「テキスト文書」ではなく「すべてのファイル」を選んでください。

「すべてのファイル」を選ぶ

これで、ポップアップは完成です。

最後にアイコンを置こう

アプリにはアイコンが必要です。今回は記事で用意しましたので、下のアイコンをクリックして保存してください。そして、webappフォルダに置いてください。

icon.png

Chromeに拡張機能をいよいよ追加!

最後に、Chromeに自作した拡張機能を追加してみましょう。

まず、新しいタブを開いて、「chrome://extensions」と入力してEnterを押します。

chrome://extensionsと入力

そうすると、Chromeの拡張機能を管理する画面が表示されます。

Chromeの拡張機能を管理する画面が出る

 

でも、これでは何もできません。右上の「デベロッパーモード」にチェックを入れてください。

デベロッパーモードをオンにする

すると、下になにやらボタンが出ます。

デベロッパーモードで出てくるボタン

出てきたボタンの中で「パッケージ化されていない拡張機能を読み込む…」ボタンを押してください。そして、選択画面が出てきたら、webappフォルダを選んでください。

すると、拡張機能が増えるはずです。

ちゃんと追加された

そして、ブラウザの右上にはアイコンが1つ増えているはずです。

丸で囲んだのが作った拡張機能だ

クリックすると、吹き出しが出ると思います。

拡張機能をインストールするときのトラブルシューティング

この記事内で使った拡張機能がエラーが出てインストールできないときの対処法を紹介します。

英語でエラーが出る

エラーが出る

対処方法

・入力が間違っていないかチェックする

・それでもダメな場合は、記事にコメントをください。

執筆者:

Sponsored Link

-PC
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • Loading...