google-chrome - Google Chrome拡張機能から現在のタブのURLを取得するにはどうすればよいですか？

Question

Google Chrome拡張機能を楽しんでいますが、現在のタブのURLを変数に保存する方法を知りたいだけです。

Answer 1

chrome.tabs.query()次のように使用します。

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

これには、拡張マニフェストchrome.tabsで APIへのアクセスをリクエストする必要があります。

"permissions": [ ...
   "tabs"
]

「現在のタブ」の定義は、拡張機能のニーズによって異なる場合があることに注意してください。

クエリでの設定lastFocusedWindow: trueは、ユーザーのフォーカスされたウィンドウ (通常は一番上のウィンドウ) の現在のタブにアクセスする場合に適しています。

設定currentWindow: trueにより、拡張機能のコードが現在実行されているウィンドウ内の現在のタブを取得できます。たとえば、拡張機能が新しいウィンドウ/ポップアップ (フォーカスの変更) を作成するが、拡張機能が実行されたウィンドウからタブ情報にアクセスしたい場合に便利です。

この例で使用することにしたのは、Google が常に存在するlastFocusedWindow: trueとは限らないケースを呼び出すためです。currentWindow

ここで定義されているプロパティのいずれかを使用して、タブ クエリをさらに絞り込むことができます: chrome.tabs.query

Answer 2

警告！chrome.tabs.getSelectedは非推奨です。chrome.tabs.query他の回答に示されているように使用してください。

---

まず、manifest.json で API のアクセス許可を設定する必要があります。

"permissions": [
    "tabs"
]

URL を保存するには:

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

Answer 3

他の回答は、ポップアップまたはバックグラウンド スクリプトから知りたいと想定しています。

コンテンツ スクリプトから現在の URL を知りたい場合は、標準の JS の方法が適用されます。

window.location.toString()

のプロパティを使用window.locationして、ホスト、プロトコル、パスなど、URL の個々の部分にアクセスできます。

Answer 4

問題は、chrome.tabs.getSelected が非同期であることです。以下のコードは通常、期待どおりに動作しません。「tablink」の値は、値をリセットするコールバックを getSelected がまだ呼び出していないため、コンソールに書き込まれた時点でも未定義のままです。

var tablink;
chrome.tabs.getSelected(null,function(tab) {
    tablink = tab.url;
});
console.log(tablink);

解決策は、関数で値を使用するコードをラップし、それを getSelected で呼び出すことです。このようにして、コードが実行される前に値が提供されるのを待つ必要があるため、常に値が設定されていることが保証されます。

次のようなものを試してください：

chrome.tabs.getSelected(null, function(tab) {
    myFunction(tab.url);
});

function myFunction(tablink) {
  // do stuff here
  console.log(tablink);
}

Answer 5

こんにちは、現在のサイトを友人にメールで送信する Google Chrome のサンプルです。背後にある基本的な考え方は、あなたが望むものです...まず、ページのコンテンツを取得します（あなたにとっては面白くありません）...その後、URLを取得します（<--良い部分）

さらに、それはドキュメントを読むよりも私が最も好む素晴らしいコード例です。

ここで見つけることができます: このページにメールを送信

Answer 6

このソリューションはすでにテスト済みです。

manifest.json で API の権限を設定する

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

最初のロード呼び出し関数。https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

オンチェンジコール機能。https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

URLを取得する関数

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })

Answer 7

を使用している人にとってcontext menu api、ドキュメントはタブ情報を取得する方法についてすぐには明確ではありません.

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log(info);
    return console.log(tab);
  });

https://developer.chrome.com/extensions/contextMenus

Answer 8

Chrome 拡張機能を使用して開いたり表示したりした URL を保存する完全な拡張機能が必要な場合:

バックグラウンドでこのオプションを使用します。

openOptionsPage = function (hash) {
  chrome.tabs.query({ url: options_url }, function (tabs) {
    if (tabs.length > 0) {
      chrome.tabs.update(
        tabs[0].id,
        { active: true, highlighted: true, currentWindow: true },

        function (current_tab) {
          chrome.windows.update(current_tab.windowId, { focused: true });
        }
      );
    } else {
      window.addEventListener(hash, function () {
        //url hash # has changed
        console.log(" //url hash # has changed 3");
      });
      chrome.tabs.create({
        url: hash !== undefined ? options_url + "#" + hash : options_url,
      });
    }
  });
};

index.html ファイルも必要です。このGithubで見つけることができる マニフェスト ファイルは次のようになります。

{
  "manifest_version": 2,
  "name": "ind count the Open Tabs in browser ",
  "version": "0.3.2",
  "description": "Show open tabs",
  "homepage_url": "https://github.com/sylouuu/chrome-open-tabs",
  "browser_action": {},
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com https://www.google-analytics.com; object-src 'self'",

  "options_page": "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },

  "web_accessible_resources": ["img/*.png"],

  "permissions": ["tabs", "storage"]
}

シンプルなアプリのフルバージョンは、この Github で見つけることができます:

https://github.com/Farbod29/extract-and-find-the-new-tab-from-the-browser-with-chrome-extention

Answer 9

これを確認する必要があります。

HTML

<button id="saveActionId"> Save </button>

マニフェスト.json

  "permissions": [
    "activeTab",
    "tabs"
   ]

JavaScript
以下のコードは、アクティブ ウィンドウのすべての URL をボタン クリックの一部として JSON オブジェクトに保存します。

var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
    myArray = [];
    chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
    function (array_of_Tabs) {  //Tab tab
        arrayLength = array_of_Tabs.length;
        //alert(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            myArray.push(array_of_Tabs[i].url);
        }
        obj = JSON.parse(JSON.stringify(myArray));
    });
}, false);