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

google chrome extensions content script and background

本文关键字：脚本 背景 扩展 程序 谷歌浏览器      更新时间：2023-09-26

我正在尝试制作一个谷歌浏览器扩展。 当用户单击浏览器操作图标时，它应该在当前网页上"下雪"。我有javascript，但不知道如何使用内容脚本或后台脚本。如何注入我的 JavaScript snow.js 和 snow.html 文件

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

首先，不能使用内容脚本功能将 HTML 文件注入网页。也就是说，JavaScript 和 CSS 可用作内容脚本。如果要将新的画布标记放入网站，则需要使用 JavaScript 代码创建标记。在这种情况下，它的脚本将变成雪.js如下代码：

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

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

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

并且，为浏览器"操作"按钮注册单击事件处理程序。在处理程序函数中，您可以将 JavaScript 文件注入到当前选项卡中。

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

如果成功，您将在选项卡中看到飘落的雪...

相关文章：