Chrome 扩张程序的支出与揭橥 — 手把手教你付出扩充程序

2017/12/08 · 基础手艺 ·
Chrome,
恢宏程序

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

关于 chrome
扩张的小说,从古至今也写过大器晚成篇。肃清页面广告?身为前端,本人做生龙活虎款轻松的chrome扩大吧。

本篇小说重要分享部分创设扩充的进度中很首要的学识及难点。

 

float是何等工作的

2015/09/02 · CSS ·
float

原作出处:
@bitsofcode   译文出处:风儿筝(@风儿筝2014)   

即使以往非常少使用浮动,但在一些情况下,浮动是唯风度翩翩可行的消除方案。临时会感觉很寒心,因为笔者觉着变化应该起功能不过它并未。所以笔者主宰探讨下转移的行事规律以致哪些正确的利用浮动。

Redux 源码解析及应用

2018/05/23 · JavaScript
· Redux

原稿出处:
前些天头条技艺团队   

运用redux+react原来就有意气风发段时间,刚起头应用未有浓厚了然其源码,方今静下心细读源码,感触颇深~

正文首要饱含Redux设计理念、源码深入分析、Redux应用实例应用多个地点。

何以是 chrome 扩充程序

扩充程序是有些能力所能达到匡正或提升 Chrome
浏览器成效的小程序。对于前端程序员来说,其最大的方便正是咱们能够运用我们熟习的
HTML、CSS 、 Javascript 等技艺来构建扩张程序。

正如图所示,这个图标正是各样开垦者提供的 chrome 扩充程序:

图片 1

浮动的规行矩步

变迁有多个属性值能够安装

CSS

.foo{ float: left | right | inherit | none }

1
2
3
.foo{
  float: left | right | inherit | none
}

各种属性值是如何影响浮动成分在其父成分或文书档案内的安置,常常是由上边包车型客车法规决定的:

背景:

React 组件 componentDidMount 的时候初叶化 Model,并监听 Model 的 change
事件,当 Model 产生变动时调用 React 组件的 setState 方法重复 render
整个组件,最终在组件 componentWillUnmount 的时候打消监听并销毁 Model。

最开头贯彻一个归纳实例:比方add加法操作,只要求经过React中 setState
去调整变量扩充的情景,非常简单方便。

而是当大家须求在类型中追加乘法/除法/幂等等复杂操作时,就必要规划七个state来支配views的改换,当项目变大,里面含有状态过多时,代码就变得难以保险何况state的改造不可预测。或许须要扩展一个小效用时,就可以引起多处改换,导致支付频率下落,代码可读性不高

比如说现在利用超多backbone方式:图片 2

如上海体育场合所示,能够看出 Model 和 View 之间关系积重难返,前期代码难以维护。

为了化解上述难点,在 React 中引进了 Redux。Redux 是
JavaScript 状态容器,提供可预测化的景色管理方案。上面详细介绍~~

区分扩充与插件

无数人会误称扩张程序为插件,这里有必不可少区分一下。

“扩张” 和 “插件”,其实都是软件组件的生龙活虎种方式,Chrome
只可是是把两体系型的组件分别付与了专有名称,一个叫 “扩充”,另三个叫
“插件”。

  • 扩展(Extension)

指的是通过调用 Chrome 提供的 Chrome API
来扩张浏览器功用的风流倜傥种组件,职业在浏览器层面,使用 HTML + Javascript
语言开拓。比方盛名的 Adblock plus。

  • 插件(Plug-in)

指的是通过调用 Webkit 内核 NPAPI
来增加内核功用的生龙活虎种组件,职业在根本层面,理论上能够用其它后生可畏种更改本地二进制造进度序的言语开采,比方C/C++、Delphi 等。比方 Flash player 插件,就属于那体系型。日常在网页中用
<object>或者&lt;embed&gt;标签证明的生龙活虎部分,将要靠插件来渲染。

 

变化成分的父元素是不可以预知的

更动成分会脱离文书档案流,不会继续停留在其父元素内。固然一个父元素唯有四个子元素,那么它将会塌陷,就像空的同意气风发。就表现来说,就有一点点相同于子成分做了相对定位。

