CODEWITHSUNDEEP
javascriptarraysgoogle-chrome-extension
aQwus jargon
aQwus jargon

Reputation: 133

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

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.

Upvotes: 1

Views: 906

Answers (1)

MagnetPlant
MagnetPlant

Reputation: 196

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

Upvotes: 1

Related Questions