如何制作一个简单的Chrome扩展程序

制作Chrome扩展程序是一个非常简单的过程。完成后，您将可以在计算机上使用它来增强浏览器的工作方式。

浏览器需要一些基本组件，扩展程序才能完全运行。我们将在下面介绍所有这些内容，包括如何使您的自定义扩展程序在Chrome中运行而无需上传或与其他人共享。

构建复杂的Chrome扩展程序的过程比您在下面看到的过程要详细得多，但是总体过程是一样的。继续阅读以了解如何制作今天可以开始使用的Chrome扩展程序。

提示：要了解自己的扩展程序有多出色，请查看这些惊人的Chrome扩展程序。

如何制作Chrome扩展程序

使用本指南，您将制作一个简单的Chrome扩展程序，其中列出了一些您喜欢的网站。它是完全可定制的，而且真的很容易更新。

要执行的操作：

创建一个文件夹，其中将包含构成扩展名的所有文件。

创建此扩展名所需的基本文件： manifest.json，popup.html，background.html，styles.css。

在文本编辑器中打开popup.html，然后将以下所有内容粘贴到其中，并确保在完成操作后将其保存。

<!DOCTYPE html>

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>

<图class =“ lazy aligncenter”>

随意编辑链接并链接文本，或者如果您想使Chrome扩展程序完全像我们一样，则只需将所有内容保持不变。

<！-

In_content_1 all：[300x250] / dfp：[640x360]

在文本编辑器中打开manifest.json并复制/粘贴以下内容：

{>
“ update_url”：“ https://clients2.google.com/service/update2/crx”，

“ manifest_version”：2，
“名称”：“收藏的网站”，
“描述”：“所有我喜欢的网站。”，
“版本”：“ 1.0”，
“图标”：{
“ 16”：“ icon.png”，
“ 32”：“ icon.png”，
“ 48”：“ icon.png”，
“ 128”：“ icon。 png”
}，

“背景”：{
“页面”：“背景”。 html”
}，

“ browser_action”：{
“ default_icon”： icon.png”，
“ default_title”：“收藏的网站”，
“ default_popup”：“ popup.html”
}
}

<图class =“ lazy aligncenter”>

此代码的可食用区域包括名称，描述和默认标题。

打开styles.css并粘贴以下代码。这就是装饰弹出菜单的要素，使它看起来更吸引人，甚至更易于使用。

#myUL {
列表-style-type：无;
填充：0;
边距：0;
宽度：300px;
}

#myUL li {{strong>
border：1px solid #ddd;
边距：-1px;
背景色：＃f6f6f6;
填充：12px;
文本装饰：无;
字体大小：18px;
颜色：黑色;
显示：块;
字体家族：'noto sans'，sans-serif;
}