ひよこwebプログラマーの覚え書き

エクセルとwebで効率化しますさせます

*

google拡張機能を開発する その3 改造編

   

Pocket

「test」拡張機能をインストールできたら、どのタブでもいいのでリロードしてみてください(googleに関するサイト以外、シークレットモード以外でお願いします)。

どうでしょう、なにか変化があったでしょうか。

以下はニコニコ動画の一部なのですが

1

背景色の変更、要素の追加が行われました。また、strong要素をクリックするとアラートが出ます。

myscript.jsの中身はこのようになっています。

$(document).ready(function(){
//背景色の変更
alert(“change background”);
$(‘*’).css(‘background’,’#888′);
//strongのクリックイベントを追加
alert(“click strong!”);
$(“strong”).click(function(){
alert(“click strong!”);
});
//bodyを消す
// $(‘body’).remove();
alert(“remove ok”);
});
function addElement() {
var element = document.createElement(‘div’);
element.id = “id”;
element.innerHTML = “hogehoge”;
element.style.color = ‘red’;

var objBody = document.getElementsByTagName(“body”).item(0);
objBody.appendChild(element);
// body要素にdivエレメントを追加
alert(“append ok”);
} ;
addElement() ;

alertを変えてみたり、divをbuttonに変えてみてください。

なお、ファイルの変更後は拡張機能タブでリロードしないと変更は反映されません。

1

このページで必ずリロードして下さい。

なんとなく理解できたでしょうか。

 

軽く説明しますと

$(document).ready(function(){

});

の中に書いたものはページがロードし終わってから実行されます。基本、この中に書いておけば間違いありません。ややとっつきにくい印象ですが、あまり気にせずこの形のまま使えば良いです。そのうち慣れます。

addElement() ;が外に出ていますが、実はあまり良くないです。サーバーが重い時、全てロード仕切らないうちに実行してしまうと思わぬ動作を引き起こす可能性があります。

 

alert(“change background”);

アラートを出します。結構邪魔なので、一度見た後は消してしまっても良いです。

 

$(‘*’).css(‘background’,’#888′);

は全ての要素の背景色を変えています。

$(document).ready(function(){

});

の中に書かれているので、ページがロードされてから背景色を変える、という流れですね。

 

$(“strong”).click(function(){
alert(“click strong!”);
});

はstrong要素をクリック→アラートを出す、と動作を紐付けしています。$(document).ready…と同じで、この形のまま使えばよいです。

onClick()とほぼ同じものと思って構いません。
// $(‘body’).remove();

このコメントアウト「//」を取ると、bodyが全て消えます。毎回消えると面倒なのであえてコメントアウトにしてあります。

何となくjsでなにかやっているんだなぁ、ということが伝われば幸いです。

続く。

 

 - google-extension, プログラム

Message

メールアドレスが公開されることはありません。

  関連記事

wordpress-logo-notext-rgb
Contact Form 7で複数の項目をPHPで処理する

Contact Form 7、お問い合わせフォームの定番プラグインです。 デフォ …

Adobe_Illustrator_Icon_CS6-150x150
after擬似要素が分裂する場合の対処方法

after擬似要素の付いている要素にappendすると、afterが分裂します。 …

no image
google拡張機能を開発する その6 公開編

後はいよいよ公開するだけです。 https://chrome.google.co …

no image
cssがおかしい時に確認すること

突然ズレた、うまくいかない時に確認すること ・セミコロンが抜けている いつもの事 …

no image
google拡張機能を開発する その5 本編 manifest.json以外について

manifest.jsonさえ乗り越えれば後は簡単です。ざっと見て行きましょう。 …

no image
google拡張機能を開発する その1 導入編

公開して広告収入を稼ぐも良し、自分の作業を楽にする、サイトを自分好みに変える、な …

Adobe_Illustrator_Icon_CS6-150x150
jQueryでselect要素、option要素の中からテキスト・文字列で選択する方法

例としてこんなselect要素、option要素があるとします。そして青森を選択 …

Adobe_Illustrator_Icon_CS6-150x150
jQueryでクリックしたことにする

フォームに文字を入力する時「input要素をクリックする動作」を検知するサイトが …

no image
jquery、jquery-mobileの.liveが使えない

jquery1.7で廃止されていました。 検索すると $(ページID).live …

wordpress-logo-notext-rgb
WordPress SEO by Yoastでイベントトラッキングが使えない時

「WordPress SEO by Yoast」という有名なプラグインがあります …