在Chrome扩展程序中，如何更改弹出窗口的完整背景颜色？

Posted 2021-05-05

我有一个新标签Google Chrome扩展程序。在左下角，我有一个设置菜单，当你点击它时会弹出一个小框架。但是，弹出窗口的背景颜色是白色，我想将其更改为完全黑色。如何更改全帧背景颜色？这是我的代码：Image of my code result

 <div class="footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-0 settingscontainer">
          <i class="fa fa-cog settingsbtn fa-2x" data-container="body" data-toggle="popover" data-placement="right" data-html="true"
            data-content="" >
          </i>
           
      </div>
    </div>
  </div>
</div>
        </div>

      </div>
    </div>
  </div>

答案

有一个关于更改背景页面颜色的示例，可以应用于您的popup.html。这在Getting Started: Building a Chrome Extension中找到。

popup.html将在弹出窗口内呈现，该窗口是为响应用户点击浏览器操作而创建的。它是一个标准的HTML文件，就像您习惯于从Web开发一样，让您或多或少地自由统计弹出窗口显示的内容。

这是样本的摘录：

/**
 * Change the background color of the current page.
 *
 * @param {string} color The new background color.
 */
function changeBackgroundColor(color) {
  var script = 'document.body.style.backgroundColor="' + color + '";';
  // See https://developer.chrome.com/extensions/tabs#method-executeScript.
  // chrome.tabs.executeScript allows us to programmatically inject javascript
  // into a page. Since we omit the optional first argument "tabId", the script
  // is inserted into the active tab of the current window, which serves as the
  // default.
  chrome.tabs.executeScript({
    code: script
  });
}