浏览器扩展程序是什么

扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。您可以利用各种 Web 技术，例如 HTML、JavaScript 和 CSS，来编写自己的扩展程序。
扩展程序将它所需的文件集成在一个文件中，提供给用户下载和安装。这一集成意味着扩展程序不像普通的网上应用那样，它们不需要依赖网上的内容。
下面，我们一步步探索，实现一个简单的插件，实现查看图片的功能。

一个扩展程序需要什么

请在您的计算机上创建一个全新的目录，打开您最喜欢的文本编辑器，让我们开始吧！

要声明的内容
我们需要创建的第一个文件是一个清单文件，名为 manifest.json。清单文件只不过是一个 JSON 格式的目录，包含一些属性，如您的扩展程序的名称与描述、它的版本号等等。从更高的层次来看，我们将使用它来向 Chrome 浏览器声明扩展程序将会做什么，以及为了完成这些任务所需要的权限。

{// 声明我们使用清单文件格式的版本 2，必须包含（版本 1 是旧的，已弃用，不建议使用）"manifest_version": 2,// 插件的名称"name": "券Club",// 插件的版本"version": "1.0.0",// 插件描述"description": "券Club是一个借助本地化服务整合工作生活中优惠信息的服务平台，为用户提供更便捷更多更好更全的优惠信息。","author": "ylcy",// 图标，一般偷懒全部用一个尺寸的也没问题"icons":{"16": "img/icon.png","48": "img/icon.png","128": "img/icon.png"},// 浏览器右上角图标设置，browser_action、page_action、app必须三选一"browser_action": {"default_icon": "img/icon.png",// 图标悬停时的标题，可选"default_title": "按时吃饭，照顾好自己","default_popup": "popup.html"},// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的// "web_accessible_resources": ["js/inject.js"],// 插件主页，这个很重要，不要浪费了这个免费广告位"homepage_url": "https://www.networkmms.xyz"
}

接下来，将这一数据保存在名为 manifest.json 的文件中，放在您创建的目录中。

资源
您可能已经注意到，manifest.json 定义浏览器按钮时指向了两个资源文件：img/icon.png 与 popup.html。这两个资源都必须在扩展程序包中存在，所以让我们现在创建它们：

将会显示在多功能框旁边，等待用户交互。从我们的示例库中下载 icon.png 的一份拷贝，并将它保存在您正在工作的目录中。如果您愿意的话也可以自己创建，这只是一个 19×19 像素的 PNG 文件。

将会在响应用户对浏览器按钮的单击时创建的弹出窗口中渲染。这是一个标准的 HTML 文件，就像您在网页开发中熟悉的那样，给了您或多或少的自由，决定弹出窗口显示的内容。可复制以下代码，并粘贴至popup.html文件中。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>券Club</title>
</head>
<body style="width:300px;min-height:100px;"><img src="img/gzh.jpg" />
</body>
</html>

现在在您工作的目录中应该有四个文件： img/icon.png、img/gzh.jpg、manifest.json、popup.html。下一步是将这些文件加载到 Chrome 浏览器中。

加载扩展程序
您从 Chrome 网上应用店下载的扩展程序打包为 .crx 文件，便于发布，但是不便于开发。注意到了这一点，Chrome 浏览器为您提供了一种方式，可以加载您的工作目录用于测试。现在让我们来试试。

在您的浏览器中访问 chrome://extensions（或者单击多功能框最右边的按钮：打开 Chrome 浏览器菜单，并选择工具(L)菜单下的扩展程序(E)，进入相同的页面）。

确保右上角开发者模式复选框已选中。

单击加载正在开发的扩展程序…，弹出文件选择对话框。

浏览至您的扩展程序文件所在的目录，并选定。

如果扩展程序有效的话，它将被加载并且立刻处于活动状态！如果无效的话，页面顶部将显示错误消息，请纠正错误再重试。

一个简单的扩展程序

本Demo扩展程序源码下载：crx-demo.zip

如何制作一款Chrome浏览器扩展程序相关推荐

Chrome浏览器扩展程序的本地备份
由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序.一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在自己本地电脑上报这些本地文件直接拖到Ch ...
编写一个 Chrome 浏览器扩展程序
浏览器扩展允许我们编写程序来实现对浏览器元素(书签.导航等)以及对网页元素的交互, 甚至从 web 服务器获取数据,以 Chrome 浏览器扩展为例,扩展文件包括: 一个manifest文件(主文件, ...
32款网页设计和网页开发人员常用的Google chrome浏览器扩展程序
对于网页设计人员或网站开发者来说,更喜欢使用像FF的此类浏览器,原因是其具有强大的辅助插件,可以帮助网页制作与开发提高效率,那么同样对于Google Cchrome浏览器来说也是具有大量的此类插件,本 ...
打包chrome浏览器扩展程序
进入chrome浏览器的插件安装目录,默认为 C:\Users\19144\AppData\Local\Google\Chrome\User Data\Default\Extensions ,在目录下 ...
快速找到Chrome浏览器扩展程序存放路径
1.在谷歌浏览器地址栏里输入 chrome://version 2.根据"个人资料路径",再进入到Extensions目录 3.把从其他电脑复制过来的扩展程序文件夹,复制到Exte ...
谷歌2022年最受欢迎Chrome浏览器扩展程序：包含Tango，Compose AI等
根据截图排序从左到右依次介绍如下: RoPro:Roblox.com网站体验增加了许多有用且独特的功能: MyBib:自动创建 APA 样式.MLA 格式和哈佛引用样式引文: eJOY English ...
Chrome浏览器扩展开发系列之五：Page Action类型的Chrome浏览器扩展
Page Action类型的Google Chrome浏览器扩展程序,通常也会有一个图标,但这个图标位于Chrome浏览器的地址栏内右端.而且这个图标并非始终出现,而是当某指定的页面打开时才会出现.也 ...
Chrome 浏览器扩展 - Dark Web - Dark Theme for Chrome
Jerry 之前的文章 Chrome 浏览器扩展 - Night Eye ,介绍的 Night Eye 这款 Chrome 浏览器扩展,只有三个月的试用期.因此我又在网上找到了另一款完全免费的 Chr ...
Chrome 打包扩展程序
Chrome 打包扩展程序 1.参考资料打包chrome浏览器扩展程序图文教程 2.打包扩展程序在 Chrome 的[扩展程序]页面,点击[打包扩展程序]会跳出来一个对话框,我们需要选择[扩展程序 ...
chrome的扩展程序,安装后,一旦关闭浏览器,扩展就会丢失
chrome的扩展程序,安装后,一旦关闭浏览器,扩展就会丢失不需要重装 chrome,删除 chrome 配置文件夹即可,例如WIN8/WIN7系统参考:c:\Users\Administrator ...

如何制作一款Chrome浏览器扩展程序

如何制作一款Chrome浏览器扩展程序

浏览器扩展程序是什么

一个扩展程序需要什么

一个简单的扩展程序

如何制作一款Chrome浏览器扩展程序相关推荐

最新文章

热门文章