如何制作Chrome扩展?实现分步指南

2021年11月28日21:36:39 发表评论 379 次浏览
如何制作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扩展教程:目录结构

最终的目录结构如下:

  • backgroundScript.js
  • contentScript.js
  • icon.png
  • manifest.json

有关 Chrome 扩展程序及其在后台工作方式的更多信息,请访问官方文档。这是关于如何制作谷歌浏览器扩展?

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: