LocalStorage message passing issue - nearly works

Question

I have been trying for the last two days to get this to work and as a last resort I am asking here. I have looked on all of the related posts on StackOverflow that are relating to message passing, some blogs and of course Google's message passing page.

The APP that I have built will look for a link in a page containing something and replace the start of it. For example, will look for 'google.com' in a url and replace the start with 'ask.com'.

The issue I am having is that I want to store this variable in a localstorage variable which seems to happen. However when the page is refreshed the new url passed is not being used. I have stripped out a little of the clutter to make a simplified version to make it easier to debug. Please please help! Will have no hair left soon!

localStorage["talktest1"] contains a url that should change to a new one passed from the popup.js. Then when the replacement script is loaded next it should use the new talktest1 variable, however it continues to use the old 'www.google.co.uk' variable.

Manifest.js:

{
  "name": "Talk Talk",
  "version": "1.0",
  "description": "Tests stuff.",  
    "browser_action": {
    "default_icon": "img/icon16.png",
    "default_popup": "popup.html"
  },
    "options_page": "options.html",
  "permissions": [
    "tabs", "*://*/*"
  ],
  "background": {
    "scripts": ["js/jquery-1.7.2.min.js","js/bg.js"]
  },
    "icons": { "16": "img/icon16.png",
               "48": "img/icon48.png",
               "128": "img/icon128.png" },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["js/jquery-1.7.2.min.js","js/bg.js"],
      "run_at": "document_end"
    }
  ]
}

popup.js:

$(document).ready(function() {

    chrome.extension.getBackgroundPage().alert_this();

    $('.link_change').click(function() { // when a link is clicked - url is grabbed from a 'href'

        chrome.extension.sendRequest({localstorage: "http://www.something.com"}, function(response) {
            var email = response.value;
            chrome.extension.getBackgroundPage().alert_this();
        });     

        return false;
    });


});

bg.js:

if(!talktest1){
    var talktest1;
}
if(!localStorage["talktest1"]){
    localStorage["talktest1"] = "http://www.google.co.uk";
}

talktest1 = localStorage["talktest1"];


chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {       
        localStorage["talktest1"] = request.localstorage;
        talktest1 = request.localstorage;
        sendResponse({value: localStorage.talktest1});
    }
);

function alert_this(){
    alert("localstore|" + localStorage["talktest1"]);
    alert("talktest1|" + talktest1);
}


$("a[href*='google.com']").each(function(){ 
    this.href = this.href.replace('http://www.ask.com',talktest1);
});

Answer 1

1. Why do you use bg.js as a both background page and a content script? It doesn't make any sense. chrome.extension.onRequest can't be used in a content script and throws you an error on console. Put $("a[href*='google.com']")... part in a different script (something like content.js) and update your manifest.json.

2. You haven't set up a manifest_version and the default is 1 where background setting wasn't available (source), there was only a background_page.

3. $('.link_change').click in popup.js reacts only on links inside the popup being clicked, not links from the site. Is that what you intended? Popup lives its own life, it doesn't have any idea about currently open website.

4. I believe you can't display an alert() from a background page. Does your alert_this() function even work?

5. Are there any errors in popup or on the bg page? Have you debugged it? You should try putting a breakpoint in onRequest listener function (bg.js) and see what happens there (is request.localstorage, ok? Are values being set correctly?). To debug a background page please use Inspect active views option under your extension on the chrome extensions page.