How do I locally save the urls visited by an user, through a chrome extension, using JS?

Question

I want to save the url link of the active tab, through a chrome extension, when an user clicks on the extension icon. The url should be saved in local storage, and should remain stored until the active window isn't closed. I am trying to save the url in an array tablink

Here's the 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"
    ]
}

Here's my popup.js which contains the js code for 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/'});
  });
});

Currently, the console isn't printing anything. Also, the extension has a button which redirects to the specified link(google.com), which was working fine before I wrote the code for saving tab links, but now isn't working. Please specify if anything more needs to be added.

Possible duplicate of [Cannot get Chrome popup.js to use console.log](https://stackoverflow.com/questions/14858909/cannot-get-chrome-popup-js-to-use-console-log) — Reinstate Monica Cellio, Apr 24 '18 at 11:21
^^ I did the same thing when I started writing extensions. Easy mistake to make. — Reinstate Monica Cellio, Apr 24 '18 at 11:21
`chrome.tabs.getSelected` is deprecated since Chrome 33 use `tabs.query {active: true}` instead — Aefits, Apr 24 '18 at 11:22
Yes, I wasn't inspecting the popup, but now, even though I am. The problem isn't gone. @Archer — aQwus jargon, Apr 24 '18 at 11:37
@elegant-user Do I have to simply replace `chrome.tabs.selected` with `tabs.query {active: true}`? — aQwus jargon, Apr 24 '18 at 11:38

MagnetPlant · Accepted Answer · 2018-04-28T01:25:56.227

To save the current tab URL to a list when opening the popup

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});
  });
});

Explanation: Basically, tabs.query gets a list of tabs, and it takes search terms including active:true and currentWindow:true. With those parameters it only ever returns one tab but the result is still treated as a list, so we use tabs[0]. Then you get the current tab list that you saved in storage and set the variable newUrlList to the tab list. To add a new item to the list, a better way than tablink[0] = newvalue is 'pushing' the variable to the list, with newUrlList.push(tabUrl). Then we replace the stored list with the newUrlList.

EDIT: The code above works if urlList is already set to a list in chrome.storage, the code below makes sure urlList is initialised if it doesn't exist already

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});
  });
});

Explanation: chrome.storage.local.get({'urlList':[]}) gets the value of urlList if it exists, but if it doesn't exist yet it initialises it to []. Also, I think you're going to add this code to a function so it only runs when you click a button in popup.html, but I added an if statement to check if the URL wasn't there so that only new URLs are added.

Also, when working with chrome.storage it's helpful for me at least to clear the storage to check it's working right: chrome.storage.local.clear();

Now, the console is printing `Error in response to storage.get: TypeError: Cannot read property 'push' of undefined` — aQwus jargon, Apr 27 '18 at 17:49
Oh yeah, I forgot that `urlList` wasn't initialised yet. I updated my answer so it initialises it if it didn't exist yet — MagnetPlant, Apr 28 '18 at 01:27
I want to save the urls in the array only till the active window is open and then clear the array if the active window is closed. What changes should I implement to do so. Right now, urls remain saved in the array even if you shut down the PC and open a new window after shutting on — aQwus jargon, May 13 '18 at 09:39
You'll have to use a background script. In background.js put in `chrome.windows.onRemoved.addListener(function (closedwindow){chrome.storage.local.get('curWin', function(item){var curWin = item.curWin;if (curWin == closedwindow){chrome.storage.local.set({urlList:[], curWin:null});}});});`. Then in your popup.js just below `var tabUrl...` add `var windowId = tabs[0].windowId;`. Then at the end add a property to the object being saved `chrome.storage.local.set({urlList: newUrlList, curWin: windowId});` This saves the current window id as well as the url, and if the window is closed it clears it — MagnetPlant, May 14 '18 at 10:14
Don't forget to add the background.js to your manifest.json `... "tabs"],"background": {"scripts": ["background.js"]}` — MagnetPlant, May 14 '18 at 10:15

How do I locally save the urls visited by an user, through a chrome extension, using JS?

1 Answers1