Simple Chrome Content Script Not Running

Question

I wrote a short content script, which stops a particular site from creating new windows for link clicks.

This is my first Chrome extension, and I've scored this website and the internet for a reason why it won't run, but I can't find any. I'm probably making a fundamental amateur mistake somewhere.

Manifest.json:

{
"manifest_version": 2,

"name": "DHS Links",
"description": "Stops the school's site from constantly opening new windows.",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png"
},

"content_scripts":[
  {
    "matches": ["*://www.darienps.org/dhs/*"],
    "js": ["jquery.js", "makeNormalLinks.js"],
    "run_at": "document_end"

  }
 ]
}

I tested the Javascript file by itself on a local version of the site, so I'm pretty sure it's fine, but just in case:

makeNormalLinks.js:

$(document).ready(function() {
    $("a").each(function(){
        $(this).removeAttr("onclick");
    });
});

A copy of jQuery is in the same directory and doesn't seem to have any issues.

Here's the onclick code for many links on the website:

onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')

Thank you for looking this over!

---

Edit:

I tried two of the injection methods from Rob W's response to another question linked to in the comments by Teepeemm.

Here's the new code for Method 1:

Manifest.json:

{
"manifest_version": 2,

"name": "DHS Links",
"description": "Stops the school's site from constantly opening new windows.",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png"
},

"content_scripts":[
  {
    "matches": ["*://www.darienps.org/dhs/*"],
    "js": ["jquery.js", "scriptLauncher.js"]

  }
 ],
"web_accessible_resources": ["makeNormalLinks.js"]
}

scriptLauncher.js:

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('makeNormalLinks.js');
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

Method 2a:

(Uses old Manifest.js)

makeNormalLinks.js:

var actualCode = ['$(document).ready(function(){',
                  '$("a").each(function(){',
                  '$(this).removeAttr("onclick");',
                  '});',
                  '});'].join('\n');

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

Unfortunately, neither method seems to work. I'm extremely grateful to those who commented and think we're getting close to an answer.

---

Solution:

Manifest.json:

{
"manifest_version": 2,

"name": "DHS Links",
"description": "Stops the school's site from constantly opening new windows.",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png"
},

"content_scripts":[
  {
    "matches": ["*://www.darienps.org/dhs/*"],
    "js": ["makeNormalLinks.js"]

  }
 ]
}

makeNormalLinks.js:

document.addEventListener("click", function(e) {
    e.stopPropagation();
}, true);

Thanks you, Scott and all who commented!

Answer 1

Using the onclick attribute has many weird side effects. A more up to date approach would be to add a listener to the document that filters unwanted events. Like:

document.addEventListener("click", function(e) {
  e.stopPropagation();
}, true);

The true argument is important (see event capture). This will block all click event listeners from firing, but the default click action will still be triggered.