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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

2回答

4713閲覧

[chrome拡張機能]画像が反映されない

moscow3

総合スコア201

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

1グッド

2クリップ

投稿2018/01/15 22:45

編集2018/01/16 00:07

あるWEBサイトにいったらある画像の下に別の画像をつける というchromeの拡張機能を作ってるのですが、なぜか画像が反映されません

manifest.json

{ "manifest_version": 2, "name": "DevelopMona", "version": "0.1", "content_scripts": [ { "matches": ["https://qiita.com/*"], "js": ["jquery-3.2.1.min.js", "main.js"] } ] }

main.js

$("div.gazo").after("<img src='gazou.png' width='100px' height='30px' id='image'></img>")

同フォルダ内にgazou.pngがあることは確かなのですが、
イメージ説明
↑こういう感じになります。

また、画像を別の所にアプロードして、https://~~/gazou.png としても同様です。
何が原因でしょうか?

-takuma👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Manifest - Web Accessible Resources - Google Chrome

このページに書かれているとおりですが、パッケージ内のリソースには(manifest.jsonのv2下では)デフォルトでアクセスできないようになっているため、manifest.jsonにweb_accessible_resourcesを指定する必要があります。

JSON

1{ 2 ... 3 "web_accessible_resources": [ 4 "*.png" 5 ], 6 ... 7}

そのうえで、使用時にはchrome.extension.getURL()を使って画像のパスをextension内部を示すURL(chrome-extension://[extension-id]/[path])に変換します。

単にsrc="gazou.png"としてしまうと、位置の基準がそのWebページのURLになって、Webサーバー上で画像を探してしまうからです。

JavaScript

1const imageURL = chrome.extension.getURL('gazou.png') 2const imageTag = `<img src="${imageURL}" width="100" ...>`

投稿2018/01/16 01:39

sii_side

総合スコア849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

"<img src='gazou.png' width='100px' height='30px id='image'

heightがシングルクオートで閉じてません。

#追記
https://qiita.com/dhun/items/87a4fc88fce0ae0dd448
少し調べたところ「web_accessible_resources」というのがいるのでは?
httpで画像を出す場合もおそらくですが「parmission」が必要かなとみました。

投稿2018/01/15 23:42

編集2018/01/16 00:05
sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問