はじめに

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

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

TL;DR

目次

  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'

まとめ

参考文献

関連記事