CSS

.parent { position: relative; padding: 10px; } .child { float: left }

1
2
3
4
5
6
7
.parent {
   position: relative;
   padding: 10px;
}
.child {
   float: left
}

图片 3

目的:

1、深切领会Redux的宏图观念

2、深入分析Redux源码,并结合实际应用对源码有更深档期的顺序的驾驭

3、实际工程使用中所遭受的标题总计,幸免重复踩坑

支付和谐的扩充程序

OK,简单了然完如何是扩展程序后,下边我们来拜会哪些开辟意气风发款扩大程序。

当然,首先大家要搞掌握怎么我们要求扩张程序,它有哪些效劳吧?

就自个儿来说,近年来笔者付出了后生可畏款轻巧的扩充程序 ——
URLHelper 。你能够在 chrome
应用商城下载到它:

图片 4

支出它的原故是因为,在大家的作业开销中,开辟进度不经常索要直面超长的
UEnclaveL,带有 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

不是欢愉,实况或许比这么些还长。图片 5

因为调节和测验的内需,日常要找到某三个一定的参数,获取恐怕更正它的值。

读者可以品味一下,贴到浏览器中,找到 cid
参数,校订为此外几个值。若无工具,这些进程是异常惨重的。贰回幸亏,要是一天再度那些动作几14回,就有不可缺少思虑依靠理工程师具了。

基于那几个出发点,小编制作了 U奥迪Q5LHelper
这些扩张,它的分界面差非常少长那几个样子,能够十二分有扶持的对 U奥迪Q5L
参数实行删查改排序,改善参数刷新页面:

图片 6

由此,扩张程序笔者感到各种前端都足以付出,用于缓慢解决我们办事生活中在运用浏览器碰着的各样主题材料,譬喻闻明的

  • WEB 前端助手 提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面品质检查评定等等
  • 二维码生成器 将 U哈弗L 转产生对应的二维码

 

左浮动/右浮动成分会专心致志贴近父元素的最上端和左侧/左侧

那是左浮动/右浮动成分试图实现的“最好”地方

风流洒脱、Redux设计思想

扩展程序架构

OK,接下去聊聊一些恢宏程序支付相关的事物。

有关扩充程序的连带文书档案,可以看看那一个随笔:

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

首先,作者认为最要紧的,是要询问整个扩大程序的骨干架构,有多少个十二分关键的公文:

前方的成分会将转变成分向下推

虽说变化成分会尽量贴近父成分的顶端,不过文档中变化成分前面包车型地铁弟兄成分会把调换成分向下推。无论后边的因素是内联成分如故块成分。

也正是说如若大家在转移成分在此以前或之后有二个段子,会获得分化的结果。

图片 7

段落在更动成分之后

图片 8

段落在转移成分以前

背景:

价值观 View 和 Model :三个 view 大概和四个 model 相关,一个 model
也可能和七个 view 相关,项目复杂后代码耦合度太高,难以保证。

redux 应际而生,redux 中着力概念reducer,将有所复杂的 state
集中管理,view 层客商的操作无法间接改造 state进而将view 和 data
解耦。redux 把古板MVC中的 controller 拆分为action和reducer

眼下的转移成分获得更“好”的职分

在法则第22中学讲到的“最棒”的职位将会给第贰个被定义为变化的因素。举个例子说,有多少个右浮动成分,HTML中率先个概念的右浮动成分会最贴近左边,
因为那是一流地方。

XHTML

<div class=”container”> <div class=”right”>1</div>
<div class=”right”>2</div> <div
class=”right”>3</div> <p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit…</p> </div>

1
2
3
4
5
6
<div class="container">        
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
</div>

图片 9

统筹观念:

(1)Web 应用是多个状态机,视图与气象是各类对应的。

(2)全数的情景,保存在一个指标里面。

Redux 让动用的气象变化变得可预测。假使想改革使用的情状,就亟须
dispatch 对应的
action。而不可能直接改换使用的情事,因为保存那么些景况的地点(称为
store)只有 get方法(getState) 而没有 set方法

