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

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

在扩展程序可以完全运行之前，浏览器需要一些基本组件。我们将在下面讨论所有这些，包括如何让您的自定义扩展程序在Chrome中工作，而无需上传或与其他人共享。

构建一个复杂的Chrome扩展程序的过程比您将在下面看到的要详细得多，但一般过程是相同的。继续阅读以了解如何制作一个您可以立即开始使用的Chrome扩展程序。(Chrome)

提示(Tip)：要查看您自己的扩展程序有多棒，请查看这些令人惊叹的 Chrome 扩展程序(these amazing Chrome extensions)。

如何制作 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>

随意(Feel)编辑链接和链接文本，或者如果您想让Chrome扩展程序与我们完全一样，只需保持一切不变。

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

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Favorite Sites”,
“description”: “所有我最喜欢的网站。”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”：“icon.png”，
“48”：“icon.png”，
“128”：“icon.png”
}，

   “背景”：{  (   “background”: { )
        “页面”：“背景.html” (        “page”:”background.html”)
}，

    “browser_action”：{
        “default_icon”：“icon.png”，
        “default_title”：“收藏站点”，(        “default_title” : “Favorite Sites”,)
        “default_popup”：“popup.html”
    }
}

此代码的可食用区域包括名称(name)、描述(description)和default_title。

  • 打开styles.css并粘贴以下代码。这就是装饰弹出菜单的原因，使其更具吸引力，甚至更易于使用。

#myUL {
列表样式类型：无；(list-style-type: none;)
   填充：0；(   padding: 0;)
   边距：0；(   margin: 0;)
   宽度：300px；(   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  边距顶部：-1px；(  margin-top: -1px;)
  background-color: #f6f6f6;
  填充：12px；(  padding: 12px;)
  文字装饰：无；(  text-decoration: none;)
  字体大小：18px；(  font-size: 18px;)
  颜色：黑色; (  color: black;)
  显示：块；(  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

您可以在CSS(CSS)文件中更改很多内容。在制作您的Chrome扩展程序以根据您的喜好对其进行自定义后，请使用这些选项。

  • 为扩展创建(Create)一个图标并将其命名为icon.png。将它放在您的Chrome扩展文件夹中。正如您在上面的代码中看到的，您可以为这些尺寸制作一个单独的图标：16×16 像素、32×32 等。

提示：(Tip: )谷歌有更多(Google has more information)关于创建Chrome扩展的信息。除了我们在此处显示的简单步骤之外，还有其他示例和高级选项。

如何向 Chrome添加自定义扩展(Custom Extension)

现在您已经制作了Chrome扩展程序，是时候将其添加到浏览器中了，这样您就可以实际使用刚刚制作的所有文件了。安装自定义扩展程序涉及的过程与您安装普通 Chrome 扩展(how you’d install a normal Chrome extension)程序的方式不同。

  • 从 Chrome 菜单中，转到更多工具(More tools )>扩展程序(Extensions)。或者，在地址栏中键入chrome://extensions/
  • 如果尚未选择开发人员模式(Developer mode)旁边的按钮，请选择它。这将打开一种特殊模式，让您可以导入自己的Chrome扩展程序。

  • 使用该页面顶部的Load unpacked按钮选择您在上述(Load unpacked )步骤 1(Step 1)中创建的文件夹。

  • (Accept)如果您看到任何提示，请接受它们。否则，您定制的Chrome扩展程序将与您在浏览器右上角的任何其他扩展程序一起显示。

编辑您的 Chrome 扩展程序

现在您的Chrome扩展程序可用，您可以进行更改以使其成为您自己的。 

styles.css 文件控制扩展的显示方式，因此您可以调整整体列表样式并更改字体颜色或类型。W3Schools是了解您可以使用CSS做的所有不同事情的最佳资源之一。

要切换网站列出的顺序，或添加或更多网站或删除现有网站，请编辑 popup.html 文件。请务必仅保留对URL和名称的编辑。所有其他字符，如<li>和<html>，都是必需的，不应更改。W3Schools(HTML Tutorial on W3Schools)上的 HTML 教程是了解该语言更多信息的好地方。



宇 杜

About the author

在商业中，一切都是为了为您的客户和客户创造价值。我专注于提供分步说明，帮助我的读者使用 Microsoft Office 充分利用他们的硬件和软件。我的技能包括键盘和驱动程序安装，以及 Microsoft Office 支持。凭借我多年的行业经验，我可以帮助您满足您可能拥有的任何硬件或软件需求。


Related posts