----转载----【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

时间  2019-11-29
标签 转载 前端工具 chrome 扩展 程序 开发 发布 手把手 栏目 Chrome 繁體版
原文   原文链接

关于 chrome 扩展的文章，好久以前也写过一篇。清除页面广告？身为前端，本身作一款简易的chrome扩展吧。javascript

本篇文章重在分享一些制做扩展的过程当中比较重要的知识及难点。html

 

什么是 chrome 扩展程序

扩展程序是一些可以修改或加强 Chrome 浏览器功能的小程序。对于前端工程师而言，其最大的便利就是咱们能够应用咱们熟悉的 HTML、CSS 、 Javascript 等技术来制做扩展程序。前端

以下图所示，这些图标就是各类开发者提供的 chrome 扩展程序：java

image

 

区分扩展与插件

不少人会误称扩展程序为插件，这里有必要区分一下。git

"扩展" 和 "插件"，其实都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫 "扩展"，另外一个叫 "插件"。github

  • 扩展（Extension）

指的是经过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工做在浏览器层面，使用 HTML + Javascript 语言开发。好比著名的 Adblock plus。web

  • 插件（Plug-in）

指的是经过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，工做在内核层面，理论上能够用任何一种生成本地二进制程序的语言开发，好比 C/C++、Delphi 等。好比 Flash player 插件，就属于这种类型。通常在网页中用 <object> 或者 <embed>标签声明的部分，就要靠插件来渲染。chrome

 

开发本身的扩展程序

OK，简单了解完什么是扩展程序后，下面咱们来看看如何开发一款扩展程序。json

固然，首先咱们要搞清楚为何咱们须要扩展程序，它有什么做用呢？小程序

就我而言，最近我开发了一款简单的扩展程序 —— URLHelper 。你能够在 chrome 应用商店下载到它：

image

开发它的缘由是由于，在咱们的业务开发中，开发过程常常须要面对超长的 URL，带有 N 多个参数，它可能长这样：

1
http://tv.video.qq.com/xxx/xxx/xxx/index?rootdomain=test.tv.video.qq.com&guid=066de07bdd33422f95b7ddaf993b2004&tvid=0930DCE900E081E142ED006B56025BA7&appver=3.1.0&bid=31001&appid=101161688&vipbid=38&fromvipbid=38&cid=qk97pyegxz8kdug&vid=&pid=&mid=&from=501&qua_info=PT%3DSNMAPP%26CHID%3D10009%26VN%3D3.1.0%26PR%3DVIDEO%26TVKPlatform%3D670603%26SMARKET%3D&type=0&listid=&matchid=&channelid=&source1=747&source2=709&penid=D21D81E4489E43422F842235B52DD&access=82E8E64DDD4A531B6FFA3E0967F76&kt_login=qq&vuserid=&vusession=&oauth_consumer_key=101161688&kt_userid=924400965&kt_license_account=SNM_0059858531&main_login=qq&kt_login_support=qq%2Cwx%2Cph&kt_boss_channel=tx_snm&ott_flag=2&sop=9&actid=&tvactid=&tv_params=policy_id%3D88&disable_update=&dp=&du=&viewid=&dv=&pageid=&ptag=&redirect_url=http%3A%2F%2Ftest.tv.video.qq.com%2Fktweb%2Fpay%2Fphone%2Fscan%3Frootdomain%3Dtest.tv.video.qq.com%26guid%3D066de07bdd33422f95b7ddaf993b2004%26tvid%3D0930DCE900E081E142ED006B56025BA7%26appver%3D3.1.0%26bid%3D31001%26appid%3D101161688%26vipbid%3D38%26fromvipbid%3D38%26cid%3Dqk97pyegxz8kdug%26vid%3D%26pid%3D%26mid%3D%26from%3D501%26qua_info%3DPT%253DSNMAPP%2526CHID%253D10009%2526VN%253D3.1.0%2526PR%253DVIDEO%2526TVKPlatform%253D670603%2526SMARKET%253D%26type%3D0%26listid%3D%26matchid%3D%26channelid%3D%26source1%3D747%26source2%3D709%26openid%3DD21D81E44801E9E43422F842235B52DD%26access_token%3D82E8E64DDD4EDA531B6FFA3E09676F76%26kt_login%3Dqq%26vuserid%3D%26vusession%3D%26oauth_consumer_key%3D101161688%26kt_userid%3D924400965%26kt_license_account%3DSNM_0059858531%26main_login%3Dqq%26kt_login_support%3Dqq%252Cwx%252Cph%26kt_boss_channel%3Dtx_snm%26ott_flag%3D2%26sop%3D9%26actid%3D%26tvactid%3D%26tv_params%3Dpolicy_id%253D88%26disable_update%3D%26dp%3D%26du%3D%26viewid%3D%26dv%3D%26pageid%3D%26ptag%3D%26opres%3D0&%24from=201

不是开玩笑，真实状况可能比这个还长。jccd

由于调试的须要，常常要找到某一个特定的参数，获取或者修改它的值。

读者能够尝试一下，贴到浏览器中，找到 cid 参数，修改成另一个值。若是没有工具，这个过程是很痛苦的。一次还好，若是一天重复这个动做几十次，就有必要考虑借助工具了。

基于这个出发点，我制做了 URLHelper 这个扩展，它的界面大概长这个样子，能够很是方便的对 URL 参数进行删查改排序，修改参数刷新页面：

image

因此，扩展程序我以为每一个前端均可以开发，用于解决咱们工做生活中在使用浏览器遇到的各类问题，譬若有名的 ：

  • WEB 前端助手 提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面性能检测等等
  • 二维码生成器 将 URL 转化成对应的二维码

 

扩展程序架构

OK，接下来聊聊一些扩展程序开发相关的东西。

关于扩展程序的相关文档，能够看看这些文章：

首先，我以为最重要的，是要了解整个扩展程序的基本架构，有几个很是重要的文件：

 

Content scripts -- 内容脚本

Content scripts 脚本是指可以在浏览器已经加载的页面内部运行的 javascript 脚本。能够将 content script 看做是网页的一部分，而不是它所在的扩展程序的一部分。

它能够实现的一些功能的例子及适用场景，大体以下：

  • 在网页中找出未连接的 URL，并将它们转换为超连接
  • 查找特定的信息或者 DOM 结构，增长字体大小，使文本更具备可读性
  • 发现并处理 DOM 中的微格式数据

咱们能够这样理解它，在页面加载完毕以后，咱们的扩展程序会向这个页面注入一个或者额多个脚本，这个脚本能够得到浏览器所访问的 web 页面的详细信息。也就是咱们能够利用这个脚本收集页面上各类咱们须要的信息。

以我上面的 URLHelper 为例子，在这个扩展中，content script 的做用就是拿到页面的 URL ，而后传递给扩展程序的 background 页面或者 popup 页面。

固然，若是你只须要一个脚本程序每次注入页面后获取页面相关的信息，而后上报到本身的服务器之类的功能，这个扩展程序只须要这一个 Content scripts 就够了。它不须要与其余界面或者脚本进行交互和信息传递，扩展帮你作的就是自动注入这个脚本而须要你每次手动注入。

 

popup -- 弹窗页面

popup 页面也很是好理解，在 manifest.json 的定义里它是 browser_action， 就是咱们扩展程序的界面（弹窗页），就是上面的那张截图：

image

这个界面其实就是一个 Web 页面，点开任意一个扩展页面，右键均可以看到弹出检查选项，点击这个选项，就会弹出一个开发者工具，咱们就能够愉快的开始对这个页面进行查看 DOM 结构、查看网络状态、 Debug 等任意操做了：

image

而后：

image

重点，这个 popup 页面彻底由咱们控制，就像一个普通的 Web 页面，咱们能够利用 Chrome 的消息传递机制利用这个页面和 Content scripts 进行交互，也就能够完成对页面的某些控制。

以我上面的 URLHelper 为例子，在这个扩展中，当我点击扩展程序界面中的刷新页面按钮的时候，会从扩展界面的 DOM 上将修改后参数取出拼好，而且经过 Chrome 的消息传递机制 传递给 Content scripts，然
后 Content scripts 拿到新的参数，赋值给当前浏览器窗口页面的 document.location.href，实现页面的刷新。

 

background -- 后台网页

除了 popup 页面以外，还有一个 background 后台网页 。

chrome扩展程序将后台网页分为两种类型：

  • 持续运行的后台网页
  • 事件页面

是否持久存在是事件页面与后台网页之间的根本区别。（刚开始使用的时候能够理解为一个东西）

应用和扩展程序一般须要长时间运行的脚原本管理某些任务或状态，这就是后台页面的做用。事件页面只在须要时加载，当事件页面不活动时就会卸载，以便释放内存和其余系统资源，因此通常而言是推荐使用事件页面。

它存在的目的在于，在扩展的整个生命周期内须要长时间管理一些任务或状态。它的主要功能及适用场景，大体以下：

  • 事件页面监听的某个事件触发
  • 应用或扩展程序第一次安装或者更新到新版本（为了注册事件）
  • 内容脚本或其余扩展程序发送消息
  • 扩展程序中的其余视图调用了 runtime.getBackgroundPage

以我上面的 URLHelper 为例子，在这个扩展中，我使用的是持续运行的后台网页，当浏览器页面刷新第一次注入 Content Script 时，会获取到当前页面 url ，而后发送消息并带上 url 信息告诉给 background 后台网页， background 后台网页收到消息后，再转发给 popup 页面。

 

扩展程序小结

一个扩展程序最重要的我以为就是上述的三块内容：

  • Content scripts -- 内容脚本
  • popup -- 弹窗页面
  • background -- 后台网页

image

咱们经过一个 manifest.json 的清单文件来配置它们及一些额外信息。关于 manifest.json 的详细信息，能够戳：manifest 。

接下来，咱们的扩展要灵活地完成各类功能，最重要的就是互相间的通讯！

信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。

 

扩展程序的消息传递

