Chrome扩展程序-添加到gmail撰写页面的元素未显示

Question

我正在构建chrome扩展程序，并且想在Gmail网页的撰写窗口中向div元素添加内容。 通过使用chrome中的检查工具，我得到了div的类，在内容之前添加了内容，但未显示。

Manifest.json

{
"manifest_version": 2,

"name": "Gmail Extension",
"description": "Personalised extension for gmail",
"version": "1.0",
"icons": {
  "128": "icon128.png",
  "48": "icon48.png",
  "16": "icon16.png"
},

"content_scripts":[
    {
      "matches": ["https://mail.google.com/*"],
      "js": ["content.js", "jquery-3.3.1.min.js"]
    }
],

"permissions": [  
        "tabs",
        "https://mail.google.com/*"      
      ]
}

Content.js

$('div#:ug.J-J5-Ji btx').prepend('<p>Test added</p>');

撰写窗口的图像，div突出显示

文本元素未显示 谢谢

Answer 1

这是我将复选框添加到“撰写”窗口的操作：

// listen for the event that is fired when the document has finished loading
document.addEventListener('DOMContentLoaded', addUpdateButton, true);
addUpdateButton();

function addUpdateButton() {
    var optionsArea = document.getElementsByClassName("aoD az6");
    if (optionsArea && optionsArea.length > 0) {
        var ecsLabel = document.createElement('label');
        ecsLabel.setAttribute('name','ecsslabel');
        ecsLabel.innerHTML = "Send as ECS: ";
        ecsLabel.setAttribute('id','ecsLabel');
        optionsArea[0].appendChild(ecsLabel);

        var ecs = document.createElement('input');
        ecs.setAttribute('type','checkbox');
        ecs.setAttribute('name','ecsbox');
        chrome.storage.sync.get("ecs_mode", 
            function(val) {
            ecs.checked = val["ecs_mode"];
        });
        ecs.setAttribute('id','ecsOption');
        optionsArea[0].appendChild(ecs);
    }
}

这是结果（实际上，我添加了几个复选框，但为清楚起见省略了代码）：