Как локально сохранить URL-адреса, посещенные пользователем, через расширение Chrome с помощью JS?

Question

Я хочу сохранить ссылку на активную вкладку через расширение chrome, когда пользователь нажимает на значок расширения.URL-адрес должен быть сохранен в локальном хранилище и должен сохраняться до тех пор, пока активное окно не будет закрыто.Я пытаюсь сохранить URL в массиве tablink

Вот manifest.json

{
    "manifest_version": 2,

    "name": "saveLink",
    "version": "1.0",

    "browser_action": {
        "default_icon": "xyz.png",
        "default_popup": "popup.html",
        "default_title": "saveLink"
    },
    "permissions": [
        "activeTab",
        "storage",
        "tabs"
    ]
}

Вот мой popup.js, который содержит код js для popup.html

var tablink = [];
function getTabUrl(){
  chrome.tabs.getSelected(null,function(tab) {
    var len = tablink.length;
    if(len == 0){
      tablink[0] = tab.url;
    }
    else {
      tablink[len] = tab.url;
    }
    console.log(tablink);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  getTabUrl();
  link.addEventListener('click', function() {
    chrome.tabs.update({url: 'https://www.google.com/'});
  });
});

В настоящее время консоль ничего не печатает.Кроме того, у расширения есть кнопка, которая перенаправляет на указанную ссылку (google.com), которая работала нормально до того, как я написал код для сохранения ссылок на вкладки, но теперь не работает.Пожалуйста, укажите, нужно ли что-то еще добавить.

Answer 1

Чтобы сохранить URL текущей вкладки в списке при открытии всплывающего окна

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tabUrl = tabs[0].url;
  chrome.storage.local.get('urlList', function(item){
    var newUrlList = item.urlList;
    newUrlList.push(tabUrl);
    console.log(newUrlList);
    chrome.storage.local.set({urlList: newUrlList});
  });
});

Объяснение: В основном, tabs.query получает список вкладок,и он принимает условия поиска, включая active:true и currentWindow:true.С этими параметрами он возвращает только одну вкладку, но результат все еще обрабатывается как список, поэтому мы используем tabs[0].Затем вы получите текущий список вкладок, который вы сохранили в хранилище, и установите переменную newUrlList в список вкладок.Чтобы добавить новый элемент в список, лучшим способом, чем tablink[0] = newvalue, является «выдвижение» переменной в список с помощью newUrlList.push(tabUrl).Затем мы заменяем сохраненный список новымUrlList.

---

РЕДАКТИРОВАТЬ: Приведенный выше код работает, если urlList уже установлен в список в chrome.storage,Приведенный ниже код гарантирует, что urlList инициализируется, если он еще не существует

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tabUrl = tabs[0].url;
  chrome.storage.local.get({'urlList':[]}, function(item){
    var newUrlList = item.urlList;
    if (newUrlList.indexOf(tabUrl) === -1) {
      newUrlList.push(tabUrl);
    }
    console.log(newUrlList);
    chrome.storage.local.set({urlList: newUrlList});
  });
});

Объяснение: chrome.storage.local.get({'urlList':[]}) получает значение urlList, если оно существует, но если оно еще не существуетэто инициализирует это к [].Кроме того, я думаю, что вы собираетесь добавить этот код в функцию, чтобы он запускался только при нажатии кнопки в popup.html, но я добавил оператор if, чтобы проверить, не был ли URL-адрес, чтобы были только новые URL-адреса.

Кроме того, при работе с chrome.storage мне полезно хотя бы очистить хранилище, чтобы убедиться, что оно работает правильно: chrome.storage.local.clear();