web-dev-qa-db-ja.com

URLを取得して保存する| Chrome Extension

基本的に私のウィンドウ（アイコンをクリックすると）が開き、タブのURLが表示されます。その横に「保存」と言って、それをlocalStorageに保存し、その下に保存されているリンクエリア。

このような：

alt text

ブックマークのようなもの:)

htmlgoogle-chromegoogle-chrome-extensionlocal-storage
31
Jamie

そのようなことをしたい場合は、Chrome extensions APIを使用して簡単に実行できます。探す領域は次のとおりです。

最初のステップは、popup.htmlファイルを作成し、それが一時的なものであることを覚えておくことです。つまり、ブラウザーのアクションをクリックしたときにのみ有効になり、終了（閉じる）すると終了します。私が言おうとしていることは、計算量が多く、バックグラウンドで実行し、ポップアップが閉じている場合でも実行したい場合は、すべてを バックグラウンドページ に移動します。また、ポップアップでは、chrome.extension.getBackgroundPage（）を使用して背景ページに簡単にアクセスできます

Popup.html内で、現在のタブのURLを取得する必要があります。これを行うには、Tab APIに " getSelected "関数があり、これにより Tabオブジェクトを取得できます 選択したタブ。

だからこのようなもの：

popup.html

<html>
<body>
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>

popup.js

chrome.tabs.getSelected(null, function(tab) {
    document.getElementById('currentLink').innerHTML = tab.url;
});

JavaScriptコードをHTMLファイルに配置できないのは、JavaScript攻撃のユーザーを保護するためのChromeの制限によるものです。

インラインスクリプトとイベントハンドラは許可されていません

これで、ブラウザのアクションとして現在のページのポップアップにURLを表示できるようになります。次のステップは、localStorageやWebデータベースなどの単純なHTML5機能を使用することです（私の意見ではそれがより良いでしょう）。保存されたページを保存するには、currentLinkで行ったのと同じように、それらをsavedLinksページにレンダリングできます。

幸運を！

49
Mohamed Mansour

APIが変更されたため、この回答を更新したいと思いました。

chrome.tabs.getSelected()メソッドは廃止されました。現在のタブのURLを取得するための推奨される方法は、chrome.tabs.query()を使用することです。

chrome.tabs.query({'active': true}, function (tabs) {
    var url = tabs[0].url;
});

この場合も、拡張マニフェストのchrome.tabs AP​​Iへのアクセスをリクエストする必要があります。

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

サポート終了について詳しくは、こちらをご覧ください。 chrome.tabs.getSelected（）

お役に立てれば！

13
thauburger

現在のURLを取得するには、現在のタブを取得してから、すべてのパラメーターを抽出する必要があります。

現在のタブの使用を取得するには、 chrome.tabs.getSelected（） を使用します。次に、タブオブジェクトからパラメーターを取得するには、 tabs api を参照してください。

コードスニペットは次のようになります。

chrome.tabs.getSelected(null, function(tab) {
  //properties of tab object
  tabId = tab.id;
  tabUrl = tab.url;

  //rest of the save functionality.
});

また、タブAPIを使用するには、拡張機能のマニフェストで「タブ」権限を宣言する必要があります。例えば

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}
10
phoenix24