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

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

ただいまの
回答率

89.99%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 979

nyan-kichi

score 4

プログラミング初心者です。
現在、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

{
  "manifest_version": 2,
  "name": "page speed checker",
  "version": "2.0",
  "description": "閲覧中のサイトの表示速度を測定します",
  "icons": {
    "128": "page.png"
  },
  "browser_action": {
    "default_title": "page speed checker",
    "default_icon": "page.png"
  },
  "background": {
    "scripts": ["contents.js"]
  },

  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ]
}


contents.js

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

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

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

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

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

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

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

contents.js

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


となります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/18 23:21

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

    キャンセル

0

試してもいないけど

top.location.href

とかでとれたりしない?

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/18 23:47

    コメントありがとうございます!
    「location.href」を「top.location.href」に変更して試してみたのですが、出力結果に変化はなかったです…

    サイトのURLを取得することが、セキュリティ違反になる恐れもあるのですね。
    セキュリティに関する知見が全くないので、プログラミング学習と並行して学んでみます。

    教えていただきありがとうございます。

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる