初体验之Chrome,扩大开发

vuejs 初体验— Chrome 插件开发实录

2017/05/16 · JavaScript
· Chrome,
vuejs

原稿出处:
janilychen   

背景

欢迎大家关怀腾讯云技术社区-和讯官方主页,大家将持续在天涯论坛为我们推荐技术精品小说哦~

一、入门

背景

对此时常和卡通开发打交道的开发者对于Animate.css以此动画库不会目生,它把一部分大规模的卡通片效果都卷入起来了,至极实用。不过有时在开发中,仅仅只是须求某一多个卡通效果,把整体CSS文件都引入,这样不是太好。

急需就涌出了,能或不可能有三个工具得以平昔预览Animate.css对应的卡通效果,并且转变对应的动画代码呢?

作为3个UI开发,平日跟Chrome浏览器打交道最多,于是就整了三个Chrome插件能够立即预览对应Animate.css中的动画效果并生成对应的卡通片代码,那样在实质上费用中相遇一些亟待动用到Animate.css中的动画效果时,可以大大的进步我们的支付效用。

插件安装地点,快来安装体验呢!

作为3个程序员,捣鼓些小工具,不但能够学些新技巧仍是能够进步我们的费用功用,何乐不为呢。

上面就以二个简练的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的开销体验和频率。

扩张如下图所示:

亚洲必赢官网 1

插件首要职能是基于用户选择的对齐格局,实时预览效果和展现相应的CSS代码,方便大家得以一向拷贝代码使用。

对于平常和动画开发打交道的开发者对于Animate.css以此动画库不会目生,它把一些周边的卡通片效果都打包起来了,相当实用。但是有时在开发中,仅仅只是要求某一七个卡通效果,把全数CSS文件都引入,那样不是太好。

作者:陈纬杰

那是成立chrome增加插件的入门指南,不须求此外编制程序基础,看完这几个后,我们就动手做和好的Chrome插件了。好啊,我们以后就起来,其实本身也是个新手。

Chrome插件开发基本知识

在选择集团中下载下来的插件基本上都以以.crx为文件后缀,该公文其实便是1个压缩包,包含插件所必要的html、css、javascript、图片能源等等文件。

支付3个插件就跟我们日常做web开发流程没多大的差异,就是先搭好核心的页面,然后利用js来写交互逻辑等效果。

譬如本身那个插件的目录文件如下:

亚洲必赢官网 2

急需就涌出了,能或无法有三个工具得以直接预览Animate.css对应的动画片效果,并且转变对应的卡通代码呢?

背景

对于时常和卡通开发打交道的开发者对于Animate.css其一动画库不会目生,它把一部分常见的动画效果都卷入起来了,相当实用。但是有时在开发中,仅仅只是供给某一多少个卡通效果,把全体CSS文件都引入,那样不是太好。

需要就应运而生了,能否有1个工具得以平素预览Animate.css对应的动画片效果,并且转变对应的卡通代码呢?

用作1个UI开发,平日跟Chrome浏览器打交道最多,于是就整了3个Chrome插件能够马上预览对应Animate.css中的动画效果并扭转对应的动画片代码,这样在实际支付中相遇一些亟需选用到Animate.css中的动画效果时,能够大大的进步大家的开发效能。

插件安装地方,快来安装体验吧!

用作2个程序员,捣鼓些小工具,不但能够学些新技巧还是能提升我们的支出功用,何乐不为呢。

上面就以四个简约的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的支出体验和作用。

恢宏如下图所示:

亚洲必赢官网 3

并且还实时根据用户挑选的对齐格局,显示相应的CSS代码,方便咱们得以直接拷贝代码使用。

亚洲必赢官网 4

manifest.json文件

文件中需求注意一下的mainfest.json那几个文件,那个json文件的功能是提供插件的各样音讯,例如插件能够做的事情,以及插件的文本配置等等音信。下边是二个清单文件的演示:

{ “manifest_version”: 2, “name”: “One-click Kittens”, “description”:
“This extension demonstrates a browser action with kittens.”, “version”:
“1.0”, “permissions”: [ “” ],
“browser_action”: { “default_icon”: “icon.png”, “default_popup”:
“popup.html” } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "manifest_version": 2,
 
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
 
  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

先是行注明大家接纳清单文件格式的版本 2,必须带有(版本 1
是旧的,已弃用,不提出利用)。

接下去的一些概念扩充程序的名称、描述与版本。这几个都会在 Chrome
浏览器中应用,向用户展现已设置的恢宏程序,同时在 Chrome
网上应用店中向地下的新用户体现你的壮大程序。名称应当简练,描述不要比一句话左右还长(前面将会有越多的长空用于更详细的描述)。

最后一某个首先请求权限,用于访问
上的数量,并扬言该扩充程序达成了一个浏览器按钮,同时在这一历程中为它钦定三个暗中认可图标与弹出窗口。

概念浏览器按钮时指向了五个能源文件:icon.png 与
popup.html。这七个能源都必须在增加程序包中存在,图片是扩大的展现,html是扩展具体运作的底子文件。

实际详尽的开发教程能够看看官方的本条文书档案,极度显眼的入门教程。

作为三个UI开发,日常跟Chrome浏览器打交道最多,于是就整了二个Chrome插件能够登时预览对应Animate.css中的动画效果并生成对应的卡通代码,那样在实质上开支中相见一些亟待动用到Animate.css中的动画效果时,能够大大的升高大家的支付功能。

Chrome插件开发基本知识

在运用商店中下载下来的插件基本上都以以.crx为文件后缀,该公文其实就是2个压缩包,包含插件所须求的html、css、javascript、图片能源等等文件。

支出3个插件就跟大家平时做web开发流程没多大的界别,正是先搭好核心的页面,然后使用js来写交互逻辑等效用。

譬如自个儿那么些插件的目录文件如下:

亚洲必赢官网 5

准备工具

效能完成-Vuejs实践

全副插件的中央交互作用极度容易,如小说开头的动图所示,用户挑选对齐格局,代码区域呈现相应的代码。这种总结多少交互使用vuejs再适合可是了,vuejs基础知识那里就不再细说了。

此间要求小心的某个是,chrome 扩充的周转条件有一些特殊要求,称为 Content
Security Policy (CSP),使得一般的 vue 不可能被平常使用。借使用的是 vue
1.x,那么能够下载 csp 版本,在
这里。若是是 2.x
版本,请参见官网文书档案的这一段。

着力代码如下所示。

HTML:

XHTML

<!DOCTYPE html> <html> <head> <meta
charset=”UTF-8″> <!– 引入样式 –> <link rel=”stylesheet”
href=”main.css”> <link rel=”stylesheet” href=”mystique.css”>
</head> <body> <div id=”app”> <h1
class=”title-box”>flexbox对齐正是如此简单</h1> </div>
<div id=”type-select”> <select v-model=”selected”>
<option v-for=”option in options” v-bind:value=”option.value”> {{
option.text }} </option> </select> <!–
<span>Selected: {{ selected }}</span> –> <div
class=”resule-preview”> <div v-bind:class=”selected”
class=”cols”> <div class=”col col-3″> <p>对齐</p>
</div> <div class=”col col-3″> <p>对齐</p>
</div> <div class=”col col-3″> <p>对齐</p>
</div> </div> </div> <div class=”resule-code”>
<pre class=”code-display”> <code class=”code-lang”> {{
cssMsg }} </code> </pre> </div> </div> <!–
先引入 Vue –> <script src=”vue.js”></script> <!–
引入组件库 –> <script src=”main.js”></script>
</body> </html><!– 引入样式 –>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!– 引入样式 –>
  <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="mystique.css">
</head>
<body>
    <div id="app">
      <h1 class="title-box">flexbox对齐就是这么简单</h1>
    </div>
    <div id="type-select">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <!– <span>Selected: {{ selected }}</span> –>
      <div class="resule-preview">
        <div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
        </div>
      </div>
      <div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}
            </code>
        </pre>
      </div>
    </div>
    <!– 先引入 Vue –>
    <script src="vue.js"></script>
    <!– 引入组件库 –>
    <script src="main.js"></script>
</body>
</html><!– 引入样式 –>

插件安装地方,快来安装体验呢!

manifest.json文件

文本中要求留意一下的mainfest.json那一个文件,这一个json文件的功力是提供插件的各样音讯,例如插件能够做的事务,以及插件的文件配置等等音信。下边是多少个清单文件的以身作则,

{
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

 

率先行注脚大家采用清单文件格式的版本 2,必须包括(版本 1
是旧的,已弃用,不提出选取)。

接下去的一部分概念扩大程序的名目、描述与版本。这一个都会在 Chrome
浏览器中动用,向用户体现已设置的扩展程序,同时在 Chrome
网上应用店中向地下的新用户体现你的恢宏程序。名称应当简练,描述不要比一句话左右还长(前边将会有更加多的半空中用于更详实的叙述)。

末尾一部分首先请求权限,用于访问  上的多少,并宣称该扩大程序实现了2个浏览器按钮,同时在这一经过中为它内定三个暗中同意图标与弹出窗口。

概念浏览器按钮时指向了多少个财富文件:icon.png 与
popup.html。那八个财富都不可能不在扩张程序包中留存,图片是扩充的来得,html是扩充具体运作的基础文件。

切实详细的支付教程能够看看官方的那么些文书档案,格外分明的入门教程。

做其他工作都要有个工具,制作chrome插件供给的工具很少。

CSS就不列出来了,能够在源代码中查阅。

上面来选拔vuejs来完毕插件的机能。

作为1个程序员,捣鼓些小工具,不但可以学些新技巧还足以拉长大家的支付功能,何乐不为呢。

初体验之Chrome,扩大开发。职能达成-Vuejs实践

一体插件的大旨交互功用格外简单,如小说开端的动图所示,用户选取对齐形式,代码区域显示相应的代码。那种回顾多少交互使用vuejs再适合然则了。

此处供给小心的一些是,chrome 扩充的周转条件有部分特殊需求,称为 Content
Security Policy (CSP),使得一般的 vue 不可能被正常使用。假使用的是 vue
1.x,那么能够下载 csp
版本,在 这里。假如是 2.x
版本,请参见官网文档的这一段。

宗旨代码如下所示。

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="mystique.css">
</head>
<body>
    <div id="app">
      <h1 class="title-box">flexbox对齐就是这么简单</h1>
    </div>
    <div id="type-select">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <!-- Selected: {{ selected }} -->
      <div class="resule-preview">
        <div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
        </div>
      </div>
      <div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}
            </code>
        </pre>
      </div>
    </div>
    <!-- 先引入 Vue -->
    <script src="vue.js"></script>
    <!-- 引入组件库 -->
    <script src="main.js"></script>
</body>
</html>

 

CSS就不列出来了,能够在源代码中查看。

上边来利用vuejs来促成插件的功效。

  • 记事本,用来编排代码
  • Chrome浏览器,那几个无法少啊。Windows下,全体版本的Chrome都能够创制插件。Linux下需求下载Beta版本,Mac下载dev版本。

意义落成

动用 v-for 指令根据一组数组的选项列表举办渲染。 v-for 指令要求以 item in
items 格局的新鲜语法, items 是源数据数组并且 item
是数组成分迭代的外号。

而下拉框(select)列表的渲染,就足以动用vue中的v-for情势来渲染下拉列表选项,下拉选项数据写在js中的data对象中的options中。用v-bind方式来绑定option的value值,代码如下所示:

XHTML

<select v-model=”selected”> <option v-for=”option in options”
v-bind:value=”option.value”> {{ option.text }} </option>
</select>

1
2
3
4
5
<select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
</select>

在vuejs中能够用 v-model
指令在表单控件成分上创办双向数据绑定。它会遵照控件类型自动选取正确的点子来更新成分。这里在select中利用v-model方法来监听选中的值。

为了能预览分裂对齐的效用,先在CSS中写好和下拉框中值相同的呼应的类名样式,那样当用户选中区别的值的时候能显得区别的功力。这里大家选择v-bind方法来达成那几个功效,它首要用以属性绑定,大家得以给v-bind:class多个对象,以动态地切换class。

XHTML

<div v-bind:class=”selected” class=”cols”> <div class=”col
col-3″> <p>对齐</p> </div> <div class=”col
col-3″> <p>对齐</p> </div> <div class=”col
col-3″> <p>对齐</p> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
<div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
</div>

下拉框那块效能就那样,简简单单几行代码就完毕了。想想假设用jquery大概是原生的js来促成均等的成效,不仅代码量要大并且写起来也未尝vuejs这么舒畅(英文名:Jennifer)。

接下去是代码同步作用,即在代码区域呈现对应flex对齐的CSS代码。

起初以前先讲讲vuejs中的computed属性方法,可总计属性 (computed
properties) 便是不存在于原始数据中,而是在运营时实时总结出来的属性。

对应到大家那一个实例,正是当用户挑选flexbox区别的对齐方式的时候,及时联合对应的CSS代码到代码预览区域。简单起见,直接把几个不等的代码写到js中:

data: { selected: ‘cols-center’, cssText:{ ‘cols-center’ :
‘nr-webkit-justify-content: center;nr-ms-flex-pack:
center;nrjustify-content: center;’, ‘cols-space-between’ :
‘nr-webkit-justify-content: space-between;nr-ms-flex-pack:
justify;nrjustify-content: space-between;’, ‘cols-space-around’ :
‘nr-webkit-justify-content: space-around;nr-ms-flex-pack:
distribute;nrjustify-content: space-around;’ }, options: [ { text:
‘居中对齐’, value: ‘cols-center’}, { text: ‘两端对齐’, value:
‘cols-space-between’}, { text: ‘间隔相等’, value: ‘cols-space-around’}
] },

1
2
3
4
5
6
7
8
9
10
11
12
13
data: {
    selected: ‘cols-center’,
    cssText:{
     ‘cols-center’ : ‘nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;’,
     ‘cols-space-between’ : ‘nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;’,
     ‘cols-space-around’ : ‘nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;’
    },
    options: [
      { text: ‘居中对齐’, value: ‘cols-center’},
      { text: ‘两端对齐’, value: ‘cols-space-between’},
      { text: ‘间隔相等’, value: ‘cols-space-around’}
]
    },

依照差别的名字对应分裂的CSS代码。然后利用computed方法来依照用户选拔的值实时取出对应的CSS代码:

computed:{ cssMsg:function(){ console.log(this) return
this.cssText[this.selected]; } }

1
2
3
4
5
6
computed:{
     cssMsg:function(){
     console.log(this)
     return this.cssText[this.selected];
     }
    }

总体代码如下:

