Javascript google chrome扩展内容脚本和背景

我正在尝试做一个谷歌浏览器的扩展。当用户单击浏览器操作图标时，假定当前网页上有“雪”。我有javascript，但不知道如何使用内容脚本或背景脚本。如何注入javascript snow.js和snow.html文件

    <canvas id="canvas"></canvas>

---

首先，不能使用内容脚本功能将HTML文件插入网页。也就是说，JavaScript和CSS可以作为内容脚本使用。如果要将新的canvas标记放到网站上，则需要使用JavaScript代码创建标记。在这种情况下，其脚本将变成snow.js，如下代码所示：

var canvas = document.createElement("canvas");
canvas.setAttribute("id", "canvas");
var body = document.querySelector("body");
body.appendChild(canvas);

针对当前选项卡注入脚本时，需要在manifest.json文件中定义权限：

{
  ...
  "permissions": [
    "activeTab",
    ...
  ],
  ...
}

然后，为browserAction按钮注册click事件处理程序。在handler函数中，可以将JavaScript文件注入当前选项卡

chrome.browserAction.onClicked.addListener((tab) => {
  chrome.tabs.executeScript(tab.id, {
    file: "snow.js"
  });
});

---

您将在选项卡中看到降雪，如果成功…

非常感谢！还有一个问题：它在像谷歌首页这样的网站上运行得非常好，但在背景广泛的网站上（比如nytimes.com）却不行。我该怎么做才能使雪落在站点元素的“前面”，从而始终可见？显示雪的层是否具有css的z索引值？我认为这是一个关于CSS的问题。