48529


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

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

完成イメージとしては、閲覧中のサイト（stackoverflow）でChromeの拡張機能をクリックすることで、  
[![stackoverflow.com](https://i.stack.imgur.com/JoMu6.png)](https://i.stack.imgur.com/JoMu6.png)

「Google PageSpeed Insights」のサイト内にある、URL入力欄に取得したURLが自動的に反映されるプログラムです。  
[![developers.google.com](https://i.stack.imgur.com/lYF2u.png)](https://i.stack.imgur.com/lYF2u.png)

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

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

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

### 該当のソースコード

**manifest.json**

[code]

    ﻿{
      "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://*/*"
      ]
    }
    
[/code]

**contents.js**

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

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

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

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


CC BY-SA 4.0
2018-09-19T03:16:20.090
48528
2018-09-19T03:47:52.127
30166
question
javascript json google-chrome chrome-extension
Chromeの拡張機能開発でJavaScriptの「location.href」が正しく動作しない


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

実はお使いの`chrome.browserAction.onClicked.addListener`APIではコールバック引数の第一引数として現在のタブを表す[Tabオブジェクト](https://developer.chrome.com/extensions/tabs#type-
Tab)が与えられています。  
その`url`プロパティを調べることで現在のURLを得ることができます。具体的には以下のコードのように行います。

[code]

    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);                                                               
    });
    
[/code]

* * *

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

[code]

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

* * *

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


CC BY-SA 4.0
2018-09-19T03:26:16.603
48529
2018-09-19T03:47:52.127
2018-09-19T03:47:52.127
30079
30079
48528
answer