跳到主要内容

Hello World

概述​

本文将带你通过一个简单的 "Hello World" 项目，快速入门 Chrome 浏览器扩展开发。你将学习到扩展的基本结构和工作原理。

上机！写代码​

创建项目目录：helloworld

按以下目录结构在项目中添加文件：

helloworld
├── hello.html
├── hello_extensions.png
├── manifest.json
└── popup.js

hello.html：

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

hello_extensions.png：

略（可下载示例文件或自己找张图片重命名）

manifest.json：

这个是最重要、必不可少的文件！

{
    "name": "Hello Extensions", // 扩展的名称
    "description": "Base Level Extension", // 扩展的描述
    "version": "1.0", // 扩展的版本
    "manifest_version": 3, // 必须填 3
    "action": { // 点击打开弹出式窗口设置
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

popup.js：

console.log('This is a popup!');

完整示例代码见👇

DEMO: chrome-extension-demos/01/helloworld

在浏览器加载执行​

操作步骤：

  1. 在浏览器地址栏输入：chrome://extensions
  2. 在右上角打开“开发者模式”
  3. 在左上角点击“加载已解压的扩展程序”按钮
  4. 选择上面的“helloworld”目录，完成！

为了方便快速访问，我们还需要把扩展固定（Pin）在工具栏：

可以在我们的扩展详情点开：

也可以在工具栏“扩展程序“点开：

调试程序​

点击我们的扩展程序图标，在弹出式页面右键”检查“，即可看到我们熟悉的浏览器控制台，这样就能进行调试了：

资源​

参考​