Chrome Extension to insert an image into Gmail email

Question

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

Those may be dynamically generated iframes. Try [match_about_blank](https://developer.chrome.com/extensions/content_scripts) — wOxxOm, Jul 21 '16 at 07:42
You have `background.js` defined as the content script. There's no `content_script.js` anywhere in sight in code/manifest. Your `inject.js` apparently tries to inject _itself_. Get your file names in order please. — Xan, Jul 21 '16 at 09:55
@Xan - I messed up in my copy pasting. Fixed both errors above. wOxxOm will try that and report back. When I tried before, it broke my thing — credizian, Jul 21 '16 at 17:51
@wOxxOm tried your suggestion. Still no go. **Another thing to note:** If I click on popping-out the message into a new window, the image shows up. But if it was was one of the collapsed emails in the email conversation, then it doesn't show up when I open the email (still in the new window) — credizian, Jul 22 '16 at 06:12
Have you tried debugging the content script and the inject script? You can set breakpoints in code (devtools -> sources panel) or use `debugger` statement. — wOxxOm, Jul 22 '16 at 11:48
Going through debugging - it looks like extension never gets to "a href" that are inside the emails, only the outside "a href" — credizian, Jul 22 '16 at 18:14

Chrome Extension to insert an image into Gmail email

0 Answers0