Chrome拡張機能開発 v3にて、options_pageで vue.jsを使用したい

実現したいこと

Chrome拡張機能の設定画面にvue.jsを取り入れようと思い、CDNを読み込もうとしたところエラーが発生し、vueが使用できませんでした。

前提

manifest.json
1{
2    "name": "拡張機能テスト",
3    "description": "説明文",
4    "version": "0.1",
5    "manifest_version": 3,
6    "action": { ... },
7    "permissions": [
8        "storage", "tabs", "activeTab", "scripting"
9    ],
10    "web_accessible_resources": [{ ... }],
11    "icons": { ... },
12    "content_scripts": [{ ... }],
13    "background": { ... },
14    "options_page": "options.html"
15}

コンソールに出力されたエラー

Refused to load the script 'https://unpkg.com/vue@3/dist/vue.global.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://unpkg.com/vue@3/dist/vue.global.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

options.js:627 Uncaught ReferenceError: Vue is not defined

該当のソースコード

options.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<link rel="stylesheet" href="css/style.css">
8	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
9
10	<title>設定画面</title>
11</head>
12<body>
13    <div id="app">{{ username }}</div>
14    <script src="js/options.js"></script>
15</body>
16</html>

javascript
1const app = Vue.createApp({
2	data() {
3		return {
4			username: 'なまえ'
5		}
6	},
7}).mount('#app')

試したこと

<meta http-equiv="Content-Security-Policy" content="〜〜'">を色々試したり、vue.global.jsをローカルファイル化したりもしましたが、全てダメでした。

補足情報

Chrome拡張機能 manifest version 3
Chrome バージョン 110

行動規範の内容に同意します

回答1件

回答としてこれでいいかわかりませんが…
Chrome拡張でライブラリを外部のCDNから取り込むことはできません。
なので、拡張自体に同梱するしか方法はないと思います。

個人的に作成したChrome拡張では以下で動いています。(manifest V3)

json:manifest.json
1	"content_security_policy": {
2		"extension_pages" : "script-src 'self'; object-src 'self'"
3	},

html:index.html
1<!-- 拡張のmanifest.jsonがあるディレクトリから見て js/lib/jquery.js を置いています -->
2<script src='js/lib/jquery.js'></script>

投稿2023/03/13 09:41

YakumoSaki

総合スコア2027

HUMANITY

2023/03/16 18:16

回答いただきありがとうございます。レスポンスが遅れてしまいすみません。おっしゃる方法で jQuery -> vue で試してみましたが、望み通りの結果は得られませんでした。 # 変更箇所 - vue.prod.js 全文をローカルファイルにコピペして読み込み - manifest.json に"content_security_policy" 以下追加 # 結果 - htmlの {{ name }} が消えたが、「なまえ」は表示されない - コンソールにエラー ``` Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'". at new Function (<anonymous>) at Dc (vue.prod.js:1:101581) at Cr (vue.prod.js:1:52386) at vue.prod.js:1:40293 at vue.prod.js:1:40299 at B (vue.prod.js:1:40318) at R (vue.prod.js:1:38778) at m (vue.prod.js:1:36054) at ne (vue.prod.js:1:46423) at mount (vue.prod.js:1:32494) Dc @ vue.prod.js:1 Cr @ vue.prod.js:1 （匿名） @ vue.prod.js:1 （匿名） @ vue.prod.js:1 B @ vue.prod.js:1 R @ vue.prod.js:1 m @ vue.prod.js:1 ne @ vue.prod.js:1 mount @ vue.prod.js:1 t.mount @ vue.prod.js:1 （匿名） @ index.js:26 ``` あの後色々しらべましたが、どうやらvueはそもそも拡張機能内では使えないようでした。しかし、色々気づきを得られましたのでBAにさせていただきます。ご回答ありがとうございました！

行動規範の内容に同意します