この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Google Chrome Extention講座 第四回「見ているページに要素を追加する」

前回は見ているページのリンクを全て取得してコンソールログに保存しましたが、今回は見ているページに勝手に要素を追加してそこにリンクを表示させてみます。こうすればコンソールログを開かなくてもいいので見やすいですね。
まずは見ているページに要素を追加する方法です。

「script.js」を以下のように書き換えます。

$( function()
{
	$( "body" ).prepend( '<div id="append-content">これは追加した要素です</div>' );

});

「.prepend」は指定された要素の直後にコンテンツを追加するメソッドです。
上記の例では「body」タグの直後に「<div id=”append-content”>これは追加した要素です</div>」を追加しています。
ブラウザで見ると全てのページに「これは追加した要素です」と表示されます。

しかし、これではいまいち見にくいですね。
そこでスタイルシートを適用させて見やすくしてみましょう。
スタイルシートは「style属性」で直接タグで指定できます。画面の真ん中に来るように指定してみます。
ちょっと長いですがスタイルシートでレイヤーとして浮遊させています。

見ているページに要素を追加
見ているページに要素を追加
$( function()
{
	$( "body" ).prepend( '<div id="append-content" "style=position:absolute; top:50%; left:50%; margin-left:-160px; margin-top:-100px; padding-left:8px; padding-right:8px; padding-top:8px; border:5px solid #E0E0E0; width:320px; height:200px; background-color:#FFFFFF; z-index:9999;">これは追加した要素です</div>' );

});

ポイントはどんなページであれ、自由に要素を追加したり変更したりできる、ということです。

関連記事