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

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

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

Nullとは、プログラミング言語やデータベースにおけるデータ表現の一種です。コンテキストによって"空"もしくは"長さ0の文字列"、”未知・不明”を意味します。

JavaScript

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Chrome extension

Chrome拡張機能

Q&A

解決済

2回答

2786閲覧

【Chrome extension / 拡張機能】HTML imgタグ内のsrcを取得したいがnullになってしまいます

n.nishiyama

総合スコア4

Null

Nullとは、プログラミング言語やデータベースにおけるデータ表現の一種です。コンテキストによって"空"もしくは"長さ0の文字列"、”未知・不明”を意味します。

JavaScript

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2020/01/03 14:46

編集2020/01/03 14:49

前提・実現したいこと

Googleドライブにアップした動画ファイルの編集画面から、
サムネイル画像を保存するためにChrome拡張機能で
HTML imgタグ内のsrcを取得したいです。

発生している問題・エラーメッセージ

JavaScriptでsrc取得コードを実行すると値が取得できますが、
chrome.tabs.executeScriptで実行するとnullになってしまいます。

試しにspanタグのinnerTextをchrome.tabs.executeScriptで
取得したところうまく取得できました。

imgタグ/srcの取得がChrome拡張では出来ないかと思ったのですが、
同様のエラーの質問を見つけられず困っています。

該当のソースコード

■popup.js

'use strict'; var results = document.getElementById('results'); var id = document.getElementById('idresults'); var getText = []; chrome.tabs.query({lastFocusedWindow: true},function(tabs){ for (var i = 0; i < tabs.length; i++) { chrome.tabs.executeScript(tabs[i].id,{ code:"document.querySelector('.ndfHFb-c4YZDc-aTv5jf-bVEB4e img').src;"}, // codeを"document.querySelector('.l1HEBf-r4nke').innerText;"に差し替えるとテキストは取得できる function(result){ getText.push(result); console.log(result); results.value = getText.join("\n"); results.select(); }); }});

■manifest.json

{ "manifest_version":2, "name":"get_thumbnail", "version":"1.0", "browser_action":{ "default_popup":"popup.html" }, "permissions":[ "tabs", "notifications", "https://drive.google.com/*" ]}

■popup.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>My Extentions</title> </head> <body> <textarea id="results" rows="5" cols="40"></textarea> <script src="popup.js"></script> </body> </html>

試したこと

・開発者ツールのコンソールでJavaScriptを実行
⇒nullにならずsrcを取得できた
document.querySelector('.ndfHFb-c4YZDc-aTv5jf-bVEB4e img').src;

・popup.jsの取得対象タグを別のinnerTextがあるものに変更
⇒nullにならず取得できた

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

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

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

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

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

guest

回答2

0

自己解決

色々試してみたところ、
Googleドライブの情報は取得可否がセレクターによって変わるようです。

スクリプトには問題がないようだったので、
ブラウザの仕様で取得できないと判断し別方法で対応しました。
(Slackにアップロードした動画のsrcは取得できたので、そちらを使用します)

投稿2020/01/04 09:59

編集2020/01/04 10:01
n.nishiyama

総合スコア4

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

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

0

.src じゃなく .getAttribute('src') じゃないとだめなのかも

投稿2020/01/04 01:54

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

n.nishiyama

2020/01/04 02:44

ご回答ありがとうございます>< .getAttribute('src')で試してみましたが、nullになってしまいました><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問