#一から開発してみる場合
作業用のフォルダを作って次のファイルを置いて、拡張機能のページでデベロッパーモードにして、パッケージ化されていない拡張機能を読み込む...]で読込ます事で、自分用の拡張機能の開発をスタートする
{
"manifest_version": 2,
"name": "Hoge",
"version": "0.0.0.1"
}
Google Chrome 拡張機能の開発 - 8 - (2017年12月)1年ぶりなのでもう一度はじめの一歩 - Qiita
#既にあるものをいじってみる場合
以下のパスからいじってみたい拡張機能を作業用のフォルダにコピーして、拡張機能のページでデベロッパーモードにして、パッケージ化されていない拡張機能を読み込む...]で読込ます。
%UserProfile%\AppData\Local\Google\Chrome\User Data\Default\Extensions
#アクションを追加する
次を追加してリロード後、アイコンをクリックすると"ほげ"が表示される。
"browser_action": {
"default_popup": "hoge.html"
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ほげ</title>
<style></style>
</head>
<body>
<p>ほげ</p>
</body>
</html>
#バックグラウンド処理を追加する
次を追加してしてリロードすると、アラートで"ほげ"が表示される。
"background": {
"page": "bk.html"
}
<!doctype html>
<html>
<head>
<title>ほげ</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="bk.js"></script>
</head>
<body>
</body>
</html>
alert("ほげ");
#コンテキストメニューを追加する
次を追加・修正してリロード後、右クリックするとメニューに"ほげ"が表示される。
拡張機能の管理ページで[ビューを検証:]の欄にある"bk.html"のリンクをクリックすると、デベロッパーツールが表示される。
コンテキストメニューの"ほげ"をクリックすれば、コンソールに"ほげ"が表示される。
"permissions": [ "contextMenus" ]
chrome.contextMenus.create({title: "ほげ", id: "Hoge", contexts: ["all"], onclick: info=>{
console.log("ほげ");
}});
#コンテキストメニューの階層化
bk.jsを次のように修正。コンテキストメニューが[ほげ1].[ほげ2].[ほげ3]となる。
chrome.contextMenus.create({title: "ほげ1", id: "Hoge1", contexts: ["all"]});
chrome.contextMenus.create({title: "ほげ2", id: "Hoge2", parentId: "Hoge1", contexts: ["all"]});
chrome.contextMenus.create({title: "ほげ3", id: "Hoge3", parentId: "Hoge2", contexts: ["all"], onclick: info=>{
console.log("ほげ");
}});
#表示中のページにスクリプトを埋め込む
次を追加してしてリロード後、任意のページを開くか再読込するとコンソールにタイトルが出力される。
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js" : [ "cs.js" ],
"run_at": "document_end",
"all_frames": true
}
]
パラメーターについて
| パラメーター | 必須有無 | 説明 |
|---|---|---|
| matches | 必須 | パターンを使って一致するURLでコンテンツスクリプトを有効にする。 設定例: "matches": [ "<all_urls>" ]
|
| js | 必須 | cssかjsどちらかが必須。 埋め込むスクリプトファイルを指定する 設定例: "js": [ "jquery-3.1.1.min.js", "contentscripts.js" ]
|
| run_at | 任意 | コンテンツスクリプトを実行するタイミングを指定する。 とりあえず、DOM要素を読み込んだ後の document_endを指定することにしておく。設定例: "run_at": "document_end"
|
| all_frames | 任意 | 対象をフレーム全てとするかの指定。 設定例: "all_frames": true
|
【参考にした情報】
window.onload = ()=>{
console.log(document.title);
};
#公開方法
Chrome Extension を作って公開する - Qiita
既に公開していれば
デベロッパー ダッシュボード - Chrome ウェブストア