要是Redux
订阅(subscribe)相应框架(比方React)内部方法,就能够动用该应用框架保险数据流动的后生可畏致性。

Content scripts — 内容脚本

Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript
脚本。能够将 content script
看作是网页的一片段,实际不是它所在的增加程序的风度翩翩某个。

它能够完结的片段功能的例子及适用场景,大约如下:

  • 在网页中寻觅未链接的 UOdysseyL,并将它们调换为超链接
  • 寻觅特定的音讯可能 DOM 结构,增添字体大小,使文本更富有可读性
  • 意识并拍卖 DOM 中的微格式数据

大家能够如此敞亮它,在页面加载达成之后,大家的恢弘程序会向这一个页面注入多少个依然额多少个本子,那些本子能够拿走浏览器所访问的
web
页面的详细音信。也正是我们得以应用那一个本子搜聚页面上各类我们需求的音讯。

以自个儿上边的 URAV4LHelper 为例子,在此个扩展中,content script
的效率便是获得页面的 U悍马H2L ,然后传递给扩充程序的 background 页面或然popup 页面。

本来,若是您只须要叁个本子程序每回注入页面后取得页面相关的音讯,然后上报到温馨的服务器之类的效果,那一个扩大程序只要求那多个Content scripts
就够了。它不须要与其余部面或许脚本举行交互和消息传递,扩充帮您做的便是活动注入这几个本子而急需你每一回手动注入。

好像于父成分的顶端优先于左侧/侧边

当有多少个调换成分向同八个方向变化时,随后的成分为了更相似父成分的顶上部分,将会筛选离家父成分左边/侧面的职位。

那就表示八个转移成分将尽心并列排在一条线排列,独有当父成分的宽窄不能够包容它们,它们才会移动到上面。

图片 10

在那些例子中,成分2比要素3全体越来越好的岗位

Action Creator:

只可以通过dispatch action来改造state,那是并世无两的办法

action日常的花样是: action = { type: ‘ … ‘, data: data }
action一定是有多个type属性的指标

在dispatch任何叁个 action
时将具备订阅的监听器都实施,文告它们有state的换代图片 11

调换元素无法拉开到它的父成卓殊面

左浮动的成分不会延长到父成分的左侧缘外。

左浮动的因素不应当延伸到父元素的右外边缘外,除非父成分未有剩余的半空中。

图片 12

Store:

Redux中独有三个store,store中保留应用的富有处境;判定需求改换的意况分配给reducer去管理。

可以有四个reducer,每种reducer去承受一小部分意义,最后将四个reducer合并为三个根reducer

作用:

  • 维持state树;
  • 提供 getState() 方法得到 state;
  • 提供 dispatch(action) 方法立异 state;
  • 因此 subscribe(listener) 注册监听器。

popup — 弹窗页面

popup 页面也不行好通晓,在 manifest.json 的定义里它是
browser_action
便是我们扩充程序的分界面(弹窗页),就是上边的那张截图:

图片 13

其意气风发分界面其实便是四个 Web
页面,点开任性一个扩展页面,右键都得以观望弹出检查选拔,点击那么些选项,就能够弹出二个开采者工具,我们就可以欢娱的初叶对这几个页面实行查看
DOM 结构、查看网络状态、 Debug 等任性操作了:

图片 14

然后:

图片 15

最首要,这么些 popup 页面完全由大家决定,就如八个日常的 Web
页面,大家能够使用 Chrome 的信息传递机制利用这一个页面和 Content scripts
举行互动,也就能够产生对页面包车型地铁一些调整。

以自家上面的 U陆风X8LHelper
为例子,在这里个扩充中,当自身点击扩张程序分界面中的刷新页面开关的时候,会从扩丰裕界面包车型地铁DOM 大校校正后参数收取拼好,况且经过 Chrome 的音信传递机制 传递给
Content scripts,然
后 Content scripts 得到新的参数,赋值给当下浏览器窗口页面包车型客车
document.location.href,完成页面的刷新。

解除浮动

clear 属性与 float 紧密相关。它能够消亡成分浮动变成的文书档案流的改变。它有八个属性值:

CSS

.foo { clear: left | right | both }

1
2
3
.foo {
  clear: left | right | both
}

