Question

I’m trying to add a button into the Gmail compose toolbar at the Insert section specifically. I’ve seen an extension that does just that, so I know its possible but I’m confused on how to do it.

I’m using the content_Script to javascript inject into the webpage but the compose window is in an iframe window which apparently you aren’t allowed to inject into because the iframe loads after the content_script even with the “run_at”: “document_end”.

Also another thing I’m confused on is that Gmail has all their id tags randomizing so how could I know what tag to inject into if they are always different every time I compose an email.

So could anyone help me out with this an let me know how to go about using a content_script to inject into an iframe and how to get around GMail id tags always randomizing/being different.

  {
      "name": "Test Gmail",
      "version": "0",
      "description": "Test Gmail",

      "permissions": ["tabs", "http://*/*", "https://*/*"],
        "content_scripts": [
        {
          "matches": [ "http://*/*", "https://*/*"],
          "css": ["mystyles.css"],
          "js": ["myScript.js"],
          "run_at": "document_end",
          "all_frames": true

        }
      ]
    }

Answer 1

Use JQuery and listen for the even “DOMNodeInserted”. After that you want to use JQuery to locate where you want to insert the button or whatever using the function $(selector, context); to search for the parent. GMail id name is all done dynamically so you have to try search for something that doesn’t change such as the html tag or class name’s.