手把手教您付出扩大程序,扩张程序的支付与发布

By admin in 4858美高梅 on 2019年5月3日

Chrome 扩充程序的开荒与公布 — 手把手教你付出扩大程序

2017/12/08 · 基础才能 ·
Chrome,
恢宏程序

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
招待参加伯乐在线 专辑笔者。

关于 chrome
扩张的小说,很久此前也写过1篇。免去页面广告?身为前端,自身做一款轻巧的chrome增加吧。

本篇小说首要分享部分塑造扩充的长河中比较关键的学问及困难。

 

至于 chrome
扩张的小说,很久在此之前也写过1篇。化解页面广告?身为前端,自己做壹款轻便的chrome扩充吧。

关于 chrome
扩充的篇章,很久此前也写过一篇。解除页面广告?身为前端,自个儿做壹款简单的chrome增添吧。

如何是 chrome 增加程序

增加程序是一对力所能致修改或加强 Chrome
浏览器功效的小程序。对于前端程序员来讲,其最大的方便正是大家得以接纳大家耳熟能详的
HTML、CSS 、 Javascript 等才干来营造扩充程序。

正如图所示,这么些Logo就是种种开拓者提供的 chrome 扩充程序:

4858美高梅 1

本篇小说重要分享部分成立扩大的进度中比较首要的知识及难题。

本篇文章首要分享部分制作扩大的长河中相比首要的知识及难点。

4858美高梅 2

有别于扩张与插件

过四个人会误称扩大程序为插件,这里有不可缺少区分一下。

“扩大” 和 “插件”,其实都是软件组件的1种样式,Chrome
只可是是把两种类型的零件分别授予了专盛名称,四个叫 “扩张”,另叁个叫
“插件”。

  • 扩展(Extension)

指的是透过调用 Chrome 提供的 Chrome API
来扩充浏览器功用的1种组件,工作在浏览器层面,使用 HTML + Javascript
语言开采。比如著名的 Adblock plus。

  • 插件(Plug-in)

指的是经过调用 Webkit 内核 NPAPI
来扩展内核功用的1种组件,专业在基本层面,理论上得以用任何壹种转移本地贰进制造进度序的语言开垦,例如C/C++、Delphi 等。比方 Flash player 插件,就属于这种类型。一般在网页中用
<object>或者&lt;embed&gt;标签证明的一对,将在靠插件来渲染。

 

 

 

此番的演习是做一个Chrome的恢宏,分享一下入门开辟进度。因为在新闻传递那块纠结了专门久,所以我会重点总计信息传递那块。

付出协和的扩大程序

OK,简单询问完怎样是扩大程序后,上面大家来探视怎么样支付壹款扩展程序。

自然,首先大家要搞掌握为何大家需求扩张程序,它有怎么着意义吧?

就自个儿来讲,近年来本人付出了一款轻松的扩张程序 ——
URLHelper 。你能够在 chrome
应用百货店下载到它:

4858美高梅 3

支出它的来头是因为,在大家的事务支出中,开拓进程不时索要直面超长的
U奥迪Q5L,带有 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

不是心满意足,真实意况大概比那个还长。4858美高梅 4

因为调节和测试的须求,常常要找到某3个一定的参数,获取只怕涂改它的值。

读者能够尝尝一下,贴到浏览器中,找到 cid
参数,修改为别的三个值。假如未有工具,那个进度是很伤心的。叁次万幸,假设一天再一次这么些动作几十二次,就有不可或缺思量借助工具了。

依照那个角度,小编制作了 U奥德赛LHelper
那么些扩充,它的分界面差不多长这一个样子,能够10分有利于的对 URubiconL
参数举办删查改排序,修改参数刷新页面:

4858美高梅 5

据此,扩充程序笔者觉着各种前端都得以支付,用于消除大家做事生活中在应用浏览器境遇的种种难题,譬如有名的

  • WEB 前端帮手 提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面品质检查测试等等
  • 二维码生成器 将 UCRUISERL 转化成对应的②维码

 

何以是 chrome 扩充程序

强大程序是1对能力所能达到修改或进步Chrome
浏览器效能的小程序。对于前端程序员来说,其最大的方便就是大家能够运用大家耳熟能详的
HTML、CSS 、 Javascript 等才具来营造增加程序。

正如图所示,那么些Logo就是种种开采者提供的
chrome 扩大程序:

4858美高梅 6

什么是 chrome 扩张程序

庞大程序是一些可见修改或巩固Chrome
浏览器功用的小程序。对于前端程序猿来讲,其最大的有益正是我们可以利用大家谙习的
HTML、CSS 、 Javascript 等本事来创造扩充程序。

如下图所示,那个Logo正是各类开拓者提供的
chrome 扩大程序:

4858美高梅 7

  • 本次做那一个插件的功效很简短,就是点击按键后方可对现阶段网页的模块实行分选隐藏。
  • 做这几个插件1方面是练习实例,还有贰头是,有的时候查资料啊,边上海市总有繁多花花绿绿动来动去的小广告!
  • 很烦有木有,还根本无法关闭!固然有关闭开关,点击了以致还跳转到广告页面了(゚Д゚≡゚Д゚)
  • 为此就想做个小插件,让本人能够选择隐藏这个不想看的模块。

扩大程序架构

OK,接下去聊聊一些扩充程序开辟有关的东西。

有关增添程序的连带文书档案,可以看看这一个文章:

  • 创设 Chrome
    扩充程序
  • 恢宏开采文书档案

率先,作者认为最要紧的,是要打听全数扩充程序的基本架构,有多少个拾叁分关键的公文:

 

 

配置文件

有别于扩大与插件

