如何制作Chrome扩展（实现分步指南） _制作Chrome扩展教程

文章图片
Google Chrome 是当今最常用的网络浏览器，Chrome 扩展程序是扩展其功能和添加新功能的好方法。谷歌已经创建了全面的文档，足以提供基本信息并让球滚动，但随着扩展的复杂性增加，我们不得不依赖第三方论坛（如 Stackoverflow）寻求帮助。
在本制作Chrome扩展教程中，我们将完成创建中级 chrome 扩展程序的过程，该扩展程序将降低 youtube 网站上视频播放器控件的不透明度，以增加内容的可见性。
如何制作Chrome扩展这在你暂停视频时很有用，但视频播放器控件将视频内容隐藏在它们后面，例如编程教程的某些代码。
创建 manifest.json 文件
Chrome扩展制作示例：该manifest.json的文件包含扩展像它的名称，版本，操作和权限的重要信息。每个扩展都必须有一个 manifest.json 文件。因此，让我们在空目录中创建一个 manifest.json 文件，其中包含必填字段：

{ "manifest_version": 2, "name": "My First Extension", "version": "0.1" }

这将创建一个基本的 Chrome 扩展程序，除了将扩展程序加载到 Chrome 之外，什么都不做。请记住，'manifest_version' 必须始终为 2，因为从 2014 年 1 月开始不再支持版本 1。此外，清单文件必须包含上述三个字段。
将扩展加载到 Chrome
如何制作Chrome扩展？要在 Chrome 中加载扩展程序，请打开 chrome 扩展程序页面。为此，你可以单击右上角的三个点，然后转到“更多工具”和“扩展程序”，或者转到地址栏并输入：“chrome://extensions/”。之后，打开右上角的“开发者模式”，然后点击左上角的“加载解压”。现在浏览到包含清单文件的目录，然后选择该文件夹。扩展名现在将显示在下面的列表中。对代码进行任何更改后，你可以通过单击位于扩展程序右侧的小刷新图标来刷新扩展程序。
内容脚本
根据官方文档，内容脚本是在网页上下文中运行的文件。他们可以阅读或修改网页，并通过使用标准的文档对象模型 (DOM) 将信息传递给他们的父扩展。内容脚本可以与其父扩展交换“消息”，因此能够访问其父扩展使用的 chrome API。一些常用的 chrome API 包括 onConnect、onMessage 和 sendMessage。
内容脚本与外部环境完全隔离，这使他们能够在不影响网页或其他内容脚本的情况下更改自己的 javascript 环境。
综上所述，内容脚本具有访问和修改浏览器访问的网页的能力。这将它们与项目中的其他 javascript 文件区分开来。必须在清单文件中声明内容脚本及其详细信息，例如允许访问哪个 URL。
制作Chrome扩展教程：注入内容脚本
可以通过两种方式以编程方式或声明方式将内容脚本注入到网页中。在这个例子中，我们使用程序化注入，因为我们只需要在特定情况下运行脚本。在我们注入脚本之前，我们必须首先在清单中提供活动选项卡权限，这使脚本能够在当前活动选项卡上运行。如果要在新选项卡上自动执行内容脚本，则必须在清单中声明内容脚本。
所以我们像这样更新 manifest.json 文件：

"permissions": [ "activeTab"], "content_scripts": [ { "matches": [ "https://www.youtube.com/*"], "js": [ "contentScript.js"] } ]

Chrome扩展制作示例 - 现在我们可以将内容脚本注入网页。我们可以注入代码的一部分，也可以注入整个文件。在这个例子中，我们将注入整个 javascript 文件 contentScript.js。注入此文件后，它将修改 youtube 播放器窗口以降低播放器控件的不透明度。该文件包含以下代码：

//contentScript.js var s = document.getElementById('stylehidecontrols'); if (s) { s.remove(); } else { s = document.createElement('style'); s.id = 'stylehidecontrols'; var r = '#movie_player .ytp-gradient-top, #movie_player .ytp-gradient-bottom, #movie_player .ytp-chrome-top, #movie_player .ytp-progress-bar-container, #movie_player .ytp-chrome-controls'; s.appendChild(document.createTextNode(r)); document.body.appendChild(s); }