var typeSelect = new Vue({ el: ‘body’, data: { selected: ‘cols-center’,
cssText:{ ‘cols-center’ : ‘nr-webkit-justify-content:
center;nr-ms-flex-pack: center;nrjustify-content: center;’,
‘cols-space-between’ : ‘nr-webkit-justify-content:
space-between;nr-ms-flex-pack: justify;nrjustify-content:
space-between;’, ‘cols-space-around’ : ‘nr-webkit-justify-content:
space-around;nr-ms-flex-pack: distribute;nrjustify-content:
space-around;’ }, options: [ { text: ‘居中对齐’, value: ‘cols-center’},
{ text: ‘两端对齐’, value: ‘cols-space-between’}, { text: ‘间隔相等’,
value: ‘cols-space-around’} ] }, computed:{ cssMsg:function(){
console.log(this) return this.cssText[this.selected]; } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var typeSelect = new Vue({
   el: ‘body’,
   data: {
    selected: ‘cols-center’,
    cssText:{
     ‘cols-center’ : ‘nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;’,
     ‘cols-space-between’ : ‘nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;’,
     ‘cols-space-around’ : ‘nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;’
    },
    options: [
      { text: ‘居中对齐’, value: ‘cols-center’},
      { text: ‘两端对齐’, value: ‘cols-space-between’},
      { text: ‘间隔相等’, value: ‘cols-space-around’}
]
    },
    computed:{
     cssMsg:function(){
     console.log(this)
     return this.cssText[this.selected];
     }
    }
})

末段在html中绑定通过computed方法赢得数码也便是CSS:

XHTML

<div class=”resule-code”> <pre class=”code-display”>
<code class=”code-lang”> {{ cssMsg }} </code> </pre>
</div>

1
2
3
4
5
6
7
<div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}  
            </code>
        </pre>
      </div>

插件代码下载

开发好之后,能够直接在chrome中运作来调节。打开扩大面板,勾选开发者形式,然后加载刚开发扩大所在的目录就能够直接运营了。

亚洲必赢官网 6

一个简易的插件就成功了,通过那1个简便的chrome插件就足以感受到vuejs在web开发中简单、优雅的魔力,还有何样理由并非起来呢。

1 赞 5 收藏
评论

亚洲必赢官网 7

上面就以一个粗略的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的成本体验和效用。

成效达成

采纳 v-for 指令依据一组数组的选项列表进行渲染。 v-for 指令须要以 item in
items 方式的超常规语法, items 是源数据数组并且 item
是数组元素迭代的小名。

而下拉框(select)列表的渲染,就能够选择vue中的v-for方法来渲染下拉列表选项,下拉选项数据写在js中的data对象中的options中。用v-bind方法来绑定option的value值,代码如下所示:

<select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
</select>

 

在vuejs中可以用 v-model 指令在表单控件成分上创办双向数据绑定。它会依据控件类型自动选取正确的法门来更新成分。那里在select中应用v-model方法来监听选中的值。

为了能预览区别对齐的效用,先在CSS中写好和下拉框中值相同的附和的类名样式,那样当用户选中不一样的值的时候能突显分裂的效果。

<div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
</div>

 

下拉框这块功用就像是此,简不难单几行代码就贯彻了。想想假若用jquery恐怕是原生的js来落成均等的机能,不仅代码量要大还要写起来也从没vuejs这么舒畅(Jennifer)。

接下去是代码同步效能,即在代码区域展现对应flex对齐的CSS代码。

伊始在此之前先讲讲vuejs中的computed属性方法,可计算属性 (computed
properties) 正是不存在于原来数据中,而是在运维时实时计算出来的性情。

对应到大家以此实例,就是当用户挑选flexbox分裂的对齐情势的时候,及时联合对应的CSS代码到代码预览区域。简单起见,直接把多少个例外的代码写到js中:

data: {
        selected: 'cols-center',
        cssText:{
            'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
            'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
            'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
        },
        options: [
          { text: '居中对齐', value: 'cols-center'},
          { text: '两端对齐', value: 'cols-space-between'},
          { text: '间隔相等', value: 'cols-space-around'}
        ]
    },

 

根据分裂的名字对应分化的CSS代码。然后利用computed方法来依据用户接纳的值实时取出对应的CSS代码:

computed:{
        cssMsg:function(){
            console.log(this)
            return this.cssText[this.selected];
        }
    }

 

全体代码如下:

var typeSelect = new Vue({
      el: 'body',
      data: {
        selected: 'cols-center',
        cssText:{
            'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
            'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
            'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
        },
        options: [
          { text: '居中对齐', value: 'cols-center'},
          { text: '两端对齐', value: 'cols-space-between'},
          { text: '间隔相等', value: 'cols-space-around'}
        ]
    },
    computed:{
        cssMsg:function(){
            console.log(this)
            return this.cssText[this.selected];
        }
    }
})

 

终极在html中绑定通过computed方法取得数码也正是CSS:

<div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}  
            </code>
        </pre>
      </div>

支付好今后,能够一贯在chrome中运作来调节。打开扩充面板,勾选开发者方式,然后加载刚开发扩大所在的目录就足以一向运转了。

亚洲必赢官网 8

一体化的源代码已上传在附属类小部件,能够下下来直接运维。

三个简单易行的插件就成功了,通过那几个不难的chrome插件就能够体会到vuejs在web开发中总结、优雅的魔力,还有如何理由并非起来呢。

 

【有奖研讨】程序员,怎么应对30虚岁? 点击查看详情

迎接参与QQ群:374933367,与腾云阁原创笔者们一起调换,更有空子参预技术大咖的在线享受!

开始制作第一个插件

壮大如下图所示:

相关阅读

Vue.js前后端同构方案之准备篇——代码优化
Vue组件开发执行之scopedSlot的传递
Vue.js
实战总计


此文已由作者授权腾讯云技术社区宣布,转发请注解文章出处
原稿链接:
得到越来越多腾讯海量技术实施干货,欢迎我们前往腾讯云技术社区

 

 

 

  • 在电脑中开创七个目录来存放插件代码。
  • 在目录里面创立文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码
    1. {
    2.   “name”: “第一个Chrome插件”,
    3.   “version”: “1.0”,
    4.   “description”: “笔者的第贰个Chrome插件,基本上能用啊”,
    5.   “browser_action”: {
    6.     “default_icon”: “icon.gif”
    7.   }
    8. }

亚洲必赢官网 9

  • 把下边两张图片保存到文件夹中,分别取名icon.gif和smile.gif
    图片一: 亚洲必赢官网 10    
    图片二: 亚洲必赢官网 11
  • 设置这么些插件:
    a.点击右上角扳手,选用扩张程序,打开扩大中央。
    b.点击右上角的“开发人士情势”,使得前边的“+”变成“-”,打开相应的食谱。假设一初叶正是“-”,那么不用点击。
    c.点击“载入正在开发的扩大程序按钮”,导入刚才创设的文书夹。

同时还实时依照用户选取的对齐方式,展现相应的CSS代码,方便大家得以一贯拷贝代码使用。

一经一切顺遂,你的Chrome地址栏将会有个新图标,你的第三个插件诞生了。

Chrome插件开发基本知识

给第一个插件增加新功能

在应用公司中下载下来的插件基本上都是以.crx为文件后缀,该文件其实正是1个压缩包,包含插件所急需的html、css、javascript、图片能源等等文件。

你现在纵然做了第三个插件,但实则他并不曾兑现任何功用,大家点击图标,没有任何反响。上边大家就给他扩充点成效。

开发二个插件就跟大家一贯做web开发流程没多大的区分,正是先搭好宗旨的页面,然后使用js来写交互逻辑等成效。

  • 编辑manifest.json这些文件,用下边包车型客车代码替换现有的代码,其实我们只是加了一条龙代码和1个逗号而已。

    1.    “name”: “第一个Chrome插件”, 
    2.    “version”: “1.0”, 
    3.    “description”: “笔者的率先个Chrome插件,还不易啊”, 
    4.    “browser_action”: { 
    5.       “default_icon”: “icon.gif”, 
    6.       “popup”: “popup.html” 
    7.    }
    8. }
  • 下边我们成立3个文书文件popup.html,用记事本打开,将下边包车型地铁代码写进去

    1. <p>Hello,Chrome!</p>
    2. <p>小编的名字叫ChromeChina!</p>
    3. <p><a href=””
      target=”_blank”>Chrome中文论坛欢迎你</a>
    4. <p><img src=”smile.gif” /></p>

比如作者这些插件的目录文件如下:

  • 归来Chrome的恢宏焦点,点击插件下的“重新载入 ”。

亚洲必赢官网 12

近来点击插件图标看看。我们的率先个插件算是制作成功了。

manifest.json文件

打包插件

文件中须求注意一下的mainfest.json本条文件,那些json文件的效益是提供插件的各样音信,例如插件能够做的事务,以及插件的文书配置等等新闻。上面是一个清单文件的言传身教,

咱们想把本身创设的插件给其余人用,那么就必要将插件打包。

{
 "manifest_version": 2,
 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",
 "permissions": [
 "https://secure.flickr.com/"
 ],
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 }
}
  • 重返Chrome的插件增添中央,点击“打包扩张程序”按钮。
  • 选择刚刚创造的文件夹,点击明确生成后缀为crx和cpm文件各一个。

首先行表明大家应用清单文件格式的本子 2,必须带有(版本 1
是旧的,已弃用,不建议选拔)。

把crx文件发送给本人的恋人,告诉他们你也会创制chrome插件吧。

接下去的部分概念增加程序的名称、描述与版本。这个都会在 Chrome
浏览器中应用,向用户突显已安装的扩展程序,同时在 Chrome
网上应用店中向地下的新用户呈现你的恢宏程序。名称应当简练,描述不要比一句话左右还长(前边将会有愈多的空中用于更详细的讲述)。

您能够修改里面包车型地铁文字图片,制作出极具特性的扩张来了。

最终一片段首先请求权限,用于访问
上的数据,并注明该扩充程序完成了三个浏览器按钮,同时在这一进程中为它钦点3个暗中同意图标与弹出窗口。

倘使在炮制进度中有其余难点,欢迎到http://dev.chromechina.com来切磋交流。本文参考官方指南编写。

概念浏览器按钮时指向了八个财富文件:icon.png 与
popup.html。那八个能源都必须在壮大程序包中设有,图片是扩充的显得,html是扩大具体运作的根Kevin件。

二、概述

现实详尽的支出教程能够看看官方的本条文书档案,相当醒指标入门教程。

那篇小说翻译自。

职能达成-Vuejs实践

如若看完那篇小说,并且做过入门指南开中学的例子,你就足以真正开首支付属于自个儿的Chrome插件了。

总体插件的着力交互成效十分简单,如小说起初的动图所示,用户选取对齐形式,代码区域展现相应的代码。那种总结多少交互使用vuejs再适合可是了。

基础知识

那边需要注意的少数是,chrome 扩充的运营条件有一些特殊需求,称为 Content
Security Policy (CSP),使得一般的 vue 不能够被平常使用。借使用的是 vue
1.x,那么能够下载 csp 版本,在
这里。假使是 2.x
版本,请参见官网文书档案的这一段。

3个Chrome扩展是由HTML、CSS、JavaScript、图片等文件收缩而成。扩大实际上正是1个web页面,你能够用此外浏览器提须要web页面包车型客车接口,从XMLHttpRequest
到JSON ,再到HTML本地缓存都能够应用。

基本代码如下所示。

Chrome扩展能做哪些吧?大家必然使用过部分增加,会发觉某些扩展在Chrome地址栏右边区域扩充三个图标。还有些扩展能够和浏览器的片段要素(如书签、tab导航标签)交互。扩展还可以够和web页面交互,甚至是从web服务器获取数据。尤其详实的始末能够从Developer’s
Guide看到。

HTML:

Chrome扩展的组成文件
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <!-- 引入样式 -->
 <link rel="stylesheet" href="main.css" rel="external nofollow" >
 <link rel="stylesheet" href="mystique.css" rel="external nofollow" >
</head>
<body>
 <div id="app">
  <h1 class="title-box">flexbox对齐就是这么简单</h1>
 </div>
 <div id="type-select">
  <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
  </select>
  <!-- Selected: {{ selected }} -->
  <div class="resule-preview">
  <div v-bind:class="selected" class="cols">
   <div class="col col-3">
    <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
  </div>
  </div>
  <div class="resule-code">
  <pre class="code-display">
   <code class="code-lang">
    {{ cssMsg }}
   </code>
  </pre>
  </div>
 </div>
 <!-- 先引入 Vue -->
 <script src="vue.js"></script>
 <!-- 引入组件库 -->
 <script src="main.js"></script>
</body>
</html>

每一个扩大由下列文件组成:

CSS就不列出来了,可以在源代码中查阅。

  • 一个manifest文件(主文件,json格式)
  • 至少1个HTML文件(核心得以没有HTML文件)
  • JavaScript文件 (可选,非必须)
  • 别的其余你要求的文书(比如图片)

下边来选择vuejs来落到实处插件的功用。

当您付出二个扩大的时候,必要把那个文件放在2个文件夹里,当您公布这几个扩充的时候,那一个文件夹下的全数文件将会打包成八个奇异后缀.crx的ZIP文件。

效率达成

引用文件

动用 v-for 指令依照一组数组的选项列表实行渲染。 v-for 指令供给以 item in
items 格局的区别经常语法, items 是源数据数组并且 item
是数组成分迭代的小名。

您能够停舍弃何文件到你的恢宏里面,但是怎么调用那一个文件呢?一般的话,使用相对地址调用,类似HTML中调用文件。上边是个例证,在子文件夹images中有个图片myimage.png,大家能够这么调用它

而下拉框(select)列表的渲染,就能够使用vue中的v-for方法来渲染下拉列表选项,下拉选项数据写在js中的data对象中的options中。用v-bind方法来绑定option的value值,代码如下所示:

  1. <img src=”images/myimage.png”>
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
</select>

复制代码

在vuejs中能够用 v-model
指令在表单控件成分上开创双向数据绑定。它会基于控件类型自动采纳正确的措施来更新成分。那里在select中选取v-model方法来监听选中的值。

其间images/myimage.png表示那些文件。

为了能预览差别对齐的功效,先在CSS中写好和下拉框中值相同的呼应的类名样式,这样当用户选中不一致的值的时候能显得分歧的效率。

恐怕你注意到当使用谷歌(Google) Chrome
debugger查看那个文件的时候给,每一个文件的地方是上边那种格式

<div v-bind:class="selected" class="cols">
   <div class="col col-3">
    <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
</div>
  1. chrome-extension://<extensionID>/<pathToFile>

下拉框那块功效就这么,简简单单几行代码就贯彻了。想想借使用jquery可能是原生的js来贯彻均等的功能,不仅代码量要大并且写起来也未尝vuejs这么舒畅(英文名:Jennifer)。

复制代码

接下去是代码同步功用,即在代码区域突显对应flex对齐的CSS代码。

以此地址中,<extensionID>是你营造的扩大的绝无仅有标示符,约等于扩充的身份证号码。<pathToFile>是文件相对扩展拔尖文件夹得地方。

始于在此以前先讲讲vuejs中的computed属性方法,可总计属性 (computed
properties) 正是不设有于原有数据中,而是在运营时实时总结出来的属性。

manifest文件

对应到我们那个实例,就是当用户选拔flexbox区别的对齐情势的时候,及时联合对应的CSS代码到代码预览区域。不难起见,直接把多少个差别的代码写到js中:

主文件取名manifest.json,用来讲述这么些扩张,包涵扩大名字、版本、调用的文件、可用域等信息。上边是个杰出的manifest文件,这一个扩张可以调用google.com的剧情。

data: {
  selected: 'cols-center',
  cssText:{
   'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
   'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
   'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
  },
  options: [
   { text: '居中对齐', value: 'cols-center'},
   { text: '两端对齐', value: 'cols-space-between'},
   { text: '间隔相等', value: 'cols-space-around'}
  ]
 },
  1. {
  2.   “name”: “My Extension”,
  3.   “version”: “2.1”,
  4.   “description”: “Gets information from Google.”,
  5.   “icons”: { “128”: “icon_128.png” },
  6.   “background_page”: “bg.html”,
  7.   “permissions”: [“”,
    “],
  8.   “browser_action”: {
  9.     “default_title”: “”,
  10.     “default_icon”: “icon_19.png”,
  11.     “popup”: “popup.html”
  12.   }
  13. }

依照差异的名字对应区别的CSS代码。然后使用computed方法来依据用户选拔的值实时取出对应的CSS代码:

复制代码

computed:{
  cssMsg:function(){
   console.log(this)
   return this.cssText[this.selected];
  }
 }
扩展结构组成结构

完全代码如下:

多边恢弘有background文件,三个不可知的文本决定着整个扩张的周转。

var typeSelect = new Vue({
  el: 'body',
  data: {
  selected: 'cols-center',
  cssText:{
   'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
   'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
   'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
  },
  options: [
   { text: '居中对齐', value: 'cols-center'},
   { text: '两端对齐', value: 'cols-space-between'},
   { text: '间隔相等', value: 'cols-space-around'}
  ]
 },
 computed:{
  cssMsg:function(){
   console.log(this)
   return this.cssText[this.selected];
  }
 }
})

亚洲必赢官网 13

末段在html中绑定通过computed方法得到数码约等于CSS:

上面这些图形显示的浏览器至少安装了三个扩展:2个浏览器行为扩充(海洋蓝的图标),页面行为扩充(橄榄棕的图标)。这几个浏览器行为扩张的background文件是用3个HTML文件定义的(background.html),这么些background文件中有JavaScript代码控制总体浏览器的活动。

<div class="resule-code">
  <pre class="code-display">
   <code class="code-lang">
    {{ cssMsg }} 
   </code>
  </pre>
  </div>

HTML页面

支付好未来,能够直接在chrome中运作来调节。打开扩展面板,勾选开发者情势,然后加载刚开发扩张所在的目录就足以一直运转了。

background不是唯一设有的HTML文件,比如浏览器行为容许是弹出贰个小窗口,那几个小窗口的始末就能够调用3个HTML文件。Chrome扩张也能够用chrome.tabs.create()
or window.open()那种函数来彰显HTML文件。

全部的源代码已上传在附属类小部件,可以下下来直接运维。

扩展里面包车型地铁HTML文件能够并行走访对方的DOM结构,能够引用其余文件中定义的函数。

亚洲必赢官网 14

下边包车型大巴图显示了浏览器弹出二个窗口这么些效应的协会(那多亏大家最起先的例子)。这么些弹出窗口的情节是三个HTML的web文件,这么些弹出窗口不需求包括background文件中的代码,因为,popup.html和background是足以互相访问的。

三个回顾的插件就成功了,通过那一个大致的chrome插件就能够体会到vuejs在web开发中简易、优雅的吸重力,还有怎样说辞并非起来吧。

亚洲必赢官网 15

以上所述是笔者给大家介绍的vue.js 初体验之Chrome
插件开发实录,希望对大家有着补助,假若我们有其余疑问欢迎给自家留言,作者会及时还原大家的!

内容脚本(Content scripts)

借使您插件须求和网页交互,那么她就须要二个剧情脚本(Content
scripts),内容脚本常由JavaScript编写,会在网页载入完毕后调用。完全能够把内容脚本看做是网页的一有的,而不是扩展的一局地。

剧情脚本能够访问到眼下浏览器浏览的页面,而且还是能更改网页的展现格局(油猴脚本就是内容脚本)。上边包车型客车图纸中,内容脚本能够读取、更改网页的DOM。注意,他无法更改background.html中的内容。

亚洲必赢官网 16

内容脚本也不是和父扩展完全隔绝开来,他也足以和父级增添交流新闻。如下图中所示,内容脚本在意识3个奥迪Q5SS
Feed地址后将会给background.html发送二个新闻。或然background.html给内容脚本发送三个信息要求更改网页外观。

亚洲必赢官网 17

不等页面间的并行

叁个恢弘中的文件日常要求相互。由于扩张的兼具文件都由同一个进程执行,网页能够间接给别的页面发送命令。

可以应用类似chrome.extension methods such as getViews() and
getBackgroundPage()那样的艺术引用扩张中的方法。一旦页面中引用了其余的页面,第四个页面就足以调用别的页面包车型客车函数,甚至能够控制DOM。

结束语

好了,你早已大致驾驭了2个扩展程序的着力内容,能够起来创作本身的扩充了。

本文由ChromeChina翻译,转发申明出处

③ 、扩张图标

那是扩张开发指南的第一篇,前边大家第3作了第贰个扩张,然后学习了Chrome扩充的大概结构,看完后或许会稍为迷惑,别担心,相信随着大家学习的递进,大家日益发现大家已经得以做扩张了。当然为了做出美丽的扩充,大家还亟需学习有个别HTML、CSS、JavaScript的基础知识,网站就不易。