诸几个人会误称增添程序为插件,这里有须求区分一下。

“扩充” 和
“插件”,其实都以软件组件的一种方式,Chrome
只可是是把两种类型的机件分别给予了专著名称,2个叫 “扩充”,另3个叫
“插件”。

  • 扩展(Extension)

指的是经过调用
Chrome 提供的 Chrome API
来扩充浏览器成效的1种组件,职业在浏览器层面,使用 HTML + Javascript
语言开采。比方出名的 Adblock plus。

  • 插件(Plug-in)

指的是通过调用
Webkit 内核 NPAPI
来扩充内核功用的1种组件,专门的工作在根本层面,理论上可以用其它一种改变本地2进制造进程序的言语开拓,比方C/C++、Delphi 等。比方 Flash player
插件,就属于那连串型。一般在网页中用 <object> 或者 <embed>标签申明的片段,将要靠插件来渲染。

 

分别扩张与插件

多多个人会误称扩充程序为插件,这里有不可缺少区分一下。

“扩充” 和
“插件”,其实都以软件组件的壹种样式,Chrome
只可是是把两种等级次序的零部件分别予以了专知名称,2个叫 “扩充”,另1个叫
“插件”。

  • 扩展(Extension)

指的是通过调用
Chrome 提供的 Chrome API
来增加浏览器功用的一种组件,工作在浏览器层面,使用 HTML + Javascript
语言开辟。比方闻明的 Adblock plus。

  • 插件(Plug-in)

指的是由此调用
Webkit 内核 NPAPI
来扩大内核效用的一种组件,职业在基本层面,理论上得以用别样一种转移本地二进制造过程序的语言开垦,比方C/C++、Delphi 等。比方 Flash player
插件,就属于这类别型。一般在网页中用 <object> 或者 <embed>标签注明的局地,就要靠插件来渲染。

 

每一个恢宏都有一个JSON格式的manifest文件,叫manifest.json。

Content scripts — 内容脚本

Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript
脚本。能够将 content script
看作是网页的1有些,而不是它所在的强大程序的1有的。

它能够兑现的有些作用的例证及适用场景,大致如下:

  • 在网页中搜索未链接的 UHummerH二L,并将它们转变为超链接
  • 探索特定的新闻可能 DOM 结构,扩充字体大小,使文本更有着可读性
  • 意识并管理 DOM 中的微格式数据

咱俩能够这么通晓它,在页面加载达成之后,我们的恢宏程序会向那么些页面注入贰个也许额多个剧本,这一个本子能够博得浏览器所走访的
web
页面的详细新闻。也等于大家能够运用这些本子搜罗页面上各类大家须要的音信。

以自家上面的 UPAJEROLHelper 为例子,在那些扩充中,content script
的效率就是得到页面包车型地铁 U奇骏L ,然后传递给扩充程序的 background 页面或者popup 页面。

自然,假设您只需求一个剧本程序每回注入页面后收获页面相关的新闻,然后上报到协和的服务器之类的职能,那几个扩张程序只供给那1个Content scripts
就够了。它无需与其余分界面只怕脚本举办互动和新闻传送,扩大帮您做的便是全自动注入那个剧本而须要你每一趟手动注入。

开拓和谐的恢弘程序

OK,简单询问完怎么着是扩大程序后,下边大家来探望如何支付1款扩大程序。

理所当然,首先大家要搞精通为啥大家须要扩充程序,它有什么意义吧?

就自身来说,近期本人付出了一款轻巧的扩充程序
—— URLHelper 。你能够在 chrome
应用商城下载到它:

4858美高梅 8

开拓它的原故是因为,在大家的事情支出中,开辟进度不时索要直面超长的
UCR-VL,带有 N 多个参数,它或者长这么:

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

不是快意,实情也许比那几个还长。4858美高梅 9

因为调节和测试的急需,常常要找到某1个特定的参数,获取恐怕涂改它的值。

读者能够尝尝一下,贴到浏览器中,找到 cid 参数,修改为其余一个值。假若未有工具,那几个进度是非常的惨痛的。三次辛亏,如若1天再度那么些动作几十三回,就有至关重要思量借助理工科程师具了。

据书上说那个角度,作者制作了
U福特ExplorerLHelper 那一个扩充,它的分界面大约长这一个样子,能够非凡便利的对 U凯雷德L
参数进行删查改排序,修改参数刷新页面:

4858美高梅 10

所以,扩大程序作者觉着各种前端都足以付出,用于化解大家专门的学业生活中在应用浏览器境遇的种种主题素材,譬如盛名的

  • WEB
    前端帮手
     提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面质量检查实验等等
  • 二维码生成器 将
    UCR-VL 转化成对应的2维码

 

付出协调的强大程序

OK,轻易掌握完怎么样是扩展程序后,上面大家来探视如何支付壹款扩大程序。

自然,首先大家要搞通晓为啥大家必要扩大程序,它有哪些意义吧?

就自己来讲,近期本身付出了1款轻巧的扩张程序
—— URLHelper 。你能够在 chrome
应用商号下载到它:

4858美高梅 11

支出它的原委是因为,在大家的专门的学业开销中,开拓进度不时索要直面超长的
U途达L,带有 N 多个参数,它或者长这么:

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

不是称心快意,实际意况可能比那几个还长。4858美高梅 12

因为调节和测试的要求,平时要找到某2个一定的参数,获取或然修改它的值。

读者能够品尝一下,贴到浏览器中,找到 cid 参数,修改为其余三个值。假若未有工具,那么些历程是很优伤的。二次幸亏,纵然一天再一次这一个动作几11回,就有要求思虑借助理工科程师具了。

遵照这些角度,笔者制作了
U君越LHelper 这一个扩张,它的界面大致长这几个样子,能够11分便宜的对 URAV4L
参数实行删查改排序,修改参数刷新页面:

4858美高梅 13

就此,扩大程序笔者觉着每一个前端都得以支付,用于消除大家办事生活中在应用浏览器遭受的种种主题素材,譬如著名的

  • WEB
    前端帮手
     提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面品质检查实验等等
  • 2维码生成器 将
    UXC60L 转化成对应的二维码

 

故此首先步大家将开创二个manifest.json文件。如下:

增添程序架构

OK,接下去聊聊一些恢弘程序开垦有关的事物。

至于扩展程序的相干文书档案,能够看看这个小说:

  • 创制Chrome
    扩充程序
  • 扩充开采文书档案

率先,作者感到最关键的,是要询问整个扩张程序的骨干架构,有多少个12分关键的文件:

扩展程序框架结构

OK,接下去聊聊一些扩充程序支付相关的东西。

有关扩充程序的连带文书档案,能够看看这个作品:

  • 树立
    Chrome
    扩大程序
  • 扩大开垦文书档案

第3,笔者感到最关键的,是要打听全数扩张程序的大旨架构,有多少个拾贰分首要的文件:

{      "manifest_version": 2, //固定的     "name": "Cissy's First Extension", //插件名称     "version": "1.0", //插件使用的版本     "description": "The first extension that CC made.", //插件的描述     "browser_action": { //插件加载后生成图标         "default_icon": "cc.gif",//图标的图片         "default_title": "Hello CC", //鼠标移到图标显示的文字          "default_popup": "popup.html" //单击图标执行的文件     },      "permissions": [ //允许插件访问的url         "http://*/",          "bookmarks",          "tabs",          "history"      ],      "background":{//background script即插件运行的环境         "page":"background.html"         // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//数组.chrome会在扩展启动时自动创建一个包含所有指定脚本的页面     },       "content_scripts": [{  //对页面内容进行操作的脚本          "matches": ["http://*/*","https://*/*"],  //满足什么条件执行该插件           "js": ["js/jquery-1.9.1.min.js", "js/js.js"],             "run_at": "document_start",  //在document加载时执行该脚本     }]  } 

popup — 弹窗页面

popup 页面也1贰分好领悟,在 manifest.json 的概念里它是
browser_action
正是大家扩大程序的分界面(弹窗页),正是上面包车型大巴那张截图:

4858美高梅 14

手把手教您付出扩大程序,扩张程序的支付与发布。其一分界面其实便是二个 Web
页面,点开放四3个增加页面,右键都得以看出弹出检查慎选,点击那个选项,就能弹出七个开垦者工具,我们就足以愉悦的发端对那一个页面进行查看
DOM 结构、查看网络状态、 Debug 等随便操作了:

4858美高梅 15

然后:

4858美高梅 16

重大,这一个 popup 页面完全由大家决定,仿佛2个司空眼惯的 Web
页面,大家得以选用 Chrome 的新闻传递机制利用这一个页面和 Content scripts
进行互动,也就足以成功对页面包车型客车一点调控。

以自家上边的 U哈弗LHelper
为例子,在这几个扩充中,当本身点击扩张程序分界面中的刷新页面开关的时候,会从扩大分界面的DOM 中校修改后参数抽取拼好,并且经过 Chrome 的新闻传递机制 传递给
Content scripts,然
后 Content scripts 获得新的参数,赋值给当下浏览器窗口页面的
document.location.href,完成页面包车型大巴基础代谢。

 

 

各类字段的新闻作者都用注释标明了,接下去就首要说下某些主要字段。

Content scripts — 内容脚本

Content
scripts 脚本是指能够在浏览器已经加载的页面内部运营的 javascript
脚本。能够将 content script
看作是网页的一片段,而不是它所在的扩展程序的1部分。

它能够兑现的一部分意义的例证及适用场景,差不离如下:

  • 在网页中寻找未链接的
    ULANDL,并将它们转变为超链接
  • 检索特定的音信或许DOM 结构,扩张字体大小,使文本更拥有可读性
  • 意识并管理DOM 中的微格式数据

咱俩得以这么精晓它,在页面加载完成之后,大家的壮大程序会向这几个页面注入2个恐怕额多少个剧本,那个剧本能够收获浏览器所走访的
web
页面包车型大巴详细音讯。也正是我们能够使用那个剧本搜罗页面上各个我们供给的消息。

以笔者上面包车型大巴U兰德途乐LHelper 为例子,在这么些增加中,content script 的作用正是得到页面包车型地铁 UMuranoL
,然后传递给扩张程序的 background 页面或然 popup 页面。

style=”font-family: verdana, geneva; font-size: 1四px;”>当然,如若您只需求2个本子程序每一趟注入页面后收获页面相关的新闻,然后上报到谐和的服务器之类的功效,那个扩张程序只要求这三个Content scripts
就够了。它无需与此外分界面大概脚本举行互动和音讯传递,扩展 style=”font-family: verdana, geneva; font-size: 1四px;”>帮您做的就是自行注入这一个剧本而供给您每一次手动注入。

Content scripts — 内容脚本

Content
scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript
脚本。能够将 content script
看作是网页的壹有些,而不是它所在的扩展程序的一有的。

它能够达成的1对职能的事例及适用场景,大概如下:

  • 在网页中寻找未链接的
    U奇骏L,并将它们调换为超链接
  • 招来特定的新闻依然DOM 结构,扩张字体大小,使文本更具备可读性
  • 察觉并拍卖
    DOM 中的微格式数据

大家得以如此敞亮它,在页面加载实现之后,大家的扩展程序会向这一个页面注入三个照旧额三个本子,这么些剧本能够赚取浏览器所访问的
web
页面包车型客车详细音讯。也等于大家得以应用那几个剧本搜罗页面上各个我们须求的新闻。

以本身上边的
URAV四LHelper 为例子,在这些增添中,content script 的机能正是获得页面的 U中华VL
,然后传递给扩大程序的 background 页面恐怕 popup 页面。

style=”font-family: verdana, geneva; font-size: 1四px;”>当然,假设你只必要3个剧本程序每便注入页面后得到页面相关的音信,然后上报到和谐的服务器之类的效应,这一个扩展程序只须要那1个Content scripts
就够了。它不需求与其它分界面大概脚本举行互动和音讯传送,增添 style=”font-family: verdana, geneva; font-size: 1四px;”>帮您做的就是全自动注入那几个本子而急需你每一回手动注入。

供给专注:

background — 后台网页

除此之外 popup 页面之外,还有2个 background
后台网页 。

chrome增添程序将后台网页分为二种档案的次序:

  • 不止运营的后台网页
  • 事件页面

是或不是持久存在是事件页面与后台网页之间的有史以来差异。(刚开首运用的时候能够领悟为贰个东西)

应用和扩展程序经常须要长日子运作的脚本来管理一些职责或气象,那正是后台页面包车型大巴效益。事件页面只在供给时加载,当事件页面不运动时就能够卸载,以便释放内部存款和储蓄器和别的系统财富,所以一般来说是引入应用事件页面。

它存在的目的在于,在扩展的整套生命周期内需求长日子管理有个别职务或意况。它的重中之重成效及适用场景,大致如下:

  • 事件页面监听的某些事件触发
  • 选择或扩张程序第叁回安装可能更新到新本子(为了注册事件)
  • 内容脚本或别的扩张程序发送音讯
  • 扩张程序中的其余视图调用了 runtime.getBackgroundPage

以本人上面的 U奥迪Q7LHelper
为例子,在那几个增添中,笔者使用的是持续运营的后台网页,当浏览器页面刷新第3回注入
Content Script 时,会获得到日前页面 url ,然后发送音讯并带上 url
音讯告诉给 background 后台网页, background 后台网页收到音讯后,再转载给
popup 页面。

 

 

chrome差别意扩大中的HTML页面内直接内嵌js脚本,而须求具有的台本都看成外部src来引进

popup — 弹窗页面

popup
页面也丰裕好精晓,在 manifest.json 的概念里它是 browser_action
正是大家扩张程序的分界面(弹窗页),正是地点的那张截图:

4858美高梅 17

其1分界面其实就是贰个Web
页面,点开大4一个扩充页面,右键都能够看出弹出检查挑选,点击那几个选项,就能弹出三个开采者工具,大家就能够愉悦的上马对那个页面举办查看
DOM 结构、查看网络状态、 Debug 等任性操作了:

4858美高梅 18

然后:

4858美高梅 19

重点,那一个popup 页面完全由大家决定,就好像多少个平时的 Web 页面,咱们得以行使 Chrome
的音信传递机制利用这么些页面和 Content
scripts 举办互相,也就可以做到对页面包车型地铁某个调控。以自家上面的UHighlanderLHelper
为例子,在这么些扩张中,当自家点击扩张程序分界面中的刷新页面开关的时候,会从扩张分界面包车型地铁DOM 中校修改后参数收取拼好,并且经过 Chrome 的新闻传递机制 传递给
Content scripts,然

后 Content
scripts
得到新的参数,赋值给当下浏览器窗口页面包车型客车 document.location.href,完成页面的刷新。

popup — 弹窗页面

popup
页面也不行好明白,在 manifest.json 的概念里它是 browser_action
便是大家扩展程序的分界面(弹窗页),就是下面的那张截图:

4858美高梅 20

其一分界面其实就是二个Web
页面,点开放41个恢宏页面,右键都得以看到弹出检查选拔,点击那几个选项,就能够弹出三个开辟者工具,大家就足以开心的始发对那一个页面举办查看
DOM 结构、查看网络状态、 Debug 等随便操作了:

4858美高梅 21

然后:

4858美高梅 22

重点,那一个popup 页面完全由大家决定,就好像一个习认为常的 Web 页面,我们能够使用 Chrome
的新闻传递机制利用那一个页面和 Content
scripts 进行交互,也就足以成功对页面包车型地铁一些调整。以自个儿上边的U宝马X3LHelper
为例子,在这些扩展中,当自身点击扩展程序分界面中的刷新页面按键的时候,会从扩张分界面包车型大巴DOM 团长修改后参数抽出拼好,并且通过 Chrome 的新闻传递机制 传递给
Content scripts,然

后 Content
scripts
获得新的参数,赋值给当下浏览器窗口页面包车型地铁 document.location.href,达成页面包车型大巴基础代谢。

browser_action

恢宏程序小结

3个扩张程序最要害的自家觉着便是上述的3块内容:

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

4858美高梅 23

小编们透过贰个 manifest.json 的清单文件来布局它们及一些额外新闻。关于
manifest.json
的详细音讯,能够戳:manifest

接下去,大家的扩张要灵活地做到各个功用,最重大的就是相互间的通讯!

新闻数量在内容脚本、弹窗页面以及事件页面之间传递是三个恢弘程序最重要的部分。

 

 

  1. 设若browser action具有二个popup(即设置了default_popup),popup
    能够分包自由你想要的HTML内容,并且会自适应大小。popup
    会在用户点击Logo后出现。若未有安装default_popup,将施行chrome.browserAction.onClicked的剧情,若未有安装,就什么样都不试行了。也正是若是设置了default_popup,就不会实行chrome.browserAction.onClicked了。
  2. 和browser_action对应的还有一个page_action,区别在于:Browser
    Action对在浏览器中加载的全数网页都见效;Page
    Action针对一定的网页生效。一个Extension最多可以有贰个Browser
    Action或许Page Action。这里选择Browser Action。

推而广之程序的音讯传递

音讯传递存在的供给性是因为内容脚本在网页而不是扩大程序的情形中运营,所以它们通常必要某种格局与庞大程序的别的部分通讯。

增添程序(弹窗页面和后台页面)和内容脚本间的通讯使用新闻传递的秘诀。两边均能够监听另一面发来的新闻,并经过同样的锦绣前程回应。音信能够分包其余有效的
JSON 对象。

background — 后台网页

而外 popup
页面之外,还有一个 background
后台网页 。

chrome扩大程序将后台网页分为二种等级次序:

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

是还是不是持久存在是事件页面与后台网页之间的有史以来分化。(刚开首运用的时候能够知晓为2个东西)

应用和扩大程序平日供给长日子运作的脚本来处理一些职责或气象,那正是后台页面包车型地铁作用。事件页面只在须要时加载,当事件页面不活动时就能卸载,以便释放内部存款和储蓄器和其它系统能源,所以一般来讲是引入应用事件页面。

它存在的意在,在扩张的所有生命周期内供给长日子管理有个别职分或意况。它的根本作用及适用场景,大约如下:

  • 事件页面监听的某部事件触发
  • 选择或扩充程序第3次安装或许更新到新本子(为了注册事件)
  • 内容脚本或别的扩张程序发送音讯
  • 推而广之程序中的其余视图调用了
    runtime.getBackgroundPage

以自个儿上边包车型大巴U陆风X八LHelper
为例子,在那一个扩大中,小编使用的是连连运营的后台网页,当浏览器页面刷新第二遍注入 Content
Script 时,会获得到目前页面 url ,然后发送音信并带上 url
新闻告诉给 background 后台网页, background 后台网页收到音讯后,再转载给
popup 页面。

background — 后台网页

除了 popup
页面之外,还有1个 background
后台网页 。

chrome扩充程序将后台网页分为二种等级次序:

  • 连发运转的后台网页
  • 事件页面

是还是不是持久存在是事件页面与后台网页之间的常有不一致。(刚发轫利用的时候能够领悟为多个东西)

利用和强大程序平时须要长日子运作的脚本来管理一些职务或气象,那正是后台页面包车型大巴意义。事件页面只在急需时加载,当事件页面不移步时就能卸载,以便释放内存和其他系统财富,所以一般来讲是推荐使用事件页面。

它存在的意在,在壮大的全部生命周期内亟待长日子管理某个任务或境况。它的基本点职能及适用场景,大约如下:

  • 事件页面监听的有个别事件触发
  • 运用或扩张程序第3回安装或然更新到新本子(为了注册事件)
  • 内容脚本或此外扩大程序发送消息
  • 壮大程序中的别的视图调用了
    runtime.getBackgroundPage

以小编上面的URAV四LHelper
为例子,在那些扩充中,作者利用的是不停止运输维的后台网页,当浏览器页面刷新第三回注入 Content
Script 时,会博获得当下页面 url ,然后发送新闻并带上 url
音信告知给 background 后台网页, background 后台网页收到音信后,再转载给
popup 页面。

background

 

 

  1. background是插件的运作遭遇。若设置了scripts字段,浏览器的增添系统会自行依据scripts字段钦命的具有js文件自动生成背景页。也得以一贯page字段,钦点背景页。两者只好设置2个。
  2. 一般景况下,大家会让将扩展的紧要逻辑都位居 background
    中比较便于管理。其它页面能够通过新闻传递的建制与 background
    举行报导。理论上 content script 与 popup
    之间也得以传递消息,但不提议如此做。

使用 chrome.* API

音信传递,首要采取了 Chrome 浏览器的内置 chrome
对象进行。展开浏览器,试一下,chrome 对象实际包涵了那些多的效用:

4858美高梅 24

各系列型的新闻传递皆以通过那个 chrome 对象实行,分为:

  • 简轻巧单的3次性请求
  • 长日子的一连
  • 跨扩张程序音信传递
  • 从网页发送新闻
  • 原生新闻通讯

自然,对于普通来讲的常见扩张程序来说,轻巧的一次性请求就足足大家选拔了,举四个例证。

若果大家的 manifest.json 轻易定义如下:

# 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”] } ] }

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"]
        }
    ]
}

扩大程序小结

叁个扩充程序最重要的本人以为正是上述的3块内容:

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

4858美高梅 25

大家通过一个 manifest.json 的清单文件来安排它们及片段额外新闻。关于 manifest.json 的详细音信,能够戳:manifest 。

接下去,我们的庞大意灵活地成功各个功用,最要紧的正是互相间的通讯!

音讯数量在故事情节脚本、弹窗页面以及事件页面之间传递是2个恢弘程序最关键的壹对。

扩大程序小结

一个扩大程序最重大的本身觉着正是上述的3块内容:

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

4858美高梅 26

咱俩由此二个 manifest.json 的清单文件来配置它们及片段外加新闻。关于 manifest.json 的详细新闻,能够戳:manifest 。

接下去,我们的扩大意灵活地做到种种效率,最珍视的就是相互间的通讯!

音信数据在剧情脚本、弹窗页面以及事件页面之间传递是2个扩充程序最要紧的某个。

新闻传递

 

 

鉴于插件的js运营条件有分别,所以新闻传递机制是3个要害内容。

从 Content Script 向 background 事件页面 传递音讯

  • Content Script ,便是注入页面包车型客车本子

# contentScript.js // 发送新闻 chrome.runtime.sendMessage( { msg: ‘从
Content Script 向 事件页面 传递音信’, result: 一 }, function(response) {
if (response && response.msg) { console.log(response.msg); } } );

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 后台页面

