Получить URL-адрес и сохранить его | Расширение Chrome

В основном, в моем окне (когда вы щелкаете по значку) оно должно открываться и отображать URL вкладки, а рядом с ним я хочу сказать "Сохранить", оно сохранит его в localStorage и будет показано ниже в сохраненном область ссылок.

Как это:

alt text

Что-то вроде закладок :)

Ответы

Ответ 1

Если вы хотите сделать что-то подобное, вы легко это сделаете с помощью API расширений Chrome. Области для поиска:

Теперь первый шаг - создать ваш файл popup.html и помнить, что он временный, то есть он живет только при нажатии на действие браузера, а затем умирает, если он завершает (закрывает). То, что я пытаюсь сказать, если у вас много вычислений, и вы хотите, чтобы это произошло в фоновом режиме и произошло, даже если всплывающее окно закрыто, переместите все в фоновая страница. И в своем всплывающем меню вы можете легко получить доступ к фоновой странице, используя chrome.extension.getBackgroundPage()

В вашем popup.html вам нужно будет получить URL-адрес текущей вкладки, чтобы сделать это, API-интерфейс Tab имеет "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, имеет ограничение Chrome для защиты своих пользователей от атак JavaScript:

Встроенные скрипты и обработчики событий не разрешены

Теперь это позволит вам отображать Url во всплывающем окне для текущей страницы в качестве действия браузера. Следующий шаг - использовать простые функции HTML5, такие как localStorage или Webdatabase (на мой взгляд, это будет лучше). Чтобы сохранить сохраненные страницы, вы можете отобразить их на странице сохраненных ссылок так же, как я сделал для currentLink.

Удачи!

Ответ 2

Я хотел бы обновить этот ответ, поскольку API изменился.

Теперь метод chrome.tabs.getSelected() устарел. Рекомендуемым способом получения URL-адреса текущей вкладки является использование chrome.tabs.query():

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

Это все еще требует, чтобы вы запросили доступ к API chrome.tabs в манифесте расширения:

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

Подробнее об этом можно узнать здесь: chrome.tabs.getSelected()

Надеюсь, это поможет!

Ответ 3

чтобы получить текущий url, вам нужно получить текущую вкладку, а затем извлечь все паразитные элементы.

для получения текущей вкладки, chrome.tabs.getSelected(). Затем, чтобы получить параметры из объекта табуляции, откройте вкладки api

ваш фрагмент кода должен выглядеть следующим образом:

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

  //rest of the save functionality.
});

вам также необходимо объявить разрешение "tabs" в манифесте расширения, чтобы использовать API вкладок. Например

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