首先，我们尝试找到一个 id 为“stylehidecontrols”的元素。如果找到，我们将其删除，使不透明度恢复正常。如果没有找到，那么我们必须降低视频播放器控件的不透明度。为此，我们首先创建一个“style”元素来包含 CSS 样式信息，并为其分配 id“stylehidecontrols”，这是我们之前试图找到的。现在，我们使用 YouTube 网站中与视频播放器关联的各种已知元素的 CSS 样式信息创建文本，并将其分配给变量“r”。请注意，我们已将所有这些元素的不透明度设置为 0.2，这样它们就不会阻碍视图，但仍然可见并可对其进行操作。
现在我们使用变量“r”创建一个节点，然后将其附加到样式元素“s”。最后，我们将“s”附加到文档正文。这会导致新样式立即生效并降低视频控件的不透明度。如果再次单击扩展图标，它只会从 DOM 中删除样式元素，从而将不透明度恢复到原始状态。
后台脚本
如何制作Chrome扩展？要以编程方式注入内容脚本，我们需要一个始终在后台运行并侦听单击事件的 javascript 文件。内容脚本有一些限制，因为它们不能监听点击事件，所以我们需要一个后台脚本来完成这个任务，它可以访问 chrome API，但不能访问网页。该后台脚本侦听特定事件，然后可以将 javascript 代码注入页面，从而可以访问和修改网页。我们必须像这样在清单中声明后台脚本文件：

"background": { "scripts": [ "backgroundScript.js"] }

后台脚本负责监听点击事件，然后将“contentScript.js”文件注入页面。后台脚本的内容是：

//backgroundScript.js chrome.browserAction.onClicked.addListener( function(tab) { chrome.tabs.executeScript(tab.id, { "file": "contentScript.js" }); });

在这个例子中，我们直接将文件注入到页面中。我们也可以使用消息传递来实现这个任务，其中后台脚本会在点击事件时向内容脚本发送一条消息，然后内容脚本将侦听该特定消息。如果收到消息，它将执行代码。
内容脚本也可以“声明式”注入。为此，我们可以在 manifest.json 文件中添加如下内容：

"content_scripts": [ { "matches": [ "http://*.mywebsite.com/*"], "css": [ "styles.css"], "js": [ "contentScript.js"] } ]css字段是可选的，可以用来为匹配的页面注入css文件。它们按照在数组中声明的顺序被注入。

操作
制作Chrome扩展教程：Chrome 扩展程序可以有两种类型的操作，页面操作和浏览器操作。与浏览器操作不同，页面操作只能作用于当前页面。我们可以使用操作为扩展程序添加图标和弹出窗口。要在 Google Chrome 主工具栏中放置一个图标，请将其添加到 manifest.json 文件中：

"browser_action": { "default_icon": { "32": "icon.png" } }

Chrome扩展制作示例：你可以在 Photoshop、Illustrator 或 Gimp 等图像编辑器中创建任意大小的图标。你也可以从互联网上下载所需大小的图标。获得图标后，将其以当前名称放置在根文件夹中。
这会在 chrome 的主工具栏中添加一个 32 x 32 大小的图标。我们还可以包含其他大小的图标，但如果未提供，chrome 将自动调整图标大小以适应相应的大小。
如何制作Chrome扩展：完整的 manifest.json 文件
在 manifest.json 文件中添加上述所有字段后，它将如下所示：

//manifest.json { "manifest_version": 2, "name": "Youtube Player Controls", "version": "0.1", "description": "This extension reduces the opacity of Youtube video player controls for better visibility of the content.", "background": { "scripts": [ "backgroundScript.js"] }, "permissions": [ "activeTab"], "content_scripts": [ { //"matches": [ ""], "matches": [ "https://www.youtube.com/*"], "js": [ "contentScript.js"] } ], "browser_action": { "default_icon": { "32": "icon.png" } } }

制作Chrome扩展教程：目录结构
最终的目录结构如下：