Question

我正在尝试制作Google Chrome扩展程序。当用户点击浏览器动作图标时，假设当前网页上出现“下雪”。我有javascript但无法弄清楚如何使用内容脚本或后台脚本。如何注入我的javascript snow.js和snow.html文件

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

Answer 1

首先，您无法使用内容脚本功能将HTML文件注入网页。也就是说，JavaScript和CSS可用作内容脚本。如果要将新的canvas标记放到Web站点，则需要使用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事件处理程序。在处理程序函数中，您可以将JavaScript文件注入当前选项卡。

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

如果成功，你会看到标签中的积雪......

谷歌浏览器扩展内容脚本和背景

1 个答案: