制作Chrome扩展程序是一个非常简单的过程。完成后,您将可以在计算机上使用它来增强浏览器的工作方式。
浏览器需要一些基本组件,扩展程序才能完全运行。我们将在下面介绍所有这些内容,包括如何使您的自定义扩展程序在Chrome中运行而无需上传或与其他人共享。
构建复杂的Chrome扩展程序的过程比您在下面看到的过程要详细得多,但是总体过程是一样的。继续阅读以了解如何制作今天可以开始使用的Chrome扩展程序。
提示:要了解自己的扩展程序有多出色,请查看这些惊人的Chrome扩展程序 。
如何制作Chrome扩展程序
使用本指南,您将制作一个简单的Chrome扩展程序,其中列出了一些您喜欢的网站。它是完全可定制的,而且真的很容易更新。
要执行的操作:
<!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>
随意编辑链接并链接文本,或者如果您想使Chrome扩展程序完全像我们一样,则只需将所有内容保持不变。
<!-In_content_1 all:[300x250] / dfp:[640x360]->
{>
“ 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”
}
}
此代码的可食用区域包括名称,描述和默认标题。
#myUL {
列表-style-type:无;
填充:0;
边距:0;
宽度:300px;
}
#myUL li {{strong>
border:1px solid #ddd;
边距:-1px;
背景色:#f6f6f6;
填充:12px;
文本装饰:无;
字体大小:18px;
颜色:黑色;
显示:块;
字体家族:'noto sans',sans-serif;
}
#myUL li a:hover:not(.header){
背景颜色:#eee;
}
您可以在CSS文件中进行很多更改。制作您的Chrome扩展程序后,按照自己的喜好自定义它们。
提示:创建Chrome扩展程序时使用strong>Google有更多信息 。除了我们在此处显示的简单步骤之外,还有其他示例和高级选项。
如何向Chrome添加自定义扩展
现在,您已经制作了Chrome扩展,是时候将其添加到浏览器中了,以便您可以实际使用刚创建的所有文件了。安装自定义扩展程序涉及的过程与如何安装普通的Chrome扩展程序 不同。
编辑您的Chrome扩展程序
现在您的Chrome扩展程序可以使用了,您可以进行更改以使其成为自己的。
styles.css文件控制扩展名的显示方式,因此您可以调整整体列表样式并更改字体颜色或类型。 W3学校 是学习使用CSS可以做的所有不同事情的最佳资源之一。
用于切换列出网站的顺序或添加或添加更多内容网站或删除现有网站,请编辑popup.html文件。只要确保仅对URL和名称进行编辑即可。其他所有字符,例如