Chrome Extensionの作り方講座その3・ContentScriptを使ってみる

Author:
content_script2

ChromeExtensionの作り方3週目は、ContentScriptsの説明です。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う

ContentScriptsとは、簡単に言うと今表示されているページにscriptを追加させる機能です。
<script type=”text/javascript” src=”xxx.js”><script>
表示されているページにこのタグが挿入されると思えばいいかと。
当然ですが表示されているページのタグをいじったりJSの関数も呼べます。うわあセキュリティ怖い。

manifestはこんな感じになります。

{
  "manifest_version": 2,

  "name": "content script sample",
  "description": "change anchor tags to open new tab",
  "version": "1.0",
  "content_scripts" : [{
    "matches": ["http://*/*", "https://*/*"],
    "js" : ["jquery-2.0.3.min.js", "content.js"]
  }],

  "icons" : {
    "19": "icon.png"
  }
}

見ての通り、matchsに有効にしたいURLを入れてjsでどんなjsを読み込むかを設定します。
この場合はjqueryと独自スクリプトを読んでいますね。
今回content.jsの中身はこれだけ書いています。

$(function() {
    $("a").attr("target", "_blank");
});

すべてのaタグにtarget=”_blank”を追加するスクリプトです。

これらをすべて入れたフォルダをChromeから読み込み、matchesの対象となったURLに対して、開発者ツールを開いてみてください。
SourceのContent Scriptsに今追加したjsが増えているのが分かるでしょう。
デバッグもここからできます。

content_script2

今回はここまで。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions

Share on Facebook
Pocket