当叁个因素设置为  clear:left ,那象征消除浮动的要素的顶上部分边缘必须在左浮动成分底边的底下。假诺该因素设置 
clear:both ,那么它的最上部边缘一定会在全部变化成分的荒淫无耻。

图片 16

段落杀绝左浮动

假定贰个要素只是消释左浮动或右浮动,另风流浪漫主旋律转换的元素不会受此影响。

<div class=”container”> <div class=”left”>1</div>
<div class=”left”>2</div> <div
class=”left”>3</div> <div class=”right”>1</div>
<div class=”right”>2</div> <div
class=”right”>3</div> <p class=”clear-left”>Lorem ipsum
dolor sit amet, consectetur adipiscing elit…</p> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="container">    
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
 
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
 
  <p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
</div>

图片 17

Reducer:

store想要知道一个action触发后什么改换状态,会施行reducer。reducer是纯函数,根reducer拆分为多少个小reducer
,每一个reducer去管理与自个儿相关的state更新

注:不直接校正总体应用的气象树,而是将气象树的每大器晚成部分举办拷贝并改良拷贝后的变量,然后将这一个有些重组成生龙活虎颗新的情形树。采纳了数量不可变性(immutable),易于追踪数据变动。此外,还是能增添比如废除操作等功能。

clearfix

在此以前有超多无规律而不适于的清浮动方法。特别是会在局地老旧浏览器导致难题。笔者用的三个盛行的清浮动方案是用CSS达成的。上面包车型大巴体制应用于浮动成分的父成分或紧随其后的男人成分。

CSS

.cf::after { content:””; display:table; clear:both; }

1
2
3
4
5
.cf::after {
  content:"";
  display:table;
  clear:both;
}

您可以看她们博客–为啥这样使用那一个属性,可是那几个方案本质上是成立了多个看不见的伪元素来消逝浮动。

Views:

容器型组件 Container component 和体现型组件 Presentational component)

建议是只在最顶层组件(如路由操作)里选拔Redux。其他内部组件仅仅是显示性的,全体数据都通过 props 传入。

容器组件 展示组件
Location 最顶层,路由处理 中间和子组件
Aware of Redux
读取数据 从 Redux 获取 state 从 props 获取数据
修改数据 向 Redux 派发 actions 从 props 调用回调函数

background — 后台网页

除此而外 popup 页面之外,还应该有二个 background
后台网页 。

chrome增加程序将后台网页分为两连串型:

  • 接连不断运维的后台网页
  • 事件页面

是否悠久存在是事件页面与后台网页之间的常常有差异。(刚开头利用的时候能够知晓为三个东西)

采纳和扩展程序日常要求长日子运作的脚本来管理一些职务或景况,那正是后台页面包车型地铁法力。事件页面只在须要时加载,当事件页面不移动时就能够卸载,以便释放内部存款和储蓄器和其余系统能源,所以常常来说是援用应用事件页面。

它存在的目的在于,在扩张的全体生命周期内亟待长日子管理有个别任务或气象。它的关键作用及适用场景,大概如下:

  • 事件页面监听的有个别事件触发
  • 接纳或扩张程序第叁遍安装大概更新到新本子(为了注册事件)
  • 剧情脚本或别的增添程序发送音讯
  • 增添程序中的其余视图调用了 runtime.getBackgroundPage

以自己上边的 U冠道LHelper
为例子,在这里个扩展中,笔者利用的是绵绵运作的后台网页,当浏览器页面刷新第一回注入
Content Script 时,会收获到当前页面 url ,然后发送音讯并带上 url
音讯告知给 background 后台网页, background 后台网页收到音信后,再转载给
popup 页面。

扩展阅读

  • CSS的Float之一
  • CSS的Float之二
  • float深入解析
  • Clear Float

    1 赞 1 收藏
    评论

图片 18

Middleware:

中间件是在action被提倡之后,达到reducer在此以前对store.dispatch方法实行扩张,巩固其功效。

诸如常用的异步action => redux-thunk、redux-promise、redux-logger等

Redux中store、action、views、reducers、middleware等数据流程图如下:图片 19

发表评论

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