使用 chrome 扩展更改 Gmail 撰写对话框的发送按钮的颜色答案

【问题标题】：Change the color of Send button of Gmail Compose dialog using chrome extension使用 chrome 扩展更改 Gmail 撰写对话框的发送按钮的颜色
【发布时间】：2018-01-23 15:39:43
【问题描述】：

我正在制作一个 chrome 扩展，我想在其中更改“撰写”对话框的“发送”按钮的颜色。

最好的方法是什么？

提前致谢！

更新-

这里是我目前用来改变颜色的content.js的功能-

function modifySendButton(check, form) {
    var send_button = $(form).siblings('table').find('div[role="button"][aria-label="Send ‪(Ctrl-Enter)‬"]');
    if (0 === send_button.length) {
        send_button = $(this).siblings('table').find('div[role="button"][aria-label="Send ‪(⌘Enter)‬"]');
    }

    if (true === check) {
        send_button.addClass("active-send-button");
    } else {
        send_button.removeClass("active-send-button");
    }
}

它正在改变发送按钮的颜色，但我想知道这样做是否正确？

【问题讨论】：

您是否尝试使用内容脚本创建扩展？
是的，我有一个内容脚本。
那么，您能与我们分享您的代码吗？你到底卡在哪里了？
你好@Deliaz，我已经添加了代码sn-p。请查看它并告诉我更改发送按钮颜色的正确方法是什么？

标签： google-chrome-extension

【解决方案1】：

您可以尝试在内容脚本中使用mutation observer。
完整示例：

manifest.json

{
  "manifest_version": 2,
  "name": "Btn Color",
  "description": "",
  "version": "1.0.0",
  "content_scripts": [{
    "js": ["content-script.js"],
    "matches": [
      "https://mail.google.com/*"
    ],
    "run_at": "document_end"
  }],
  "permissions": [
    "tabs"
  ]
}

content-script.js

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if(mutation.addedNodes && mutation.addedNodes.length) {

            // look for the button
            const sendBtn = document.querySelector('.dw [aria-label*="Send"]'); 
            if(sendBtn) {
                sendBtn.style.background = 'red'; // set your styles
            }

        }
    });    
});

var targetNode = document.body;
observer.observe(targetNode, {childList: true});

【讨论】：