webdevqa.jp.net

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

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

このような:

alt text

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

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