フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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>' );

});

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

会員限定コンテンツ

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

ログインはこちら

新規会員登録はこちら

パスワードをメールで送信します。

コメント

  1. 2018/04/12(木) 09:48:32
    スタイルシート読み込みで単純にソース開いても肝心のページの内容読めないようにするとかいうデザインと嫌がらせを兼ねたコーディングもやったよね!
  2. 2018/04/12(木) 09:48:32
    隠しページ探し、スタイルシートを無効化すると見えるようになるパターンを思いついた
  3. 2018/04/12(木) 09:48:32
    スタイルシートをいじって作品のページのフォントを直しました 記憶がないんだけどなぜかttタグを入れていてそのせいでスタイルシート無効になってた なんで過去の自分はあんなもん書き込んだのかな? 拡大とかできたほうが読みやすいかもしれないからまた少し考えます
  4. 2018/04/12(木) 09:48:32
    裏ページって必ず背景色黒だったりしなかった?如何にも裏です!隠しページです!的な。 あとは日記ページあるとこは、パスワード付きだったりとか 無駄にメニュー名を英語表記にしてるとか スタイルシートとHTML編集失敗して、タグがテキスト表示されてるとこがあったりとか
  5. 2018/04/12(木) 09:48:32
    【ホームページ作成】 最低限の表示で1ページ作るだけならテキストエディタで「index.html」を作ればシンプルなページが作れます。 そこに「style.css」のスタイルシートでデザインや大きさや色を指定。 さらに「imgフォルダ」で画像を追加するとそれなりのページになります。

記事に戻る

コメントを残す