在上一篇文章【First Theme】学习了创建第一个主题。
这篇文章学习创建一个新标签插件，类似如图：
结构
mkdir new-tab-extension && cd new-tab-extension
将以下内容吸入manifest.json，这是任何浏览器扩展的主入口。
{
"manifest_version": 3,
"version": "1.0",
"name": "New Tab Extension",
"description": "A demo first new tab experience",
"action": {
"default_icon": "icons/icon-48.png"
},
"icons": {
"48": "icons/icon-48.png"
},
"chrome_url_overrides": {
"newtab": "new-tab.html"
}
}
新标签扩展插件的核心在于chrome_url_overrides，它告诉浏览器使用哪个页面打开新标签。
创建new-tab.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DDT New Tab</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<h1>Hello world 👋</h1>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
display: grid;
place-items: center;
background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1 {
font-size: 10vmin;
color: rgb(218 0 96);
}
测试插件
Top comments (0)