はじめに

Chrome 拡張機能で、同梱しているファイルにアクセスする方法について整理した。

本記事では、画像をページ中に追加表示する例を示す。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. manifest.json
    2. JS(content.js)
  5. まとめ
  6. 参考文献

環境・条件

Google Chrome バージョン: 78.0.3904.108（Official Build） （64 ビット）

詳細

リポジトリ: 17number/chrome-extension-access-bundled-resources

manifest.json

web_accessible_resources で、アクセスするリソースを配列形式で指定する。

ワイルドカード(*)が使用可能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "manifest_version": 2,
  "name": "chrome-extension-access-bundled-resources",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": [
        "https://www.google.co.jp/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "resources/*.png"
  ]
}

JS(content.js)

chrome.extension.getURL("hoge.png") でパスを取得して使う。

画像を表示したい場合は getURL で取得した値を img タグの src に指定する。

1
2
3
4
5
6
7
8
9
10
'use strict';
const imagePath = 'resources/kikokushijo_girl.png';

const imageUrl = chrome.extension.getURL(imagePath);
const imgWithUrl = `<img src="${imageUrl}" style="width: 200px; height: auto; background-color: lightgray;">`;
document.querySelector("input").insertAdjacentHTML("afterEnd", imgWithUrl);

// 普通にパスを指定したらどうなるか、の比較用
const imgWithPath = `<img src="${imagePath}" style="width: 200px; height: auto; background-color: pink;">`;
document.querySelector("input").insertAdjacentHTML("afterEnd", imgWithPath);

この拡張機能を読み込んで、https://www.google.co.jp にアクセスすると、以下のような結果になる。src にパスを直接指定した方は、画像が表示できていない。

ちなみに getURL で取得した値は下記のような文字列となる。

1
2
console.log(chrome.extension.getURL(imagePath));
// => 'chrome-extension://ainepefkhlfdgdpailklppkcljjfkldp/resources/kikokushijo_girl.png'

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list