title: How to modify all links on page with chrome extension?
body: <p>I'm teaching myself how to write Chrome extensions, but I'm having trouble getting even the basic functionality up and running. </p>
  
  <p>I'm trying to write an extension that modifies all links on a given page. As a proof of concept, I'm trying to fix it so that all the links on a <code>google.ca</code> results page point instead to <code>www.gooogle.cn</code></p>
  
  <p>Here's my <code>manifest.json</code>:</p>
  
  <pre><code>"name": "Google Link Fixer",
    "version": "0.1",
    "permissions": ["*://www.google.*/*"],
  
    "content_scripts": [
      {
        "matches": ["*://www.google.*/*"],
        "js": ["jquery.js", "content_script.js"]
      }
    ],
    "manifest_version": 2
  }
  </code></pre>
  
  <p>Here's the javascript in <code>content_script.js</code> (note that <code>jquery.js</code> is in the same directory):</p>
  
  <pre><code>$(document).ready(function(){
  $("a[href^='https://www.google.ca']")
     .each(function()
     { 
        this.href = this.href.replace(/^https:\/\/www\.google\.ca/, 
           "https://www.google.cn");
     });
  });
  </code></pre>
  
  <p>And ... nothing. I can see in the developer tools that the extension is being loaded, and the code is there under Content Scripts, but I'm not seeing the expected results. Any help is appreciated. </p>