从零开始开发谷歌插件

不怕撞名

于 2024-04-25 14:16:34 发布

阅读量164

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43066270/article/details/138187838

版权

1.首先我先创建一个基本的谷歌 Chrome 扩展

创建一个名为 manifest.json 的文件，包含插件的基本信息和权限声明

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "description": "This is a simple Chrome extension.",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2.创建一个名为 popup.html 的文件，用于插件的弹出窗口内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Chrome Extension Popup</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Chrome Extension!</h1>
  <p>This is a simple Chrome extension popup.</p>
</body>
</html>

3.准备插件的图标图片，分别命名为 icon16.png、icon48.png 和 icon128.png，并将它们放置在一个名为 images 的文件夹中。

4.将以上文件组织好后，将它们放置在一个文件夹中，命名为你想要的插件名称，比如 my-chrome-extension。

5.在 Chrome 浏览器中打开扩展管理页面（chrome://extensions/），确保开启了“开发者模式”，然后点击“加载已解压的扩展程序”，选择你创建的插件文件夹。

6.现在你应该能在 Chrome 浏览器的工具栏中看到你的插件图标，点击图标会弹出一个包含简单信息的弹出窗口。