概要
Firefoxのブラウザ拡張機能で、Chart.jsを使ってグラフ表示機能を持たせたいと思ったときに行う手順を記載します。
Javascriptでモジュールをインポートする方法がわかりにくい点、ブラウザ拡張機能だと余計に複雑なため実現できた方法を紹介します。
推奨の方法は調べた限りだとないため、一つの方法として参考になればと思います。
Chart.jsを拡張機能で使うまでの流れ
全体の流れを記載します。
- Chart.jsをnpmで開発環境へインストールする
- 拡張機能で使うJavascriptのコード内でChart.jsを絶対パスでインポートする
- 拡張機能を公開するときにChart.jsのコード自体も含めてビルドする
Chart.jsを使う上での注意点
CDNで公開されているChart.jsを直接使うことはできない
コンテンツセキュリティポリシー（CSP）によってMozillaで公開する拡張機能ではリモートソースが使えません。
注: 有効な例は正しい CSP のキーの使い方を表しますが、'unsafe-eval', 'unsafe-inline', リモートスクリプト、リモートソースを CSP に指定する拡張機能は、主なセキュリティの問題から、addons.mozilla.org に載せる拡張機能には許可されません。
content_security_policy
Chart.js内のコードを一部修正する
詳細は後ほど記載しますが、モジュールを読み込む際にパスを変更します。
拡張機能で使うコード内だけでなく、Chart.jsのコードが他のモジュールを読み込んでいるため同じようにパスを絶対パスに変更する必要があります。
Chart.jsを拡張機能で使う方法
Chart.jsをnpmで開発環境へインストールする
通常通りnpmでChart.jsをローカルにインストールします。
npm init
npm install chart.js
拡張機能で使うJavascriptのコード内でChart.jsを絶対パスでインポートする
以下のようなフォルダ構造になっている想定です。
node_modules
┝ @kurkle
└ chart.js
└ dist
└ chart.js
この状態でnode_modules\chart.js\dist\chart.jsを編集します。
@kurkle/colorをimport '/node_modules/@kurkle/color/dist/color.esm.js';でインポートします。
/*!
* Chart.js v4.4.8
* https://www.chartjs.org
* (c) 2025 Chart.js Contributors
* Released under the MIT License
*/
import { r as requestAnimFrame, a as resolve, e as effects, c as color, i as isObject, d as defaults, b as isArray, v as valueOrDefault, u as unlistenArrayEvents, l as listenArrayEvents, f as resolveObjectKey, g as isNumberFinite, h as defined, s as sign, j as createContext, k as isNullOrUndef, _ as _arrayUnique, t as toRadians, m as toPercentage, n as toDimension, T as TAU, o as formatNumber, p as _angleBetween, H as HALF_PI, P as PI, q as _getStartAndCountOfVisiblePoints, w as _scaleRangesChanged, x as isNumber, y as _parseObjectDataRadialScale, z as getRelativePosition, A as _rlookupByKey, B as _lookupByKey, C as _isPointInArea, D as getAngleFromPoint, E as toPadding, F as each, G as getMaximumSize, I as _getParentNode, J as readUsedSize, K as supportsEventListenerOptions, L as throttled, M as _isDomSupported, N as _factorize, O as finiteOrDefault, Q as callback, R as _addGrace, S as _limitValue, U as toDegrees, V as _measureText, W as _int16Range, X as _alignPixel, Y as clipArea, Z as renderText, $ as unclipArea, a0 as toFont, a1 as _toLeftRightCenter, a2 as _alignStartEnd, a3 as overrides, a4 as merge, a5 as _capitalize, a6 as descriptors, a7 as isFunction, a8 as _attachContext, a9 as _createResolver, aa as _descriptors, ab as mergeIf, ac as uid, ad as debounce, ae as retinaScale, af as clearCanvas, ag as setsEqual, ah as _elementsEqual, ai as _isClickEvent, aj as _isBetween, ak as _readValueToProps, al as _updateBezierControlPoints, am as _computeSegments, an as _boundSegments, ao as _steppedInterpolation, ap as _bezierInterpolation, aq as _pointInLine, ar as _steppedLineTo, as as _bezierCurveTo, at as drawPoint, au as addRoundedRectPath, av as toTRBL, aw as toTRBLCorners, ax as _boundSegment, ay as _normalizeAngle, az as getRtlAdapter, aA as overrideTextDirection, aB as _textX, aC as restoreTextDirection, aD as drawPointLegend, aE as distanceBetweenPoints, aF as noop, aG as _setMinAndMaxByKey, aH as niceNum, aI as almostWhole, aJ as almostEquals, aK as _decimalPlaces, aL as Ticks, aM as log10, aN as _longestText, aO as _filterBetween, aP as _lookup } from './chunks/helpers.segment.js';
- import '@kurkle/color';
+ import '/node_modules/@kurkle/color/dist/color.esm.js';
また自身で書いた拡張機能用のコードからChart.jsを読み込む際も同じようにパスを変えます。
import { Chart } from '/node_modules/chart.js/auto/auto.js';
mychart = new Chart(...)
拡張機能を公開するときにChart.jsのコード自体も含めてビルドする
あとはすべてのコードをまとめて拡張機能としてアップロードします。
Zip化してアップロードする方法を例にすると、以下フォルダをビルド用に作ります。
project
┝ node_modules
│ ┝ @kurkle
│ └ chart.js
┝ manifest.json
└ hogehoge.js
これらのフォルダをすべてZip化します。
解凍したときにmanifest.jsonが直下にないとエラーとなるため、project内のファイルをすべて選択してZip化します。
projectフォルダをZip化するのではなく、project内のファイルとフォルダをすべてZip化です。
このZipファイルをリリースします。
詳しい手順は筆者が書いた以下記事を参照ください。
開発者センターへリリースする際に、\node_modules\@kurkle\LICENSE.mdファイルがあるとエラーになる場合がありました。同様にエラーとなる場合はこちらのファイルを削除してください。
参考