后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何用 JavaScript 制作 Chrome 扩展程序
✨ 你将要制作的内容
在本教程中，我将引导你通过几个简单的步骤，使用原生 JavaScript 制作一个 Chrome 扩展程序。我制作的这个 Chrome 扩展程序会在你每次打开新标签页时随机显示一个中文成语。你也可以轻松尝试其他语言的引语或词汇，以便更频繁地接触新单词/肯定语录！
✨ 首先：HTML
<body>
<div class = "container">
<div id = "chengyu">
<h1></h1>
</div>
<div id = "pingyin">
<h3></h3>
</div>
<div id = "definition">
<h2></h2>
</div>
</div>
</body>
记得链接您稍后将创建的 script.js 文件和 data.json。
✨ 根据你的喜好设置样式：CSS
记得选择带 # 的 id。我在 body 中添加了一行 webkit 动画，使文本流畅地流动。
body {
color: white;
font-size: 40px;
overflow: hidden; /* Hide scrollbars */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
}
然后，您还需要在 css 中添加这些行以使动画生效。
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
✨ 有趣的部分：JS
基本上，你需要在一个大函数中编写代码。我首先创建了一个数组，里面放了一些我精心挑选的颜色，用于背景。然后，还有一个通用的随机函数，它会为你返回数组中的一个随机项。
// randomize function
function randomize(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
要使用 JSON 文件，你需要使用 fetch 函数来获取它。大部分神奇的事情发生在 .then() 函数下面。你使用 JSON 文件中的数据调用 randomize 函数，并将其赋值给一个变量，以便稍后更方便地访问。然后，你操作 DOM，让文本随机地显示在 HTML 上。
// loads the external json file
fetch('./data.json')
.then((response) => {
return response.json()
})
.then((data) => {
// work with JSON data here
var random = randomize(data);
// display the elements on the html
document.getElementById('chengyu').innerHTML = random.chengyu;
document.getElementById('definition').innerHTML = random.definition;
document.getElementById('pingyin').innerHTML = random.pingyin;
})
.catch((err) => {
// do something for an error here
})
然后，window.onload 函数就是你放置代码的地方，用于从数组中随机选择一种颜色并将其显示为背景
//pick a random background color
window.onload = function() {
var randomColor = randomize(color);
document.getElementsByTagName("body")[0].style.background = randomColor;
};
这是JS部分的整体代码！
(function(){
// array of colors
var color = [
"#d1495b",
"#edae49",
"#003d5b",
"#00509d",
"#3a5a40",
"#1f7a8c",
"#588157",
];
// randomize function
function randomize(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
// loads the external json file
fetch('./data.json')
.then((response) => {
return response.json()
})
.then((data) => {
// work with JSON data here
var random = randomize(data);
// display the elements on the html
document.getElementById('chengyu').innerHTML = random.chengyu;
document.getElementById('definition').innerHTML = random.definition;
document.getElementById('pingyin').innerHTML = random.pingyin;
})
.catch((err) => {
// do something for an error here
})
//pick a random background color
window.onload = function() {
var randomColor = randomize(color);
document.getElementsByTagName("body")[0].style.background = randomColor;
};
})();
✨ Chrome 扩展程序部分：manifest.json
该文件将 JavaScript 代码转换为 Chrome 扩展程序。您可以根据项目需求进行自定义。请确保在您的目录中创建一个 icons 文件夹，并添加 16px x 16px、48px x 48px 和 128px x 128px 大小的 png 图标。描述信息只需一行，当用户浏览您的扩展程序时，它将以简短的描述形式显示。
{
"name": "chengyu",
"short_name": "chengyu",
"version": "0.0.1.2",
"description": "New tab, new Chinese idiom",
"icons": { "16": "icons/chengyu.png",
"48": "icons/chengyu-2png",
"128": "icons/chengyu-3.png"
},
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"
},
"web_accessible_resources": [
"data.json"
]
}
✨ 填充内容：data.json
这是你放置 JSON 对象的地方。以下是我自己的 JSON 文件中的一段示例代码，用于展示格式化 JSON 文件的语法。
[
{"chengyu": "一了百了", "pingyin": "Yīliǎobǎiliǎo","definition": "When one thing is done, everything is done"},
{"chengyu": "一刀兩斷", "pingyin": "yīdāoliǎngduà", "definition": "End relationships"},
{"chengyu": "一口咬定", "pingyin": "yīkǒu yǎodìng", "definition": "Short of something"}
]
✨ 是时候在本地试用扩展程序了
。前往“管理扩展程序”页面，开启开发者模式。接下来，点击“加载已解压的扩展程序”，并导航到包含代码的文件夹。之后，您就能在 Chrome 浏览器上试用该扩展程序了。每次更改代码，都会反映在此开发者模式中。
🎉 将其上传到 Chrome 商店与好友分享*
要将您的扩展程序上传到商店，您需要支付一次性 5 美元的费用来注册一个开发者账户。您还需要将项目以 zip 文件的形式上传到开发者面板（如果您使用的是 Mac，请将其压缩成 zip 文件）。您可以按照此处的快速步骤操作。提交后大约需要 1-2 天才能审核并发布到 Chrome 商店。