【谷歌浏览器插件开发教程】一、来自定义一个专属的新打开标签页

前端 2025-02-25 09:26 141 0

系列

谷歌浏览器插件开发系列

本章节内容

谷歌插件调取api设置
调取每日必应壁纸，将其设置为背景图
识别图片颜色调整字体颜色
壁纸下载蒙版
设置文字蒙层等

前言
谷歌浏览器介绍、初始新标签页介绍
Google Chrome，是一款由 Google 公司开发的网页浏览器。Chrome 在 2008 年 9 月 2 日发布 Beta 版本，一经发布就广受好评。
Chrome 商店上有各式各样的插件提供下载。大家或许已经有下载到其他的插件自定义了自己的主题或者标签页。
如果大家暂时还没有调整的话，初始的标签页可能是这个样子：

本章节内容

在本章中我们将开发一个属于自己的谷歌插件，教大家自定义属于自己的新标签页:

让我们开始吧\~

目录介绍

my-new-tab/
├── manifest.json # 这里是谷歌浏览器的基础配置文件，可以设置插件标题、图标、使用权限等。
├── background.js # 这里是我们将使用的一个后台脚本，可以用来管理插件的生命周期，或进行数据存储等。
├── newtab.html # 这里是我们新开标签页内容
├── newtab.css # 标签页样式
├── icon.png
└── newtab.js # 标签页js

`manifest.json`

是扩展的配置文件，告诉 Chrome 扩展的基本信息和权限。

{
  "manifest_version": 3,
  "name": "Custom New Tab Page",
  "version": "1.0",
  "description": "A custom new tab page for Chrome",
  "permissions": ["storage"],
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

值得注意的有，"chrome_url_overrides": {"newtab": "newtab.html"}: 这个配置将会覆盖 Chrome 默认的新标签页，并使用你自己的 newtab.html 页面。
"name": "Custom New Tab Page" : 这个配置会显示显示在我们的插件管理页面里。
如果icon.png没有配置，会提示：Could not load icon 'icon.png' specified in 'icons'.
"default_popup": "popup.html"我们会在浏览器的右上角中看到它，在后面的小结中在做讨论吧。

`newtab.html`

这是你自定义的新标签页 HTML 文件，内容可以根据需求自定义。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义新标签页</title>
  <link rel="stylesheet" href="newtab.css">
</head>
<body>
  <header>
    <h1>欢迎来到自定义的新标签页</h1>
    <button id="change-background">更换背景</button>
  </header>
  <main>
    <p>这里可以添加你喜欢的内容，比如天气、搜索框等。</p>
    <div id="quote"></div>
  </main>
  <script src="newtab.js"></script>
</body>
</html>

html我就不做过多介绍了。

`newtab.css`

你可以为新标签页添加自定义样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
  }

  header {
    text-align: center;
    margin-top: 20px;
  }

  #change-background {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
  }

  main {
    padding: 20px;
    text-align: center;
  }

`newtab.js`

这个 JavaScript 文件可以用来添加交互逻辑。

document.getElementById('change-background').addEventListener('click', () => {
    const backgrounds = ['#FFEB3B', '#8BC34A', '#03A9F4', '#FF5722'];
    const randomColor = backgrounds[Math.floor(Math.random() * backgrounds.length)];
    document.body.style.backgroundColor = randomColor;
  });

  // 如果你想添加动态内容，可以在这里做其他处理
  const quotes = [
    "生活就是不断的开始，又不断的结束。",
    "活在当下，珍惜每一刻。",
    "每天都是新的一天，充满新的希望。"
  ];

  document.getElementById('quote').innerText = quotes[Math.floor(Math.random() * quotes.length)];

这段代码实现了点击按钮后随机更改背景颜色，并在页面加载时显示一条随机名言。
点击按钮 change-background，从预定义的颜色列表中随机选择一个颜色并应用为背景色。
1. 页面加载时，从预定义的名言列表中随机选择一条名言并显示在元素 quote 中。

`background.js`

这段代码的功能是：当扩展程序安装时，向控制台输出一条消息 "Custom New Tab Extension Installed!"。

chrome.runtime.onInstalled.addListener(() => {
    console.log("Custom New Tab Extension Installed!");
  });

安装测试我们的插件

基础的开发内容已经完成了，让我们来安装测试它。
- 打开 Chrome 浏览器，进入 chrome://extensions/ 页面。
- 开启开发者模式。
- 点击“加载已解压的扩展程序”，选择你创建的文件夹。
然后我们将看到
- 我们配置的名称、简介、icon等。
- 值得注意的是，如果你需要调试你得代码，可以点击以上截图中的检查视图Service Worker
点击新标签页
- 我们会看到我们的newtab.html内容
- 点击按钮我们会看到背景颜色变化、刷新页面会提示新的名言