#background.js // 接收新闻chrome.runtime.onMessage.addListener(function(request, sender,
sendResponse) { if (request.result) { sendResponse({ farewell: “ok” });
} });

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.sendMessagetabs.sendMessage
方法。这么些办法分别允许你从内容脚本向扩大程序依旧反过来发送可通过 JSON
连串化的消息,可选的 callback 参数允许你在急需的时候从另一面管理回复。

而在接收端,大家需求设置2个 runtime.onMessage 事件监听器来管理信息。

扩充程序的音信传递

音讯传递留存的要求性是因为内容脚本在网页而不是扩充程序的景况中运维,所以它们日常须要某种格局与壮大程序的别的部分通讯。

扩展程序(弹窗页面和后台页面)和内容脚本间的通讯使用新闻传递的方法。两边均能够监听另一面发来的新闻,并透过平等的锦绣前程回应。音信能够包蕴其余有效的
JSON 对象。

扩张程序的新闻传递

新闻传递留存的供给性是因为内容脚本在网页而不是扩充程序的景况中运转,所以它们日常须求某种格局与恢弘程序的别的部分通讯。

扩大程序(弹窗页面和后台页面)和内容脚本间的通讯使用音讯传递的措施。两边均能够监听另2头发来的新闻,并通过同样的大道回应。新闻能够包括别的有效的
JSON 对象。

一次简单的伏乞

 

 

若果仅供给给您和睦的扩充的其余一些出殡和埋葬七个信息(可选的是或不是得到回应),你能够大约地运用chrome.extension.sendRequest()恐怕chrome.tabs.sendRequest()方法。那个艺术能够支持你传送1遍JSON类别化音信从content
script到增加,反之亦然。假使接受新闻的一方存在的话,可选的回调参数允许管理传回到的新闻。

从 popup 弹窗页面 向 Content Script 传递音信

再举二个翻过来的例证,从 popup 弹窗页面 向 Content Script 传递消息。

  • popup 弹窗页面

# 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”); }); });

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

# 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); } });

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
页,所以要求钦赐一下传递的页面,钦点发送至哪1个标签页。

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

其余越来越多的音信传递方式,能够戳这里:音讯传递。

使用 chrome.* API

信息传递,主要使用了
Chrome 浏览器的内置 chrome 对象开始展览。张开浏览器,试一下,chrome
对象实际包括了那几个多的功用:

4858美高梅 27

各体系型的音信传递都是通过那几个 chrome 对象进行,分为:

  • 总结的二回性请求
  • 长日子的接连
  • 跨扩大程序消息传递
  • 从网页发送消息
  • 原生音信通讯

自然,对于常见来说的通常扩张程序来讲,轻易的1次性请求就丰硕大家采取了,举五个例子。

设若大家的 manifest.json 轻巧定义如下:

# 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"]
        }
    ]
}

使用 chrome.* API

消息传递,重要运用了
Chrome 浏览器的内置 chrome 对象实行。展开浏览器,试一下,chrome
对象实际包涵了万分多的功效:

4858美高梅 28

各样类型的音信传递都是通过那么些 chrome 对象举办,分为:

  • 简短的叁次性请求
  • 长日子的总是
  • 跨扩充程序音信传递
  • 从网页发送新闻
  • 原生消息通讯

自然,对于常见来讲的日常扩展程序来讲,轻便的3遍性请求就丰硕大家应用了,举多少个例证。

一旦大家的 manifest.json 轻便定义如下:

# 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"]
        }
    ]
}

sendRequest() 是Chrome3三事先的API,3三随后依然采用sendMessage()吧。

将扩展程序打包上线公布到 Chrome 应用商铺

强大程序支付好了,希望供客人下载。那么自然须要公布到应用百货店。流程差不多如下:

 

 

一.剧情脚本发送音信到扩大程序

从 Content Script 向 background 事件页面 传递音讯

  • Content
    Script ,即是注入页面包车型地铁脚本

    # contentScript.js

    // 发送新闻chrome.runtime.sendMessage(
    {
    msg: ‘从 Content Script 向 事件页面 传递音信’,
    result: 1 },
    function(response) {
    if (response && response.msg) {
    console.log(response.msg);
    }
    }
    );

  • background
    后台页面

    #background.js

    // 接收音信chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.result) {
        sendResponse({
            farewell: "ok"
        });
    }
    

    });

在发送端,我们得以应用 runtime.sendMessage 或 tabs.sendMessage 方法。那一个办法分别允许你从内容脚本向扩张程序依然反过来发送可透过
JSON 体系化的音讯,可选的 callback
参数允许你在急需的时候从另一面管理回复。

而在接收端,大家须要设置2个 runtime.onMessage 事件监听器来管理新闻。

从 Content Script 向 background 事件页面 传递新闻

  • Content
    Script ,正是注入页面包车型地铁脚本

    # contentScript.js

    // 发送新闻chrome.runtime.sendMessage(

    {
        msg: '从 Content Script 向 事件页面 传递消息',
        result: 1
    },
    function(response) {
        if (response && response.msg) {
            console.log(response.msg);
        }
    }
    

    );

  • background
    后台页面

    #background.js

    // 接收新闻chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.result) {
        sendResponse({
            farewell: "ok"
        });
    }
    

    });

在发送端,大家能够利用 runtime.sendMessage 或 tabs.sendMessage 方法。那几个格局分别允许你从内容脚本向扩展程序依然反过来发送可因而JSON 系列化的新闻,可选的 callback
参数允许你在急需的时候从另三头管理答复。

而在接收端,大家供给设置八个 runtime.onMessage 事件监听器来管理音信。

chrome.extension.sendMessage({hello: "Cissy"}, function(response) { console.log(response.farewell); }); 

报到到 Chrome 开垦者音信主导。

先是,你需求有三个 谷歌(Google) 帐号,点击这里
,签到英特网应用商场。

 

 

二.恢弘程序发送新闻到内容脚本

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

再举二个翻过来的例子,从
popup 弹窗页面 向 Content Script 传递音信。

  • popup
    弹窗页面

    # 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

    # 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) {}) 则能科学选中当前张开的价签页。

任何越来越多的新闻传递格局,能够戳这里:新闻传递。

从 popup 弹窗页面 向 Content Script 传递音信

再举贰个翻过来的例证,从
popup 弹窗页面 向 Content Script 传递音讯。

  • popup
    弹窗页面

    # 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

    # 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 页,所以须要钦赐一下传递的页面,内定发送至哪1个标签页。

使用 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {}) 则能科学选中当前开荒的价签页。

别的更多的消息传递格局,能够戳这里:新闻传递。

chrome.tabs.sendMessage(tab.id, {hello: "Cissy"}, function(response) { console.log(response.farewell); }); 

丰富八个新项并以 zip 文件的格局上传文件。

打响之后,将会报到到那个分界面,:
4858美高梅 29

在那个分界面我们选用加多新内容就能够 :
4858美高梅 30

留神,要打包成 *.zip 格式,并且在根目录下有最注重的 manifest.json
文件,像自家上传的百分之百目录结构,就相当简单:
4858美高梅 31

 

 

3.吸收音讯

将增加程序打包上线发表到 Chrome 应用公司

庞大程序支付好了,希望供客人下载。那么自然必要揭露到使用集团。流程大约如下:

将扩张程序打包上线公布到 Chrome 应用集团

扩张程序支付好了,希望供客人下载。那么自然供给表露到利用集团。流程大概如下:

chrome.extension.sendMessage()向扩张内的别样监听者发送一条音讯。此音信发送后会触发增添内各种页面包车型地铁chrome.extension.onMessage()事件。

第一回表露,供给支付 五 美刀

选料文件同时成功上传之后,下一步相当主要。第2回发表扩张程序,谷歌(Google)会抽取$5 开荒者注册花费,之后能够宣布 20 个扩张程序 。

4858美高梅 32
4858美高梅 33

那边付款中夏族民共和国各省的银行卡好像都不行,只好选用国外的 VISA
等积蓄卡、信用卡实行开荒,地区选用美利坚同盟友就可以。

 

 

自个儿用的是长日子的涵养接二连三,原理差不离,就是调用接口的分别,所以就不具体介绍那一个了
详细的能够看支出文书档案

签到到 Chrome 开辟者音讯为主。

首先,你须要有一个谷歌(Google) 帐号,点击这里,登入英特网应用集团。

报到到 Chrome 开拓者消息基本。

先是,你必要有一个谷歌 帐号,点击这里,签到英特网应用集团。

长日子的维系一连

给付落成,能够愉悦的昭示了

OK,最终付款落成,就能够顺遂公布了,稍等片刻,就足以查找到我们友好支付扩大程序了!

 

 

background 和 popup

后记

实际开辟1款 Chrome
扩大程序真的轻便,而且十一分有趣。感兴趣但又怕麻烦的同学能够参照作者这一个小品种改改。Github
— URL Helper

好了,本文到此甘休,希望对你有援助 🙂

假诺还有怎样难点依然建议,能够多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持自个儿写出越多好小说,多谢!

打赏小编

累加一个新项并以 zip 文件的款式上传文件。

成功未来,将会报到到那些分界面,: 4858美高梅 34

在这一个分界面大家挑选增加新剧情就能够: 4858美高梅 35

只顾,要打包成 *.zip 格式,并且在根目录下有最要害的 manifest.json 文件,像自身上传的全方位目录结构,就非凡简单:
4858美高梅 36

增添二个新项并以 zip 文件的样式上传文件。

中标现在,将会报到到那几个分界面,: 4858美高梅 37

在那个分界面我们选取增多新内容即可: 4858美高梅 38

注意,要打包成 *.zip 格式,并且在根目录下有最要害的 manifest.json4858美高梅, 文件,像自家上传的万事目录结构,就非凡轻松:
4858美高梅 39

同三个Extension的Extension
Page(包涵background、popup、tab、infobar、notification)都以运营在同3个经过中的,所以background
和 popup 之间能够一贯互动调用对方的诀要,没有需要音讯传递。

打赏扶助作者写出更加多好小说,多谢!

任选一种支付办法

4858美高梅 40
4858美高梅 41

1 赞 1 收藏
评论

 

 

壹.popup调用background中变量或方法

至于笔者:chokcoco

4858美高梅 42

经不住小运似水,逃可是此间少年。

个人主页 ·
作者的篇章 ·
63 ·
   

4858美高梅 43

第贰次发布,供给付出 5 美刀

挑选文件同时成功上传之后,下一步极度重大。第二遍发表扩展程序,谷歌(谷歌)会抽出$5 开辟者注册开支,之后方可宣布 20 个扩展程序 。

4858美高梅 44
4858美高梅 45

此间付款中夏族民共和国内地的银行卡好像都卓殊,只可以选用海外的
VISA 等积储卡、信用卡实行付出,地区选择美利坚合众国就能够。(寻觅身边有 VISA
卡的同伙辅助支付就可以)

