4

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

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

完成イメージとしては、閲覧中のサイト(stackoverflow)でChromeの拡張機能をクリックすることで、
stackoverflow.com

「Google PageSpeed Insights」のサイト内にある、URL入力欄に取得したURLが自動的に反映されるプログラムです。
developers.google.com

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

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

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

該当のソースコード

manifest.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」を使わない方が簡単にできるなどのご意見もありましたら、
お伝えいただけると嬉しいです。

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

1 件の回答 1

6

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

実はお使いのchrome.browserAction.onClicked.addListenerAPIではコールバック引数の第一引数として現在のタブを表すTabオブジェクトが与えられています。
そのurlプロパティを調べることで現在のURLを得ることができます。具体的には以下のコードのように行います。

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);                                                               
});

また、多少ややこしいものの、location.hrefを用いる別の方法としてchrome.tabs.executeScriptを用いる方法もあるので一応紹介いたします。
これは現在開いているページで特定のJavascriptコードを実行するものです。window.openを実行するコードを実行してやることで、location.hrefを用いて目的の動作をさせることができます。コードを文字列で与えている点が少し難しいので注意してください。

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

どちらの方法も、browser action内でactiveTabパーミッションが与えられることを利用しています。manifest.json内のpermissions内は"tabs"ではなく"activeTab"としても動作すると思います。

1
  • 1
    Faily Feelyさん回答ありがとうございます。無事に解決しました。 解説とてもわかりやすくかったです。 プログラミング初心者の僕でも内容を把握できました。 別の実行手段に対しても解説いただき、大変感謝しております。 プログラミング初心者でわからないことだらけですが、これから先も頑張ります。
    – nyan-kichi
    Commented 2018年9月19日 3:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。