Chrome拡張のコードのうち、対象となるページの状態を直接読んだり変更したりできるものがコンテントスクリプトです。
だから「manifest.json」で特別に宣言するんでしょうね。
contentscript.jsのソースコード
/*
* コンテントスクリプト
*/
// パソコンに保存する情報を蓄えるオブジェクトを定義する
var condlist = {"cond":[]};
$(function(){
var regex = /求人情報検索/;
if (regex.test(document.body.innerText)) {
// regexに設定した文字列が対象URL内のBodyタグ内に見つかれば、
// バックグラウンドに通知する
chrome.extension.sendRequest({}, function(response) {});
} else {
// 見つからない場合
}
// バックグラウンドやポップアップ等の拡張機能から
// コンテントスクリプトへのリクエストをモニタして、
// リクエストがきたら関数(onRequest)を実行する
//
// ポップアップの３種類のボタンをクリックしたとき
// ポップアップからのリクエストを経由して呼ばれる
chrome.extension.onRequest.addListener(onRequest);
});
function clearConditions(){
// ポップアップの「クリア」ボタンをクリックしたとき
// ポップアップからのリクエストを経由して呼ばれる
//
// パソコン内に保存していた情報を初期状態にする
condlist = {"cond":[]};
// condlistに溜まった情報を文字列化してパソコンに保存する。
// これでパソコン内に保存していた情報が初期状態になる
localStorage["condlist"] = JSON.stringify(condlist);
}
function saveConditions(){
// ポップアップの「書き出し」ボタンをクリックしたとき
// ポップアップからのリクエストを経由して呼ばれる
//
// URLページに入力された情報を一旦オブジェクトに集めてパソコン内に保存する
// 処理前にcondlistを初期化（そうしないとどんどん溜まる）
condlist = {"cond":[]};
condcnt = 0;
$("input").each(function(){
// 「ラジオボタン」「チェックボックス」「テキスト（文字列や数字列）」
// で設定する情報をcondlistに追加する
str = $(this).attr("id");
str_v = $(this).val();
str_t = $(this).attr("type");
if( typeof str != 'undefined' ){
if(str_t == "radio"){
// 「ラジオボタン」で設定する情報をcondlistに追加する
if(typeof $(this).attr("checked") != 'undefined'){
str_v = 1;
}else{
str_v = 0;
}
obj = {"id":str,"type":str_t,"val":str_v};
condlist['cond'][condcnt++] = obj;
}else if(str_t == "checkbox"){
// 「チェックボックス」で設定する情報をcondlistに追加する
if(typeof $(this).attr("checked") != 'undefined'){
str_v = 1;
}else{
str_v = 0;
}
obj = {"id":str,"type":str_t,"val":str_v};
condlist['cond'][condcnt++] = obj;
}else if(str_t == "text"){
// 「テキスト」で設定する情報をcondlistに追加する
obj = {"id":str,"type":str_t,"val":str_v};
condlist['cond'][condcnt++] = obj;
}
}
});
$("select").each(function(){
// 「選択」で設定する情報をcondlistに追加する
str = $(this).attr("id");
str_v = $(this).val();
str_t = "select";
if( typeof str != 'undefined' ){
obj = {"id":str,"type":str_t,"val":str_v};
console.log("obj:"+obj);
console.log("id="+str+" val:"+str_v+" type:"+str_t);
condlist['cond'][condcnt++] = obj;
}
});
// condlistに溜まった情報を文字列化してパソコンに保存する
localStorage["condlist"] = JSON.stringify(condlist);
}
function restoreConditions(){
// ポップアップの「読み込み」ボタンをクリックしたとき
// ポップアップからのリクエストを経由して呼ばれる
//
// パソコン内に保存されていた情報を、URLページの入力・選択フィールドに
// 設定する
// パソコン内に保存されていた情報を、処理し易いようにオプジェクト
// に変換してcondlistに設定する
condlist = JSON.parse(localStorage["condlist"]);
// まずラジオボタンやチェックボックスを全部オフしておく
$('input').removeAttr("checked");
// 入力・選択フィールドの種類に従い情報を設定する
for(var i=0; i < condlist['cond'].length; i++){
var cond = condlist['cond'][i];
var itag = $("#"+cond.id);
if(cond.type == "checkbox"){
if(cond.val != 0) itag.attr("checked","checked");
}else if(cond.type == "radio"){
if(cond.val != 0) itag.attr("checked","checked");
}else if(cond.type == "text"){
itag.val(cond.val);
}else if(cond.type == "select"){
itag.val(cond.val);
}
}
}
function onRequest(request, sender, sendResponse) {
// ポップアップの３種類のボタンをクリックしたとき
// ポップアップからのリクエストを経由して呼ばれる
//
// パソコン内に保存されていた情報を、URLページの入力・選択フィールドに
// 設定する
if(request.greeting == "restore"){
// リクエストのメッセージ内容に従い処理を分ける
restoreConditions();
}else if(request.greeting == "save"){
// リクエストのメッセージ内容に従い処理を分ける
saveConditions();
}else if(request.greeting == "clear"){
// リクエストのメッセージ内容に従い処理を分ける
clearConditions();
}
sendResponse({});
};
関連する記事
導入から公開まで13時間！Chrome拡張機能の開発[1of6]
導入から公開まで13時間！Chrome拡張機能の開発[2of6]
導入から公開まで13時間！Chrome拡張機能の開発[3of6]
導入から公開まで13時間！Chrome拡張機能の開発[4of6]
導入から公開まで13時間！Chrome拡張機能の開発[5of6]
導入から公開まで13時間！Chrome拡張機能の開発[6of6]
お世話になったリンク
Chrome Extensions API リファレンス
Sample Extensions - Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う - 日頃の行い
ハローワークの「求人情報検索」ページ