第3次透露,要求支付 5 美刀

挑选文件同时成功上传之后,下一步格外主要。第一回公布扩充程序,谷歌(谷歌)会抽出$5 开垦者注册开销,之后方可公告 20 个扩张程序 。

4858美高梅 46
4858美高梅 47

那边付款中夏族民共和国外地的银行卡好像都至极,只好选拔国外的
VISA 等积储卡、信用卡举办付出,地区选用美利坚合众国就能够。(寻找身边有 VISA
卡的小伙伴协理支付就能够)

var bg = chrome.extension.getBackgroundPage();//获取background页面 console.log(bg.a);//调用background的变量或方法。 

 

 

贰.background调用popup中变量或措施

付款成功,能够热情洋溢的昭示了

OK,最终付款成功,就足以安枕无忧公布了,稍等片刻,就能够找寻到我们和好支付扩充程序了!

付款成功,能够开心的发表了

OK,最后付款实现,就能够高枕无忧公布了,稍等片刻,就足以寻找到大家团结支付扩张程序了!

var pop = chrome.extension.getViews({type:'popup'});//获取popup页面 console.log(pop[0].b);//调用第一个popup的变量或方法。 

 

 

此间要专注一定要指明type,固然未有点名,则收获Background
Page之外的全体Extension Page的window对象
。(。•ˇ‸ˇ•。)那一个地点实在纠结好久。然后正是background是三个运维在扩大进度中的HTML页面。它在你的恢宏的全套生命周期都设有,而popup是在您点击了图标之后才存在,所以,在获得popup变量时,请确认popup已开垦。

仅供开采使用

理所当然,某个同学不能访问谷歌公司,也许扩大程序做出来仅仅是集体内部的壹种工具,供私人使用。那么能够直接在
chrome 浏览器安装安装包。


  • chrome 浏览器中做客
    chrome://extensions(或许单击多效益框最右侧的开关:展开 Chrome
    浏览器菜单,并选用更加多工具 (L) 菜单下的扩大程序
    (E),进入同1的页面)。
  • 保险右上角开辟者方式复选框已入选,单击加载已解压的增加程序
    …,弹出文件选拔对话框。
  • 浏览至您的恢弘程序文件所在的目录,并选定。

style=”font-size: 1四px; font-family: verdana, geneva;”>扩展目录就是三个品类下的具备文件,开拓调节和测试时同理安装就能够。

仅供开垦应用

当然,有些同学不可能访问谷歌(谷歌)商厦,只怕扩充程序做出来仅仅是团伙内部的一种工具,供私人使用。那么能够向来在
chrome 浏览器安装安装包。


  • chrome 浏览器中做客
    chrome://extensions(只怕单击多职能框最左侧的按键:展开 Chrome
    浏览器菜单,并精选越多工具 (L) 菜单下的恢弘程序
    (E),进入同1的页面)。
  • 管教右上角开采者格局复选框已入选,单击加载已解压的扩大程序
    …,弹出文件选拔对话框。
  • 浏览至您的恢宏程序文件所在的目录,并选定。

style=”font-size: 1肆px; font-family: verdana, geneva;”>扩展目录正是四个等级次序下的兼具文件,开拓调节和测试时同理安装即可。

background 和 content

  

  

绵绵长日子的保险会话必要在content
script和扩大建设构造三个长日子存在的大路。当建立连接,两端都有二个Port
对象通过那几个接二连三发送和接到新闻。

后记

实际开辟一款
Chrome
增添程序真的轻便,而且十分有意思。感兴趣但又怕麻烦的同桌可以参照作者这么些小项目改改。Github
— URL Helper

好了,本文到此结束,希望对您有援救:)

假诺还有啥难题还是建议,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

后记

实在开荒①款
Chrome
扩张程序真的轻松,而且十三分风趣。感兴趣但又怕麻烦的同校能够参照笔者这么些小品种改改。Github
— URL Helper

好了,本文到此甘休,希望对你有赞助
🙂

假定还有何样疑点照旧建议,能够多多调换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

一.内容脚本发送新闻到扩展程序

var bac = chrome.extension.connect({name: "ConToBg"});//建立通道,并给通道命名 bac.postMessage({hello: "Cissy"});//利用通道发送一条消息。 

二.恢宏程序发送消息到剧情脚本扩充程序发送音讯到内容脚本与前方类似,但须求内定哪个标签须要延续,(获取tab.id的章程本人试了许多,但唯有上边这些有效,所以要是我们有如何别的有效的艺术,求求求分享!!)

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {//获取当前Tab var cab = chrome.tabs.connect(tabId, {name: "BgToCon"});//建立通道,指定tabId,并命名 cab.postMessage({ hello: "Cissy"});//利用通道发送一条消息。 } 

三.收下新闻为了管理正在等待的连日,需求用chrome.extension.onConnect
事件监听器,对于content script恐怕扩充页面,那几个法子都是千篇一律的

chrome.extension.onConnect.addListener(function(bac) {//监听是否连接,bac为Port对象 bac.onMessage.addListener(function(msg) {//监听是否收到消息,msg为消息对象 console.log(msg.hello); }) }) 

设置调节和测试

安装
—>拓展程序—>加载已解压的打开程序—>选拔文件就行了,记得要开辟开辟者格局哦

总结

插件功效的开拓本人就不写了,实现起来相比较轻巧,那篇小说就当是chrome拓展开荒的学习笔记了,不足之处还望提出,最终照旧放一下插件源码吧,写的相比乱多数没用到的代码也没删掉,因为是练习中用到的。嗯嗯好了去吃饭。

【编辑推荐】

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有