web-dev-qa-db-ja.com

拡張機能を使用してchromeで現在のURLの場所を変更する方法

ユーザーが拡張機能ボタンをクリックしたときにユーザーを別のWebサイトにリダイレクトする拡張機能を作成したいと考えています。これまでのところ、クリックごとに新しいタブを作成する拡張機能だけを見てきました。

アクティブなタブを使用してユーザーを別のウェブサイトにリダイレクトすることは可能ですか？

私はこのようなものを試しました：

chrome.browserAction.onClicked.addListener(function(tab) {
    var url = "https://www.mipanga.com/Content/Submit?url="
        + encodeURIComponent(tab.url)
        + "&title=" + encodeURIComponent(tab.title);

    document.location.href = url; // <-- this does not work
});
javascriptgoogle-chromegoogle-chrome-extension
42
user230054

注意：クロスブラウザ拡張機能を開発する場合は（そうすることを願っています！）、 chrome.tabs.query()を使用することをお勧めします 。詳細については、 Jean-Marc Amonの回答 を参照してください。この回答はFirefoxとChromeの両方で引き続き機能しますが、query()がより一般的に使用され、オプションが増え、バックグラウンドページとポップアップビューで機能します。

chrome.tabs APIから、 getCurrent() または query() を使用できます。

私はgetCurrentを好みますが、タブ以外のコンテキスト（背景ページやポップアップビューなど）から呼び出すことはできません。これが問題である場合は、代わりにqueryを使用してください。 Jean-Marc Amonの以下の answer は、この場合にアクティブなタブを取得する方法の素晴らしい例を示しています（彼に賛成することを忘れないでください！）。

現在のタブを取得したら、単純に update() を渡します。

chrome.tabs.getCurrent(function (tab) {
  //Your code below...
  var tabUrl = encodeURIComponent(tab.url);
  var tabTitle = encodeURIComponent(tab.title);
  var myNewUrl = "https://www.mipanga.com/Content/Submit?url=" + tabUrl + "&title=" + tabTitle;

  //Update the url here.
  chrome.tabs.update(tab.id, {url: myNewUrl});
});

NB：これを使用するには、この機能をする必要がありますmanifest.jsonファイルでtabs権限を有効にしている：

"permissions": [
  "tabs"
],
68
Dan Atkinson

Chrome.tabs.queryも使用できます

chrome.tabs.query({currentWindow: true, active: true}, function (tab) {
      chrome.tabs.update(tab.id, {url: your_new_url});
});
36
Jean-Marc Amon

chrome.tabs.updateメソッドは、タブIDが渡されない場合、現在アクティブなタブで自動的に実行されます。

これには、tabs権限を必要としないという追加の利点があります。この権限を持つ拡張機能は、閲覧履歴を読み取ることができることをユーザーに警告するため、必要がない場合は要求しないようにする必要があります。

現在のタブのURLを変更することは、これを書くのと同じくらい簡単です：

chrome.tabs.update(undefined, {url: 'http://example.com'});

または、コメントでfarwayerが述べたように、2つの引数をまったく指定する必要はありません。

chrome.tabs.update({url: 'http://example.com'});
8
Domino