明日的小说翻译自,介绍Browser
Action,即左边的壮大图标。这节的始末照旧挺有趣的。(同样,有翻译须要改正的地点请建议来)

Browser
Actions的功效就是决定Chrome地址栏左侧添加三个图标。除了给chrome增添二个图标的效能外,仍是能够安装提示文字、图标标记、弹出窗口。

下图中,在地点栏左侧的绚丽多彩图标就是三个Browser Action。

亚洲必赢官网 18

Browser
Actions创制的图标是直接可见的,若是你想创建1个不是一向不可知的图标,能够行使page
action。

Browser Action在Manifest文件中的位置

上边是个在扩张的manifest文件中注册browser action的例子:

  1. {
  2.   “name”: “My extension”,
  3.   …
  4.   “browser_action”: {
  5.     “default_icon”: “images/icon19.png”, // required
  6.     “default_title”: “Google Mail”,      // optional; shown in
    tooltip
  7.     “default_popup”: “popup.html”        // optional
  8.   },
  9.   …
  10. }
UI部分

Browser Action必须有3个图标。同时还足以有提醒文字、图标标记、弹窗。

图标

Browser
Action的图标会被浏览器缩放成19px*19px大小,太大的图标是尚未意思的。

您能够用三种办法定义图标:用五个静态图片,大概用HTML中的canvas成分。用静态图片的话总结些,可是用canvas成分能够创设特别平缓的图形。

静态图片可以是随意常见格式的图样,包涵BMP, GIF, ICO, JPEG, or PNG。

咱俩能够在manifest文件中用default_icon语句来定义那一个图标,也足以调用setIcon()函数。

提醒文字

提示文字是指将鼠标移到扩充图标上显得的文字。大家得以在manifest中用default_title定义,也足以经过调用setTitle()函数。

图标标记

图标标记是指覆盖在扩张图标上的一些文字,比如Gmail提示图标上未读邮件数,P冠道查询工具上P卡宴值。由于标记的地点不大,他最四只好容纳5个字母。

安装标记文字或然背景可以分级选拔 setBadgeText() and
setBadgeBackgroundColor()。

弹窗

当大家点击一些扩张的时候,会发现有个小弹窗出现,比如我们一早先的事例中。这么些弹窗能够包蕴其余HTML内容,他的大大小小也是和情节自适应的。

给Browser
Action扩张弹窗能够在manifest的default_popup定义弹窗中呈现的html文件名字,当然也足以选择setPopup()函数。

几个小提醒

为了扩展尤其雅观,请遵循下列守则:

仅在这些扩充需求在半数以上页面运营的时候才使用browser action

仅在小片段页面起效果的话就毫无用browser action,而是用page actions。

运用显眼的图标

不用试图模仿chrome浏览器原有的扳手/页面图标,你的恢宏要新鲜一些。

您的图标边缘应该选用阿尔法透明,那样的话可以融合到各类不一样的浏览器宗旨里。

例子解析

冲动的时候来了,在这一个文件夹下examples/api/browserAction稍许browser
action的事例。在这之中有个set_page_color,大家试着再一次编排他。

首先大家领会,首先新建三个文书夹myExtension用来存放在全体文件,大家了然种种Chrome扩大供给有个manifest.json文件来叙述这些扩张,新建文件manifest.json,用文件编辑器打开,输入:

  1. {
  2.   “name”: “我的扩充实例”,
  3.   “version”: “1.0”,
  4.   “permissions”: [
  5.     “tabs”, “”, “”
  6.   ],
  7.   “browser_action”: {
  8.       “default_title”: “Set this page’s color.”,
  9.       “default_icon”: “icon.png”,
  10.       “popup”: “popup.html”
  11.   }
  12. }

那是贰个很简短的manifest.json文件模板,个中browser_action就是那篇作品降到的东西,default_title是描述,default_icon是图标,popup是弹窗。那里的弹窗调用了popup.html文件,大家再创造一个文件popup.html,popup.html是个一般的HTML文件,内容如下:

  1. <style>
  2. body {
  3.   overflow: hidden;
  4.   margin: 0px;
  5.   padding: 0px;
  6.   background: white;
  7. }
    1. div:first-child {
  8.   margin-top: 0px;
  9. }
    1. div {
  10.   cursor: pointer;
  11.   text-align: center;
  12.   padding: 1px 3px;
  13.   font-family: sans-serif;
  14.   font-size: 0.8em;
  15.   width: 100px;
  16.   margin-top: 1px;
  17.   background: #cccccc;
  18. }
  19. 亚洲必赢官网,div:hover {
  20.   background: #aaaaaa;
  21. }
  22. #red {
  23.   border: 1px solid red;
  24.   color: red;
  25. }
  26. #blue {
  27.   border: 1px solid blue;
  28.   color: blue;
  29. }
  30. #green {
  31.   border: 1px solid green;
  32.   color: green;
  33. }
  34. #yellow {
  35.   border: 1px solid yellow;
  36.   color: yellow;
  37. }
  38. </style>
  39. <script>
  40. function click(color) {
  41.   chrome.tabs.executeScript(null,
  42.       {code:”document.body.style.backgroundColor='” + color.id +
    “‘”});
  43.   window.close();
  44. }
  45. </script>
  46. <div onclick=”click(this)” id=”red”>red</div>
  47. <div onclick=”click(this)” id=”blue”>blue</div>
  48. <div onclick=”click(this)” id=”green”>green</div>
  49. <div onclick=”click(this)” id=”yellow”>yellow</div>

其一文件的始末有两种语言,HTML、CSS、JavaScript,这二种语言结合2当中央的网页,假设你还不是很清楚的话能够现在渐次学些。在那之中调用了Chrome接口函数chrome.tabs.executeScript,也是然后会师到的。整个文件的情趣是:一 、展现四格不一致颜色的矩形框,贰 、当点击这几个矩形框的时候变换页面背景观。

我们还索要三个图标突显在工具栏上,把这么些图形保存到文件夹中亚洲必赢官网 19

