(一)Chrome Extension入门教程---Hello World

zwf193071

已于 2022-01-30 12:08:35 修改

阅读量3.1k

点赞数

分类专栏： JS 文章标签： chrome vscode 前端

于 2022-01-25 13:28:15 首次发布

本文链接：https://blog.csdn.net/zwf193071/article/details/122683510

版权

JS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

Chrome Extension是什么

Small programs(小程序)
Modify DOM of a web page (修改网页的DOM)
HTML, CSS & Javascript

大致组成结构如下图所示：

Extension类型

Browser Action
1. 显示在浏览器的tool bar内
2. 随时能被访问
Page Action
1. 显示在浏览器的tool bar内，但功能已被禁用
2. 只在部分页面能被访问到
既不是Browser Action，亦非Page Action
1. 在后台运行

`Manifest`是什么

关于Extension的信息
JSON格式
必须定义如下内容
1. Manifest版本号
2. Extension的名称
3. Extension的版本号

搭建`Hello World` Extension

开始

在命令行终端，输入以下命令

mkdir helloworld-extension
cd helloworld-extension
# 用vscode打开当前项目
code ./

在项目内新建manifest.json文件，内容如下所示：

{
    "manifest_version": 2, // `Manifest`版本号
    "name": "Hello World", // `Extension`的名称
    "version": "1.0", // `Extension`的版本号
    "description": "A hello world extension", // `Extension`的说明
    "icons": {
        "128": "./assets/icon128.png",
        "48": "./assets/icon48.png",
        "16": "./assets/icon16.png"
    },
    "browser_action": {
        "default_icon": "./assets/icon16.png",
        "default_popup": "popup.html"
    }
}

按照谷歌官方说明，它推荐在定义icons时，分别使用128、48以及16这三种分辨率图标

browser_action说明了我们的Hello World Extension将会按照Browser Action来创建

创建`popup.html`

在vscode里创建popup.html，输入html:5会快速生成html页面内容，如下所示：

<!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>Hello World extension</title>
</head>
<body>
    <h2 id="hello">Hi, nice to meet you!</h2>
</body>
</html>

在浏览器地址栏，输入chrome://extensions，点击加载已解压的扩展程序，选择我们的项目，完成之后，如下图所示：

此时，在浏览器tool bar内亦出现我们的项目图标

点击该项目图标，弹出如下内容

创建`popup.js`

popup.js内容如下所示：

window.onload= () => {
    const $hello = document.querySelector('#hello')
    const $name = document.querySelector('#name')
    $name.addEventListener("keyup", () => {
        $hello.textContent = `hello, ${$name.value}`;
    })
}

在popup.html里添加如下内容

<body>
    <h2 id="hello">Hi, nice to meet you!</h2>
    <input type="text" id="name">
    <script src="./popup.js"></script>
</body>

无需在Chrome浏览器内重新加载程序，因为我们只是添加了js功能，直接再次点击我们的程序图标，输入input内容，会发现提示语随着输入的变化而变化，如下图所示：

创建`popup.css`

popup.css内容如下所示：

h2 {
    color: red;
}

在popup.html里添加如下内容

<link rel="stylesheet" href="./popup.css">

在Chrome内点击我们的程序图标

至此，我们的Hello World Extension项目已创建完毕

zwf193071

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
(一)Chrome Extension入门教程---Hello World

Chrome Extension是什么Small programs(小程序)Modify DOM of a web page (修改网页的DOM)HTML, CSS & Javascript大致组成结构如下图所示：Extension类型Browser Action显示在浏览器的tool bar内随时能被访问Page Action显示在浏览器的tool bar内，但功能已被禁用只在部分页面能被访问到既不是Browser Action，亦非Page Ac
复制链接

扫一扫