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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1722閲覧

Chromeの拡張機能開発でJavaScriptの「location.href」が正しく動作しない

nyan-kichi

総合スコア10

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/18 13:08

編集2018/09/18 13:33

プログラミング初心者です。
現在、Chromeの拡張機能開発を行っています。

Chromeの拡張機能をクリックするだけで、閲覧中のWEBサイトのURLを取得し、別タブでWEBサイトの表示速度が測定できる「Google PageSpeed Insights」に取得したURLが自動的に反映されるプログラムを制作しています。

完成イメージとしては、閲覧中のサイト(teratail)でChromeの拡張機能をクリックすることで、
イメージ説明
「Google PageSpeed Insights」のサイト内にある、URL入力欄に取得したURLが自動的に反映されるプログラムです。
イメージ説明

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

javascriptの「location.href」を活用して、閲覧中のサイトのURLを取得しようとしたのですが、うまくいきません。

閲覧中のサイトのURLを「https://○○○」の形で取得できず、
「chrome-extension://afodfheljgloicekcifhieopgnbpibjm/_generated_background_page.html」の形で取得してしまいます。

該当のソースコード

manifetst.json

json

1{ 2 "manifest_version": 2, 3 "name": "page speed checker", 4 "version": "2.0", 5 "description": "閲覧中のサイトの表示速度を測定します", 6 "icons": { 7 "128": "page.png" 8 }, 9 "browser_action": { 10 "default_title": "page speed checker", 11 "default_icon": "page.png" 12 }, 13 "background": { 14 "scripts": ["contents.js"] 15 }, 16 17 "permissions": [ 18 "tabs", 19 "http://*/*", 20 "https://*/*" 21 ] 22}

contents.js

Javascript

1chrome.browserAction.onClicked.addListener(function() { 2 void(window.open('https://developers.google.com/speed/pagespeed/insights/?url='+location.href)); 3});

原因がわかる方がいましたら、教えていただきたいです。

javascriptの「location.href」を使わない方が簡単にできるなどのご意見もありましたら、
お伝えいただけると嬉しいです。

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

自己解決

解決方法が見つかりました。

Chromeの拡張機能で閲覧中のサイトURLを取得するために、location.hrefを使用することはできないようです。

理由は少しややこしいのですが、「拡張機能のJavaScriptコードが動いているページ」と「ブラウザが現在開いているページ」が異なるためです(location.hrefで取得されるのは後者ではなく前者)。

今回のコード内で使用している「chrome.browserAction.onClicked.addListenerAPI」では、コールバック引数の第一引数として現在のタブを表すTabオブジェクトが与えられています。

そのurlプロパティを調べることで、閲覧サイトのURLを得ることが可能になるみたいです。

具体的なコードとしては、

contents.js

javascript

1chrome.browserAction.onClicked.addListener(function(tab) { 2 // 現在開いているURLを取得 3 var url = tab.url; 4 // 試しに表示してみる 5 console.log(url); 6 // Google PageSpeed Insightsを開く 7 window.open('https://developers.google.com/speed/pagespeed/insights/?url='+url);

となります。

投稿2018/09/19 04:24

nyan-kichi

総合スコア10

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

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

0

試してもいないけど

top.location.href

とかでとれたりしない?

セキュリティ違反になるかもしれないけど・・・・

投稿2018/09/18 13:48

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nyan-kichi

2018/09/18 14:47

コメントありがとうございます! 「location.href」を「top.location.href」に変更して試してみたのですが、出力結果に変化はなかったです… サイトのURLを取得することが、セキュリティ違反になる恐れもあるのですね。 セキュリティに関する知見が全くないので、プログラミング学習と並行して学んでみます。 教えていただきありがとうございます。
guest

0

「Chrome Extension 表示中 URL」とGoogleで検索を行ったら、下記のページが出てきました。
[ChromeExtension] 表示しているタブのURLを取得するサンプル

いろいろと情報を集める力も開発には重要なスキルとなると思います。
自分もまだまだですが、ぜひ頑張ってください。

投稿2018/09/18 13:23

Takumiboo

総合スコア2534

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

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

nyan-kichi

2018/09/18 14:21

コメントありがとうございます! 参考サイト教えていただき、感謝しております。 もう一度、自力で解決できないか探ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問