好了,我们的扩充制作完结了,载入他们测试一下啊!

设若有局地JavaScript知识,能够修改那一个扩大,创立一些丰裕多彩的效劳。

比如把popup.html中的

  1. function click(color) {
  2.   chrome.tabs.executeScript(null,
  3.       {code:”document.body.style.backgroundColor='” + color.id +
    “‘”});
  4.   window.close();
  5. }
  6. </script>
  7. <div onclick=”click(this)” id=”red”>red</div>
  8. <div onclick=”click(this)” id=”blue”>blue</div>
  9. <div onclick=”click(this)” id=”green”>green</div>
  10. <div onclick=”click(this)” id=”yellow”>yellow</div>

换成

  1. function click(color) {
  2.   chrome.tabs.executeScript(null,
  3.     
     {code:”document.getElementById(‘lg’).getElementsByTagName(‘img’)[0].src='” +
    color.title + “‘”});
  4.   window.close();
  5. }
  6. </script>
  7. <div onclick=”click(this)” id=”red”
    title=”;
  8. <div onclick=”click(this)” id=”blue”>blue</div>
  9. <div onclick=”click(this)” id=”green”>green</div>
  10. <div onclick=”click(this)” id=”yellow”>yellow</div>

在百度主页上开辟那一个扩充,点击第叁个按钮”谷歌”,能够把百度的logo换来google的。

肆 、选拔页面

你能够提供二个抉择页面(Options
Pages)让用户自定义你的恢宏。若是设置了增选页面,那么扩展管理页chrome://extensions将会有2个链接指向选项页面。

概念选项页面包涵两步:

1、在manifest中定义选项页
  1. {
  2.   “name”: “My extension”,
  3.   …
  4.   “options_page”: “options.html”,
  5.   …
  6. }

上例中,options_page代表选项页面,options.html是切实可行的文件地点。

2、编写选项页面

慎选页面是一个优异的网页,下边是三个选项页面包车型地铁例证:

  1. <html>
  2. <head><title>My Test Extension
    Options</title></head>
  3. <script type=”text/javascript”>
    1. // Saves options to localStorage.
  4. function save_options() {
  5.   var select = document.getElementById(“color”);
  6.   var color = select.children[select.selectedIndex].value;
  7.   localStorage[“favorite_color”] = color;
    1.   // Update status to let user know options were saved.
  8.   var status = document.getElementById(“status”);
  9.   status.innerHTML = “Options Saved.”;
  10.   setTimeout(function() {
  11.     status.innerHTML = “”;
  12.   }, 750);
  13. }
    1. // Restores select box state to saved value from localStorage.
  14. function restore_options() {
  15.   var favorite = localStorage[“favorite_color”];
  16.   if (!favorite) {
  17.     return;
  18.   }
  19.   var select = document.getElementById(“color”);
  20.   for (var i = 0; i < select.children.length; i++) {
  21.     var child = select.children[i];
  22.     if (child.value == favorite) {
  23.       child.selected = “true”;
  24.       break;
  25.     }
  26.   }
  27. }
    1. </script>
    1. <body onload=”restore_options()”>
    1. Favorite Color:
  28. <select id=”color”>
  29. <option value=”red”>red</option>
  30. <option value=”green”>green</option>
  31. <option value=”blue”>blue</option>
  32. <option value=”yellow”>yellow</option>
  33. </select>
    1. <br>
  34. <button onclick=”save_options()”>Save</button>
  35. </body>
  36. </html>
注意事项

早先时期版本的chrome大概不支持那个作用。

我们正布署提供一个暗中认可的css来驱动分歧扩大的选项页面保持风格一模一样,你能够从此处()查看最新的开始展览。

知识补充

地点的例证中使用LOCALSTORAGE保存数据,具体介绍能够查看《运用LOCALSTORAGE保存数据》

原文 

由ChromeChina翻译,转发评释出处

5、重置页面

重置是一种用自己提供的页面替换Google Chrome默认页面的方法。一个重置页面常常是用HTML、JavaScript、CSS组成。

当前,能够替换的页面只有新标新标签页,新标签页就是我们打开一个新标签时出现的页面。

我们可以把默认的新标签页:

替换成这种样式:

重置页面非常简单,只需在Manifest中定义自己的页面地址。比如下面的例子中,我们使用了newtab.html来重定义新标签页。

  1. {
  2.   "name": "My extension",
  3.   …
  4.   "chrome_url_overrides": {
  5.     "newtab": "newtab.html"
  6.   },
  7.   …
  8. }

几点注意事项

为了让你定义的新标签页看起来不错,请遵循下面几点建议:

  • 保持页面简洁,使得能够快速加载
    由于新标签页经常出现,外观就显得特别重要。比如我们要避免从远程调用数据,或者读取数据库资源。
  • 确保有<title>标签
    如果没有<title>,大家讲会看到页面的URL,这会让人很迷惑,我们应该包含这样一句 <title>New Tab’s Name</title>
  • 不要让键盘焦点在页面上
    我们应该让用户新建标签页的时候键盘焦点在地址栏上。
  • 不要模仿默认的新标签页面
    创建默认标签页的API(比如最近关闭的标签、最常访问的网站等等)不存在!你必须做出一些完全不同的东西。

例子

这儿examples/api/override有一些重置新标签页的例子。

其中有个我们至学习以来碰到的最简单的例子,把新标签页面换成空白页面

新建manifest.json文件:

  1. {
  2.   "name": "空白的新标签页",
  3.   "version": "0.1",
  4.   "chrome_url_overrides": {
  5.     "newtab": "blank.html"
  6.   }
  7. }

新建文件blank.html作为默认标签页,我们可以只写这样一句话:

  1. <title>新标签页</title>

好的,看看效果吧,就这么简单,你现在就可以动手DIY了。

原文 http://code.google.com/chrome/extensions/override.html
ChromeChina翻译,转载注明出处http://dev.chromechina.com/

如上小说均转自
Chrome扩充插件开发论坛

网站地图xml地图