只要5个步骤，教你开发一个自己的chrome扩展程序

扩展程序是为了提升Chrome浏览器用户浏览体验而定制的小程序。它们使用户能够根据个人需求和偏好定制Chrome的功能和行为。

今天我们来介绍如何开发一个属于自己的chrome扩展程序。

首先在电脑上创建一个名字叫dodo_duck的文件夹，接下来，我们将这个文件夹中开发属于自己的chrome扩展程序。

（文末附有整个项目的下载方式）

1. 创建Manifest文件

扩展程序都是从Manifest文件开始的，在dodo_duck文件夹下创建一个名称为manifest.json的文件。然后在这个json文件中填上项目名称（name）、项目说明（description）、项目版本号（version）、项目权限（permissions）等内容。如下图：

接下来，打开chrome浏览器，之行以下步骤：

在浏览器中输入chrome://extensions
打开右上角的“开发者模式“”按钮
点击“加载已解压的扩展程序”
选择之前创建的dodo_duck文件夹

此时浏览器的扩展程序页面将会出现一个名叫Dodo the Duck的程序。

2. 添加说明

虽然此时我们已经安装了扩展程序，但它没有任何说明。一些背景设置的脚本和许多其他重要组件必须在之前创建manifest.json中进行注册。首先我们在dodo_duck文件夹下创建一个名称为background.js的文件。这个文件主要功能是对扩展程序背景进行一些设置。

3. 编写用户界面程序

扩展程序的用户界面程序有很多形式，我们在这个项目中使用弹窗形式。在之前创建的dodo_duck文件夹下创建一个popup.html文件。这个文件的主要功能：

定制扩展程序的UI界面
两个控制按钮
一个是否播放声音的复选框
开发人员常用网站（StackOverflow、 github等）的链接地址

最终的UI界面如下图所示：

和之前设置背景的脚本一样，该文件需要在manifest.json中定义browser_action指定扩展程序的行为。如图所示：

在default_icon中为我们的扩展程序添加图标。

接下来在pop.html文件中添加pop.js脚本。

4. 一些交互逻辑

目前，我们已经完成了扩展程序的界面部分程序。接下来，我们需要进一步完成一些用户交互的逻辑。我们将继续完善pop.js文件中的内容。主要包括：

扩展程序建议的调试建议（DuckText）
报警设置的函数
其他设置函数

完成这部分后，扩展程序功能基本上完全可用。重新加载扩展，刷新chrome扩展程序页面。

然后点击固定扩展程序。

点击固定扩展程序后，此时浏览器扩展程序栏就会出现一个黄色鸭子图标。点击该图标将会弹出步骤3中我们编写的扩展程序的用户交互界面。

但是，除了我们添加到扩展中的四个网站之外，一些用户可能希望添加到他们经常使用的网站的链接。为此，我们将在扩展中添加扩展程序选项。

5. 用户自定义选项

包含一个选项页面可以让用户更好地控制扩展的功能，进一步定制他们的浏览体验。首先在dodo_duck文件夹下创建一个名称为options.html的文件，并在这个文件中添加允许用户自定义链接的代码。然后在manifest.json中中注册该选项页。

重新加载扩展并，单击“详细信息”。

向下滚动详细信息页面并选择“扩展选项”以查看选项页面，将会弹出允许用户自定义添加网站的页面。

最后一步就是完成用户自定义网站链接的逻辑代码。

创建一个名为options.js文件，我们在这个文件中添加用户自定义网站的代码内容。

最后点击扩展程序选项弹出的界面如图所示：

以上就是开发一个简易chrome扩展程序的所有步骤。

完成代码后，就可以在Chrome网上商店上发布扩展了。你可以创建开发人员帐户并按照开发人员页面上的说明进行操作。

整个项目下载方式：

关注微信公众号【IT路上人】，回复“duck”即可。

只要5个步骤，教你开发一个自己的chrome扩展程序相关推荐

手把手教你做一个自己的chrome扩展程序
手把手教你做一个自己的chrome扩展程序 [目录] first.效果 1.收藏夹修改 (1).鼠标移动到收藏夹上的动作效果 (2).收藏夹框 (3)百度搜索框功能 2.右上文字修改 3.背景图片修改 ...
使用 Serverless 为后端服务开发一个有趣的 Chrome 扩展程序
何遇「何遇」是一款Chrome扩展程序,其主要的功能是当你在 Chrome 浏览器中打开一个新的Tab页面时,空白页会展示出一些有趣的插图.句子.电影截图等,给苦涩的搬砖生活增添一丝乐趣,效果如下: ...
推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈
对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...
开发了一款chrome扩展程序
mafengwo-mp3-downloader 一款识别并下载马蜂窝游记页面背景mp3音乐的chrome扩展程序主要功能当打开游记页面比如如果检测到有背景音乐, 会弹出包含歌曲信息的chrom ...
物联网全栈教程--手把手教你开发一个智能浇花器
下面来说一下课程的安排,本教程可以分为三大章节,30个小章节,在1-10章节,手把手讲解了如何实现一个定时/实时控制的浇花器,可以对浇花器电量进行显示,可以进行定时设置,以及实时控制,低功耗模式等等, ...
c语言跳一跳辅助源码,.NET 开发一个微信跳一跳辅助程序（附源码）
原标题:.NET 开发一个微信跳一跳辅助程序(附源码) 来源:中国.NET研究协会 cnblogs.com/dotnet-org-cn/p/8149693.html 前言微信更新了,出现了一个小游戏 ...
小程序云开发从前端到后台实战记录，开发一个完整功能的小程序
小程序云开发从前端到后台,开发一个完整功能的小程序一.编程基本知识要求有vue 或wpf经验者很好理解有mongodb经验者很好理解云后台二.理解微信体系微信有三个平台 1.开放平台 2.公 ...
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
Google Chrome 扩展程序开发
根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...
Chrome扩展程序（插件），用你开发的脚本在浏览器上随心所欲
Chrome扩展程序(插件),用你开发的脚本在浏览器上随心所欲 Chrome插件的文件结构 Hello_World编写利用JavaScript实现Hello Everything 灵活运用浏览器的存 ...

只要5个步骤，教你开发一个自己的chrome扩展程序

只要5个步骤，教你开发一个自己的chrome扩展程序相关推荐

最新文章

热门文章