Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
140
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい

ゴール

Google Chrome拡張から、閲覧中のページにJavaScriptを送り込んで、そのページのWindowオブジェクトにオブジェクトを追加する拡張を作る。なお、今回の成果物はGitHubで見ることができる。

1. 拡張を作る

ファイル構成は、マニフェスト、アイコン画像、2つのJavaScriptからなる。

├── content-script.js
├── embeded-script.js
├── icons
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   └── icon48.png
└── manifest.json

content-script.js

ページを開いた時に実行するスクリプト。このスクリプトはChrome拡張の閉じた環境で実行されるので、ページの Windowオブジェクトにオブジェクトを追加することはできない。そのため、ページに <script> タグを描画することで、Window オブジェクトを変更するスクリプトを送り込む。

content-script.js
var injectScript;

injectScript = function(file, node) {
  var s, th;
  th = document.getElementsByTagName(node)[0];
  s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', file);
  return th.appendChild(s);
};

injectScript(chrome.extension.getURL('/embeded-script.js'), 'body');

embeded-script.js

送り込まれるスクリプト。このスクリプトは Window オブジェクトを操作できる。

embeded-script.js
window.MyEmbededProgram = {
  helloWorld: function() {
    alert("Hello World!")
  }
};

注意点として、送り込まれたスクリプトは拡張から提供されたと言え、ただのJavaScriptになるので、直接拡張の機能やAPIをコールすることはできない。これを解決する方法は次回で紹介するので、ここでは割愛する。

manifest.json

ページにスクリプトを送り込みたいので、それができる設定を manifest.json に宣言する必要がある。まず、すべてのページで content-script.js が実行されるように matches<all_urls> にする。permissions についても <all_urls> を設定しておく。次に、ページ上で拡張のJSを読み込めるようにするために、 web_accessible_resourcesembeded-script.js を設定する。

manifest.json
{
  "name": "Example 1: Embed Scripts to All Web Pages",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This is an example to embed scripts to all web pages",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content-script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "embeded-script.js"
  ],
  "permissions": [
    "<all_urls>"
  ]
}

2. 実行してみる

適当なウェブサイトに行き、インスペクタを開いたら、そこで MyEmbededProgram.helloWorld() を実行してみる。すると、「Hello World!」とアラートが出てくるはずだ。

Example_Domain.png

Chrome拡張開発シリーズ

前回: Hello Worldするだけの拡張を作りたい
次回: ???

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
140
Help us understand the problem. What are the problem?