Chrome 浏览器插件开发

原创已于 2022-03-10 17:21:37 修改 · 489 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端

于 2022-03-10 17:19:50 首次发布

本文介绍了如何创建一个Chrome扩展，包括manifest.json文件的配置，如插件元数据、版本信息和浏览器动作设置，以及index.html文件的构建，强调了引入外部JS文件的重要性。通过这个过程，你可以将文件夹加载到Chrome扩展程序并进行测试。

首先创建一个manifest.json 文件,大致如下；描述插件的元数据，配置信息等。

{
  "name": "名字",
  "description" : "描述",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "16": "image.png",
    "128": "image.png"
  },
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": {
      "19": "image.png",
      "38": "image.png"
    }
  }
}

其次创建index.html 文件；注意js文件是引入的，不然js不生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery.js"></script>
</head>
<body>
  <div>
    正常页面dom布局
  </div>
  <!-- 注意js文件是引入的，不然js不生效 -->
  <script src="./js/popup.js"></script>
</body>
</html>

文件目录结构大致长这样：