質問: プログラミング初心者です。 現在、Chromeの拡張機能開発を行っています。 Chromeの拡張機能をクリックするだけで、閲覧中のWEBサイトのURLを取得し、別タブでWEBサイトの表示速度が測定できる「Google PageSpeed Insights」に取得したURLが自動的に反映されるプログラムを制作しています。 完成イメージとしては、閲覧中のサイト(stackoverflow)でChromeの拡張機能をクリックすることで、 ![stackoverflow.com](https://i.stack.imgur.com/JoMu6.png) 「Google PageSpeed Insights」のサイト内にある、URL入力欄に取得したURLが自動的に反映されるプログラムです。 ![developers.google.com](https://i.stack.imgur.com/lYF2u.png) ### 発生している問題・エラーメッセージ 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」を使わない方が簡単にできるなどのご意見もありましたら、 お伝えいただけると嬉しいです。 何卒よろしくお願いいたします。
回答: Chromeの拡張機能で現在開いているページを取得するために`location.href`を使用することはできません。 理由は少し難しいですが、「拡張機能のJavaScriptコードが動いているページ」と「ブラウザが現在開いているページ」が異なるためです(`location.href`で取得されるのは後者ではなく前者)。 実はお使いの`chrome.browserAction.onClicked.addListener`APIではコールバック引数の第一引数として現在のタブを表す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"`としても動作すると思います。