質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

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

HUMANITY
HUMANITY

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

1回答

0グッド

0クリップ

581閲覧

投稿2023/03/11 16:27

実現したいこと

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

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👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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にさせていただきます。 ご回答ありがとうございました!

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能