如何在五分钟内开发一款Chrome扩展-云智核

如何在五分钟内开发一款Chrome扩展

发布时间：2025-11-05 03:52:59 来源：云智核作者：IT科技

【.com快译】Chrome扩展是何分什么？在着手开发之前，我们首先需要明确Chrome扩展的钟内展基本概念。具体来讲，开发款Ce扩这是何分一款用于强化浏览器功能的插件。

在本文中，钟内展我们将开发一款能够显示美妙背景图像的开发款Ce扩Chrome扩展，其同时亦可在您打开新选项卡时显示每日名言。何分这款扩展将适用于全部基于chromium内核的钟内展浏览器。

您需要掌握以下基础知识：

• HTML

• CSS

• JavaScript

我们将利用HTML、开发款Ce扩CSS与JavaScript构建一套简单网站，何分并将其托管在谷歌Chrome当中。钟内展要开发Chrome扩展，开发款Ce扩我们应当遵循以下***实践或格式。何分

扩展的钟内展构建工作并不复杂，只需要以下几个步骤即可实现。开发款Ce扩

打开Chrome并前往chrome://extensions/。而后启用开发者模式。b2b信息网

前往extensionizr.com并从以下选项中作出选择（您可将鼠标在各选项的？之上获取更多说明）：

• 隐藏扩展

• 无背景

• 无额外选项

• 覆盖新选项卡

• 添加jQuery

在选择结束后，下载zip文件。

对此zip文件进行解压，而后编辑主文件夹中的manifest.json文件。Manifest.json当中包含Chrome扩展所需要的全部元数据，这即为我们扩展的入口点。其在本质上属于一个JavaScript对象，同时包含名称、版本以及描述等属性。在后文中我们将对其加以使用。

在CSS与js文件夹中分别创建a.css文件与a .js文件。

构建基本HTML文件。前往src/override/，您将在这里找到override.html文件。

将.js与.css文件添加到此override.html文件内。

这里我们将使用以下两个网站。Unsplash将提供可供使用的图像，而TheySaidSo则负责提供每日名言。站群服务器

• https://source.unsplash.com

• https://theysaidso.com/api/

要对外部链接发送请求，我们需要在manifest.json当中添加URL的必要权限。

在custom.css中添加以下CSS代码（我们使用PT serif谷歌字体）。

从theysaidso API处获取资讯。我们需要利用AJAX从API（http://quotes.rest/qod.json）处获取JSON数据以及Quote。

在您创建的JavaScript文件中添加以下代码：

制作Chrome扩展（.crx）文件。首先对您的文件夹进行测试，而后打包扩展并生成可进行共享的a.crx文件。只需要将该.ctx文件拖拽至chrome://extensions/，即可完成对该扩展的安装。

如此一来，每当您打开一个新选项卡，浏览器中即会显示一幅新图片外加一条每日名言。利用API，大家也可以设置JSON数据的background属性以确保每天只使用一幅图片。

原文标题：How to Make a Chrome Extension in 5 Minutes 原文作者：Vivek Sharma

【译稿，合作站点转载请注明原文译者和出处为.com】

随便看看