消息传递存在的必要性是由于内容脚本在网页而不是扩展程序的环境中运行，因此它们一般须要某种方式与扩展程序的其他部分通讯。

扩展程序（弹窗页面和后台页面）和内容脚本间的通讯使用消息传递的方式。两边都可以监听另外一边发来的消息，并经过一样的通道回应。消息能够包含任何有效的 JSON 对象。

 

使用 chrome.* API

消息传递，主要使用了 Chrome 浏览器的内置 chrome 对象进行。打开浏览器，试一下，chrome 对象其实包含了很是多的功能：

image

各类类型的消息传递都是经过这个 chrome 对象进行，分为：

  • 简单的一次性请求
  • 长时间的链接
  • 跨扩展程序消息传递
  • 从网页发送消息
  • 原生消息通讯

固然，对于一般而言的普通扩展程序而言，简单的一次性请求就足够咱们使用了，举两个例子。

假设咱们的 manifest.json 简单定义以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# manifest.json
{
     "name" :  "Url Helper" ,
     "version" :  "1.0.0" ,
     "author" :  "Coco" ,
     "manifest_version" : 2,
 
     "browser_action" : {
         "default_popup" :  "popup.html"
     },
     "background" : {
         "scripts" : [ "background.js" ]
     },
     "content_scripts" : [
         {
             "js" : [ "contentScript.js" ]
         }
     ]
}

 

从 Content Script 向 background 事件页面 传递消息

  • Content Script ，便是注入页面的脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# contentScript.js
 
// 发送消息
chrome.runtime.sendMessage(
     {
         msg:  '从 Content Script 向 事件页面 传递消息' ,
         result: 1
     },
     function (response) {
         if  (response && response.msg) {
             console.log(response.msg);
         }
     }
);
  • background 后台页面
1
2
3
4
5
6
7
8
9
10
#background.js
 
// 接收消息
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
     if  (request.result) {
         sendResponse({
             farewell:  "ok"
         });
     }
});

在发送端，咱们可使用 runtime.sendMessage 或 tabs.sendMessage 方法。这些方法分别容许您从内容脚本向扩展程序或者反过来发送可经过 JSON 序列化的消息，可选的 callback 参数容许您在须要的时候从另外一边处理回应。

而在接收端，咱们须要设置一个 runtime.onMessage 事件监听器来处理消息。

 

从 popup 弹窗页面 向 Content Script 传递消息

再举一个翻过来的例子，从 popup 弹窗页面 向 Content Script 传递消息。

  • popup 弹窗页面
1
2
3
4
5
6
7
8
9
10
11
12
13
# popup.html 页面内引入的 popup.js
 
let  obj = {
     msg:  '从 popup 弹窗页面  向 Content Script 传递消息' ,
     result: 0
};
 
// 发送消息
chrome.tabs.query({ active:  true , currentWindow:  true  },  function (tabs) {
     chrome.tabs.sendMessage(tabs[0].id, obj,  function (response) {
         console.log( "Send Success" );
     });
});
  • Content Script
1
2
3
4
5
6
7
8
9
10
# contentScript.js
 
// 接收消息
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
     console.log(sender.tab ?  "来自内容脚本："  + sender.tab.url :  "来自扩展程序" );
 
     if  (request && !request.result) {
         console.log(result.msg);
     }
});

这里有个问题须要注意，从 popup 弹窗页面 向 Content Script 传递消息时，因为浏览器可能同时打开多个 tab 页，因此须要指定一下传递的页面，指定发送至哪个标签页。

使用 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {}) 则能正确选中当前打开的标签页。

其余更多的消息传递方式，能够戳这里：消息传递。

 

将扩展程序打包上线发布到 Chrome 应用商店

扩展程序开发好了，但愿供他人下载。那么固然须要发布到应用商店。流程大体以下：

 

登陆到 Chrome 开发者信息中心。

首先，你须要有一个 Google 账号，点击这里
，登陆网上应用商店。

 

添加一个新项并以 zip 文件的形式上传文件。

成功以后，将会登陆到这个界面，： image

在这个界面咱们选择添加新内容便可 : image

注意，要打包成 *.zip 格式，而且在根目录下有最重要的 manifest.json 文件，像我上传的整个目录结构，就很是简单：
image

 

首次发布，须要支付 5 美刀

选择文件而且成功上传以后，下一步很是重要。第一次发布扩展程序，谷歌会收取 $5 开发者注册费用，以后能够发布 20 个扩展程序 。

image
image

这里付款中国内地的银行卡好像都不行，只能选择国外的 VISA 等储蓄卡、信用卡进行支付，地区选择美国便可。

 

付款完成，能够愉快的发布了

OK，最后付款完成，就能够顺利发布了，稍等片刻，就能够搜索到咱们本身开发扩展程序了！

 

后记

其实开发一款 Chrome 扩展程序真的不难，并且很是有意思。感兴趣但又怕麻烦的同窗能够参考我这个小项目改改。Github -- URL Helper

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。

 

 

本文转载自http://www.cnblogs.com/coco1s/p/8004510.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程