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


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

前回はスタイルシートを指定して見ているページの画面中央にレイヤーを追加してみました。しかし、毎回スタイルシートに記述すると面倒ですよね。今回は外部スタイルシートを用いて同じことをしてみます。

まず「manifest.json」ファイルを以下のように書き換えます。
「content_scripts」に「css」が追加されているのが分かります。

{
	"manifest_version": 2,
	"name": "sample4",
	"description": "sample description",
	"version": "1.0",
	"browser_action":
	{
		"default_icon": "icon128.png"
	},
	"content_scripts": [
		{
		  "matches": [
			"http://*/*",
			"https://*/*"
		  ],
		  "js": [ "jquery-2.1.4.min.js" , "script.js" ],
		  "css": [ "style.css" ] 
		}
	  ],
	  "permissions": [
		"tabs",
		"https://*/*",
		"http://*/*",
		"storage"
	  ]
}

これは自分で用意した「style.css」を読み込むよという意味です。
「style.css」は以下の内容にします。

#append-content
{
	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;
}

普通のスタイルシートと変わりませんね。
これでjqueryで要素を追加しても、スタイルシートに記述されたスタイルであれば自動的にスタイルが適用されるようになり便利です。
というわけで、「script.js」を以下のように書き換えます。

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

});

結果は前回とまったく一緒ですが、非常にシンプルになったと思います。

関連記事