如何创建自己的 Google Chrome 扩展程序?
正文介绍
你有没有发现自己对网络浏览器附带的功能不满意?即使花费数小时在 Google Web Store 上搜索,点击“下载”来增强您的网上冲浪体验并不总是一件简单的事情。
这就是浏览器扩展的用武之地。在本文中,我们将探索从头开始构建您自己的 DIY Google Chrome 扩展的过程。
什么是 Google Chrome 扩展程序?
谷歌浏览器等现代网络浏览器具有一系列功能,使其易于使用并能够满足大多数用户的需求。不过,扩展这些库存功能可以带来很多不同的好处。这就是为什么浏览器开发人员通常可以为他们创建扩展、附加组件和插件的原因。
谷歌浏览器提供了这个功能,让任何有 Web 开发经验的人都可以轻松创建自己的 Chrome 扩展程序。就像许多网站一样,您可以使用 HTML、JavaScript 和 CSS 进行扩展。
与网站不同,扩展程序可以在您浏览时在后台运行,有时甚至与您访问的网站进行交互。
我们的 Google Chrome 扩展程序会做什么?
我们将构建一个简单的 Chrome 扩展程序,允许您访问 Make Use Of 网站并根据网站上的文章类别进行随机搜索。这是一个快速简单的项目,但您仍然会学到很多东西。
你将学到如何
创建 Google Chrome 扩展程序
使用 Chrome 扩展将自定义代码插入网页
创建事件监听器并模拟点击
生成随机数
使用数组和变量
构建自己的 DIY Chrome 扩展程序
Google 让创建您自己的Chrome 扩展程序变得非常容易,因此您很快就会有一些工作。执行以下步骤只需 10 到 15 分钟,但我们鼓励您也尝试使用自己的代码。
第 1 步:创建文件
当您不打算分发它时,您可以将您的扩展存储在您自己的本地机器上。我们只需要创建四个不同的文件来创建我们的扩展;HTML 文件、CSS 文件、JavaScript 文件和 JSON 文件。
我们将文件命名为 index.html、style.css、script.js 和 manifest.json。清单文件必须具有此名称才能正常工作,但您可以为其他人指定您喜欢的任何名称,只要您相应地更改您的代码。
您应该将这些文件放在同一个根文件夹中。
第 2 步:构建清单文件
清单文件随每个 Google Chrome 扩展程序一起提供。它提供了有关 Chrome 扩展的信息,同时还进行了一些基本设置。该文件必须包含名称、版本号、描述和清单版本。我们还包括权限和加载index.html作为扩展出现的弹出窗口的操作。
第 3 步:构建 HTML 和 CSS
在开始编写脚本之前,我们需要使用 HTML 和 CSS 创建一个基本的 UI。您可以使用像 Bootstrap 这样的 CSS 库来避免创建您自己的库,但我们的扩展只需要几个规则。
我们的 index.html 文件包含 html、head 和 body 标签。head 标签包含一个页面标题和一个指向我们样式表的链接,而 body 是一个 h1 标签的主页,它是一个将您带到MakeUseOf的按钮。com,以及我们将用作脚本触发器的另一个按钮。文档末尾的脚本标记包含script.js文件。
我们的 CSS 文件甚至比我们的 HTML 更简单,只改变了五个元素的样式。我们对 html 和 body 标签,以及 h1 标签和我们的两个按钮都有规则。
第 4 步:构建 JavaScript
作为此过程的最后一步,是时候构建我们的 script.js 文件了。
该文件中的第一个函数称为insertScript(),用于将另一个函数 ( autoSearch() ) 插入当前页面。这使我们能够操纵页面并使用MakeUseOf上已经存在的搜索功能。com网站。
紧随其后的是一个事件侦听器,该侦听器一直等到单击“开始随机搜索”按钮,然后再调用我们上面探讨的函数。
autoSearch ()函数稍微复杂一些。它从一个包含 MUO 网站上 20 个类别的数组开始,为我们提供了一个很好的样本来进行随机搜索。在此之后,我们使用Math.random()函数生成一个介于 0 到 19 之间的随机数,以便从我们的数组中选择一个条目。
有了我们的搜索词,我们现在需要模拟一个按钮点击来打开 MUO 搜索栏。我们首先使用 Chrome 开发者控制台找到搜索按钮的 ID,然后使用click()函数将其添加到我们的 JavaScript 代码中。
与搜索按钮一样,我们也需要找到出现的搜索栏的 ID,以便我们插入我们选择的随机搜索词。完成后,提交表单进行搜索就很简单了。
第 5 步:将文件添加到 Chrome://extensions
接下来,是时候将您刚刚创建的文件添加到 Chrome 扩展程序页面了。完成此操作后,该扩展程序将可以在 Chrome 中访问,并且会在您更改文件时自行更新。
打开谷歌浏览器,进入 chrome://extensions 并确保右上角的开发者模式滑块处于打开位置。
单击左上角的Load Unpacked ,然后选择您保存扩展文件的文件夹,然后单击Select Folder。
现在您的扩展程序已加载,您可以单击右上角的拼图图标并将您的扩展程序固定到主任务栏以便于访问。
您现在应该能够在浏览器中访问已完成的扩展。值得记住的是,此扩展仅适用于 MUO 网站或搜索按钮和栏具有相同 ID 的网站。
构建 Google Chrome 扩展程序
本文仅介绍了您可以构建到自己的 Google Chrome 扩展程序中的可能功能的表面。一旦你了解了基础知识,就值得探索你自己的想法。
Chrome 扩展程序可以帮助您提高浏览水平,但请尽量远离一些已知的阴暗 Chrome 扩展程序,以实现安全可靠的浏览。
相关下载
![谷歌浏览器电脑版](/uploadfile/2024/0312/20240312045810556.png)
硬件:Windows系统 版本:122.0.6261.6 大小:66.69MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司
相关下载
![谷歌浏览器安卓版](/uploadfile/2024/0312/20240312045810556.png)
硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-08-30 厂商:Google Inc.
相关下载
![谷歌浏览器苹果版](/uploadfile/2024/0312/20240312045810556.png)
硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC
跳转至官网
相关阅读
![如何用手机谷歌浏览器翻译网页](/uploadfile/2024/0523/20240523023301457.png)
如何用手机谷歌浏览器翻译网页
如何用手机谷歌浏览器翻译网页?下面小编就给大家带来手机谷歌浏览器开启网页翻译功能方法步骤,感兴趣的朋友千万不要错过了。
![谷歌浏览器开机自启动怎么关闭](/uploadfile/2024/0418/20240418024745365.png)
谷歌浏览器开机自启动怎么关闭
谷歌浏览器开机自启动怎么关闭?本篇文章就给大家带来禁止谷歌浏览器开机自动启动操作流程,大家可以通过这个方法来解决开机自动启动的问题哦。
![谷歌浏览器不支持flash插件怎么办](/uploadfile/2024/0304/20240304014150461.png)
谷歌浏览器不支持flash插件怎么办
谷歌浏览器不支持flash插件怎么办?下面就让小编给大家说说解决不支持flash插件问题方法介绍,有需要的朋友赶紧来学习一下吧。
![谷歌浏览器右上角显示错误提示怎么办](/uploadfile/2024/0509/20240509033709888.png)
谷歌浏览器右上角显示错误提示怎么办
谷歌浏览器右上角显示错误提示怎么办?下面小编给大家整理了解决谷歌浏览器右上角错误提示技巧攻略,有需要的朋友不妨来看看了解一下。
![2345安全卫士对浏览器的保护有哪些](/uploadfile/20221013/1665630472357761.jpeg)
2345安全卫士对浏览器的保护有哪些
相信屏幕前的各位对于2345安全卫士这款软件,或多或少有印象,甚至有的人电脑中的安全软件就是它;2345安全卫士可以对电脑系统、软件、浏览器等进行保护,以此来实现多方位电脑保护。
![qq浏览器怎么拦截广告弹窗](/uploadfile/2022/1028/20221028114023595.jpeg)
qq浏览器怎么拦截广告弹窗
最近,有时候我在使用电脑时会经常碰到QQ浏览器出现广告弹窗的现象,像小编碰到的就是QQ浏览器弹窗出广告,那么遇到这种QQ浏览器弹窗的广告该如何解决呢,下面就和chrome部落小编一起来看看,qq浏览器怎么拦截广告弹窗吧。
![如何让谷歌浏览器侧边栏显示在左边](/uploadfile/2024/0612/20240612044152743.png)
如何让谷歌浏览器侧边栏显示在左边
如何让谷歌浏览器侧边栏显示在左边?接下来就让小编给大家带来谷歌浏览器设置显示侧边栏方法技巧,感兴趣的朋友就来看看了解一下吧。
![谷歌浏览器个人资料发生错误怎么办](/uploadfile/2024/0607/20240607040930943.png)
谷歌浏览器个人资料发生错误怎么办
谷歌浏览器个人资料发生错误怎么办?接下来就让小编给大家带来谷歌浏览器个人资料错误问题方法技巧,感兴趣的朋友快来看看吧。
![如何在线升级谷歌浏览器](/uploadfile/2022/0617/20220617015346656.jpg)
如何在线升级谷歌浏览器
如何在线升级谷歌浏览器?小编相信大家或多或少的都听过有人说哪个浏览器最好用——谷歌浏览器,在这个浏览器错综复杂的年代,Google Chrome是我们在生活中经常用到的一个软件。
![如何在 Ubuntu 22.04 Jammy Jellyfish 上安装 Google Chrome?](/uploadfile/2022/0527/20220527044548950.png)
如何在 Ubuntu 22.04 Jammy Jellyfish 上安装 Google Chrome?
Google Chrome 是最流行的网络浏览器之一,可在许多不同的设备上使用。它也可以在Ubuntu 22 04上运行,尽管 Mozilla Firefox 是默认的网络浏览器并且预装了发行版。
![如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?](/uploadfile/20220623/1655948905795001.jpg)
如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?
Windows S10正式版自带edge浏览器,但很多用户更喜欢使用功能更强大的第三方浏览器,比如谷歌Chrome。
![如何更新谷歌浏览器](/uploadfile/2022/0513/20220513092317770.png)
如何更新谷歌浏览器
如何更新谷歌浏览器?如果您想确保您使用的是最新版本的 Google Chrome 浏览器,以下是在桌面、Apple iOS 和 Android 设备上检查和更新的方法。
![如何在 Windows 11 或 10 中禁用 Chrome 媒体弹出窗口?](/uploadfile/2022/0525/20220525105325789.png)
如何在 Windows 11 或 10 中禁用 Chrome 媒体弹出窗口?
Chrome作为一款广受用户欢迎的网络浏览器,并非没有问题。最近,发现在这个浏览器上播放音乐或视频时,标签显示一个chrome exe框。当使用音量增大 减小或静音键时,在屏幕显示(简称OSD)音量的右边可以看到这个半透明的方框。此外,它还提供了大多数用户想要摆脱的反向、正向和播放 暂停媒体控件。
![如何在谷歌浏览器中使用网络服务和预测服务?](/uploadfile/2022/0426/20220426093247834.jpg)
如何在谷歌浏览器中使用网络服务和预测服务?
谷歌Chrome使用各种网络服务、预加载设置和预测服务来改善浏览体验。从当你试图浏览的网站不可达时建议一个替代网站,到提前预测网络行为以加快页面加载时间。虽然这些功能提供了受欢迎的便利程度,但它们也可能给一些用户带来隐私问题。无论您对此功能持什么立场,理解它是如何工作的都是有帮助的。
![如何在 Google Chrome 中启用和禁用 GPU 加速?](/uploadfile/2022/0507/20220507093227727.jpg)
如何在 Google Chrome 中启用和禁用 GPU 加速?
Google chrome 配备了许多优质功能,有助于维持您的 PC 健康并更有效地执行任务。由于 Chrome 使用了大量的 CPU,它具有硬件加速功能,可以将进程转移到 GPU 等其他硬件组件来加速工作。硬件加速在最初的日子里并不常见,因为处理器负责处理所有此类工作。由于Web 应用程序的最新趋势和更新,需求图可能已经上升。
![如何禁止谷歌浏览器自动升级](/uploadfile/2024/0321/20240321022952643.png)
如何禁止谷歌浏览器自动升级
如何禁止谷歌浏览器自动升级?下面小编就给大家带来禁止谷歌浏览器自动升级操作流程,希望能够给大家带来帮助。
![如何允许来自特定网站的 Chrome 中的广告?](/uploadfile/2022/0510/20220510093732971.jpg)
如何允许来自特定网站的 Chrome 中的广告?
谷歌浏览器已经走过了漫长的道路。该浏览器现在有一个易于使用的内置广告拦截器。这允许您阻止来自所有网站或来自选定网站的广告。
![你现在应该改变的9个隐藏的Chrome设置](/uploadfile/2022/0424/20220424101414918.png)
你现在应该改变的9个隐藏的Chrome设置
有很多方法可以让Chrome发挥更大作用。我们还将包括如何打开Chrome的实验设置,即所谓的标志,以及如果你想重新开始,如何将Chrome重置为默认设置。