Chrome Extension to insert an image into Gmail email

I can't get my chrome extension to populate on Gmail.com or Facebook.com, best I can tell, sites with iframes

I have searched quite a bit and tried everything I have found to no success. Help would be very much appreciated! Code is below

My manifest.json

{ "manifest_version": 2, "name": "NameDrop", "short_name": "NameDrop", "description": "Easily access NameDrop recordings in-page", "icons": { "128": "icon.png" }, "version": "1.0.0", "author": "https://namedrop.io", // "createdBy": "Keshav Malani", "homepage_url": "https://namedrop.io", "browser_action": { "default_icon" : "icon.png", "default_title": "Access to NameDrop pronunciations" }, "content_scripts": [ { "matches": ["<all_urls>"], // "run_at": "document_start", //If I enable appendChild fails "all_frames": true, "js": ["content_script.js"] } ], "web_accessible_resources": [ "namedrop.png", "insert.js" ], "permissions": [ "*://*/*", "tabs" ] } 

My content_script.js file:

//Insert the <script> tag for insert.js var head1 = document.getElementsByTagName("head")[0]; fn1 = chrome.extension.getURL('insert.js'); var script1 = document.createElement('script'); script1.setAttribute("type", "application/javascript"); script1.src = fn1 ; head1.appendChild(script1); //Identify the URL for image var ndImgUrl = chrome.extension.getURL("namedrop.png"); //Insert the javascript code for playback on click var head = document.getElementsByTagName("head")[0]; fn = "function playNDRecording(i){document.getElementById('ndlink'+i).play();} var ndImgUrl = '"+ndImgUrl+"';"; var script = document.createElement('script'); script.setAttribute("type", "application/javascript"); script.textContent = fn; head.appendChild(script); 

My insert.js file:

//Identify all a hrefs arrayOfAs = document.getElementsByTagName("a"); // console.log(arrayOfAs); console.log(arrayOfAs.length); for (var i = 0; i < arrayOfAs.length; i++) { //Find indexes relevant to NameDrop links match1 = arrayOfAs[i].href.indexOf("namedrop.io"); match2 = arrayOfAs[i].href.indexOf("nmdrp.me"); if (match1 >= 0) { //Capture the username from link username = arrayOfAs[i].href.substr(match1+12,arrayOfAs[i].href.length); console.log("it is "+username); //Validation based on http://stackoverflow.com/questions/13840143/jquery-check-if-special-characters-exists-in-string if(/^[a-zA-Z0-9]*$/.test(username) == false || !username) { console.log("Not a NameDrop username"); } else { //Determine height of the where the logo will be displayed //Based on http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element var hght = arrayOfAs[i].offsetHeight; arrayOfAs[i].innerHTML += "<a href ='#' style='text-decoration:none;'><img src='"+ ndImgUrl + "' height='" + hght +"' onclick='playNDRecording("+i+")'><audio id='ndlink"+i+"'><source src='https://namedrop.io/profile/audio/"+username+".mp3' type='audio/mpeg'><source src='https://namedrop.io/profile/audio/"+username+".wav' type='audio/wav'></audio></a>"; } } else if (match2 >= 0) { //Capture the username from link username = arrayOfAs[i].href.substr(match2+9,arrayOfAs[i].href.length); console.log("it is "+username); //Validation based on http://stackoverflow.com/questions/13840143/jquery-check-if-special-characters-exists-in-string if(/^[a-zA-Z0-9]*$/.test(username) == false && !username ) { console.log("Not a NameDrop username"); } else { //Determine height of the where the logo will be displayed //Based on http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element var hght = arrayOfAs[i].offsetHeight; //Insert the logo etc. arrayOfAs[i].innerHTML += "<a href ='#' style='text-decoration:none;'><img src='"+ ndImgUrl + "' height='" + hght +"' onclick='playNDRecording("+i+")'><audio id='ndlink"+i+"'><source src='https://namedrop.io/profile/audio/"+username+".mp3' type='audio/mpeg'><source src='https://namedrop.io/profile/audio/"+username+".wav' type='audio/wav'></audio></a>"; } } } 

Disclaimer: a newbie at this, so code isn't the best