如何创建一个 Chrome 的 Hello World 扩展插件？ (15分钟)

最新推荐文章于 2024-04-27 17:59:59 发布

蜜汁小强

最新推荐文章于 2024-04-27 17:59:59 发布

阅读量289

点赞数

文章标签： chrome 前端

本文链接：https://blog.csdn.net/wxqee/article/details/125863026

版权

迈出第一步

创建项目目录

创建项目目录，随便啥遍名字。比如: MyChromeHelloWorld.

创建项目配置

创建文件 manifest.json, 填写基本内容。

{
  "name": "你好世界",
  "description": "这是一个简单到可以作为Chrome扩展的模板的项目",
  "version": "1.0",
  "manifest_version": 3
}

注意 version 区别于 manifest_version。manifest_version 是配置告诉Chrome浏览器用什么版本的manifest解释器。而 version 是指MyChromeHelloWorld的版本目前是第几个。很显然，可以从 1.0 版本开始咯。

让浏览器以加载目录的方式加载扩展

操作三步走：

浏览器访问 chrome://extensions。可以为了方便点击这里直达。
打开开发者模式。
点击 Load unpacked (我不知道中文版本下它是怎么显示的)，并选择扩展项目目录。

搞定，但是因为没有配置Icon，所以Icon是用的默认的一个。
在这里插入图片描述

加点儿功能

设个目标，咱们加一个网页来展示一点儿信息，当然也可以有复杂功能。当点击 Chrome 扩展的图标的时候，可以唤起这个网页。

添加 browser_action 配置

{
  "name": "你好世界",
  "description": "这是一个简单到可以作为Chrome扩展的模板的项目",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  }
}

添加 popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>你好世界!</title>
    <link href="./popup.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h2 class="coral">欢迎来到Chrome世界！</h2>
    <url>
      <li><a href="https://baidu.com/" target="_blank">百度</a></li>
    </url>
    <script src="./popup.js"></script>
  </body>
</html>

添加 popup.css

body {
  width: 400px;
  height: 300px;
}

h2.coral {
  color: coral;
}

添加 popup.js

document.addEventListener("DOMContentLoaded", () => {
  window.alert("DOMContentLoaded callback 123");
});

浏览效果

在这里插入图片描述