回顾的Chrome 扩大开采

2019-10-11 12:49 来源:未知

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是扩展具体运行的基础文件。

具体详细的开发教程可以看看官方的这个文档,非常简明的入门教程。

仅在小部分页面起作用的话就不要用browser action,而是用page actions。

Chrome插件开发基本知识

在应用商店中下载下来的插件基本上都是以.crx为文件后缀,该文件其实就是一个压缩包,包括插件所需要的html、css、javascript、图片资源等等文件。

开发一个插件就跟我们平时做web开发流程没多大的区别,就是先搭好基本的页面,然后使用js来写交互逻辑等功能。

比如我这个插件的目录文件如下:

图片 1

  • 在计算机中创建一个目录来存放插件代码。
  • 在目录里面创建文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码
    1. {
    2.   "name": "第一个Chrome插件",
    3.   "version": "1.0",
    4.   "description": "我的第一个Chrome插件,还不错吧",
    5.   "browser_action": {
    6.     "default_icon": "icon.gif"
    7.   }
    8. }

功能实现-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><!-- 引入样式 -->

以上文章均转自 Chrome扩展插件开发论坛

背景

对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用。但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好。

需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢?

作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中碰到一些需要使用到Animate.css中的动画效果时,可以大大的提高我们的开发效率。

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

作为一个程序员,捣鼓些小工具,不但可以学些新技术还可以提高我们的开发效率,何乐而不为呢。

下面就以一个简单的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的开发体验和效率。

扩展如下图所示:

图片 2

插件主要功能是根据用户选择的对齐方式,实时预览效果和显示对应的CSS代码,方便我们可以直接拷贝代码使用。

1、在manifest中定义选项页

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

2017/05/16 · JavaScript · Chrome, vuejs

原文出处: janilychen   

图片 3

功能实现

使用 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这么舒服。

接下来是代码同步功能,即在代码区域显示对应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中运行来调试。打开扩展面板,勾选开发者模式,然后加载刚开发扩展所在的目录就可以直接运行了。

图片 4

一个简单的插件就完成了,通过这一个简单的chrome插件就可以体验到vuejs在web开发中简单、优雅的魅力,还有什么理由不用起来呢。

1 赞 5 收藏 评论

图片 5

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

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

下面来使用vuejs来实现插件的功能。

我们还需要一个图标显示在工具栏上,把这个图片保存到文件夹中图片 6

图片 7

不要试图模仿chrome浏览器原有的扳手/页面图标,你的扩展要独特一些。

原文 

注意事项

下图中,在地址栏右侧的彩色图标就是一个Browser Action。

使用显眼的图标

这个地址中,<extensionID>是你制作的扩展的唯一标示符,也就是扩展的身份证编号。<pathToFile>是文件相对扩展顶级文件夹得位置。

弹窗

激动人心的时候来了,在这个文件夹下examples/api/browserAction有些browser action的例子。其中有个set_page_color,我们试着重新编写他。

一个扩展中的文件常常需要交互。由于扩展的所有文件都由同一个进程执行,网页能够直接给其他页面发送命令。

  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. }

下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口的内容是一个HTML的web文件,这个弹出窗口不需要包含background文件中的代码,因为,popup.html和background是可以互相访问的。

你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面,那么扩展管理页chrome://extensions将会有一个链接指向选项页面。

我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致,你可以从这里()查看最新的进展。

你可以放置任何文件到你的扩展里面,但是怎么调用这些文件呢?一般来说,使用相对地址调用,类似HTML中调用文件。下面是个例子,在子文件夹images中有个图片myimage.png,我们可以这样调用它

复制代码

四、选择页面

  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. }

当你开发一个扩展的时候,需要把这些文件放在一个文件夹里,当你发布这个扩展的时候,这个文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。

我们想把自己制作的插件给其他人用,那么就需要将插件打包。

今天的文章翻译自,介绍Browser Action,即右侧的扩展图标。这节的内容还是挺有趣的。(同样,有翻译需要改进的地方请指出来)

上面的例子中使用LOCALSTORAGE保存数据,具体介绍可以查看《使用LOCALSTORAGE保存数据》

  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>

图标标记

可以使用类似chrome.extension methods such as getViews() and getBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面,第一个页面就可以调用其他页面的函数,甚至可以控制DOM。

  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. }

扩展里面的HTML文件可以互相访问对方的DOM结构,可以引用其他文件中定义的函数。

  • 回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
  • 选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。
开始制作第一个插件
  • 回到Chrome的扩展中心,点击插件下的“重新载入 ”。

早期版本的chrome可能不支持这个功能。

绝大部分扩展有background文件,一个不可见的文件控制着整个扩展的运行。

如果你插件需要和网页交互,那么他就需要一个内容脚本(Content scripts),内容脚本常由JavaScript编写,会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分,而不是扩展的一部分。

图片 8

五、重置页面

例子解析

我们可以在manifest文件中用default_icon语句来定义这个图标,也可以调用setIcon()函数。

给Browser Action增加弹窗可以在manifest的default_popup定义弹窗中显示的html文件名字,当然也可以使用setPopup()函数。

  • 编辑manifest.json这个文件,用下面的代码替换现有的代码,其实我们只是加了一行代码和一个逗号而已。

    1.    "name": "第一个Chrome插件", 
    2.    "version": "1.0", 
    3.    "description": "我的第一个Chrome插件,还不错吧", 
    4.    "browser_action": { 
    5.       "default_icon": "icon.gif", 
    6.       "popup": "popup.html" 
    7.    }
    8. }
  • 下面我们创建一个文本文件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>

这是一个很简单的manifest.json文件模板,其中browser_action就是这篇文章降到的东西,default_title是描述,default_icon是图标,popup是弹窗。这里的弹窗调用了popup.html文件,我们再创建一个文件popup.html,popup.html是个普通的HTML文件,内容如下:

  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>

提示文字

内容脚本可以访问到当前浏览器浏览的页面,而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。下面的图片中,内容脚本可以读取、更改网页的DOM。注意,他不能更改background.html中的内容。

你可以用两种方法定义图标:用一个静态图片,或者用HTML中的canvas元素。用静态图片的话简单些,但是用canvas元素可以创建更加平滑的图片。

打包插件

本文由ChromeChina翻译,转载注明出处

如果有一些JavaScript知识,可以修改这些扩展,创建一些丰富多彩的效果。

现在点击插件图标看看。我们的第一个插件算是制作成功了。

background不是唯一存在的HTML文件,比如浏览器行为可能是弹出一个小窗口,这个小窗口的内容就可以调用一个HTML文件。Chrome扩展也能够用chrome.tabs.create() or window.open()这种函数来显示HTML文件。

三、扩展图标

图标标记是指覆盖在扩展图标上的一些文字,比如Gmail提醒图标上未读邮件数,PR查询工具上PR值。由于标记的位置很小,他最多只能容纳4个字母。

下面是个在扩展的manifest文件中注册browser action的例子:

这个文件的内容有三种语言,HTML、CSS、JavaScript,这三种语言组成一个基本的网页,如果你还不是很清楚的话可以以后慢慢学些。其中调用了Chrome接口函数chrome.tabs.executeScript,也是以后会看到的。整个文件的意思是:1、显示四格不同颜色的矩形框,2、当点击这些矩形框的时候变换页面背景色。

扩展结构组成结构
知识补充

选项页面是一个典型的网页,下面是一个选项页面的例子:

准备工具

仅在这个扩展需要在大部分页面运行的时候才使用browser action

复制代码

Chrome扩展的组成文件

要是在制作过程中有任何问题,欢迎到http://dev.chromechina.com来讨论交流。本文参考官方指南编写。

内容脚本(Content scripts)

由ChromeChina翻译,转载注明出处

Browser Action在Manifest文件中的位置

其中images/myimage.png表示这个文件。

一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一个web页面,你可以用任何浏览器提供给web页面的接口,从XMLHttpRequest 到JSON ,再到HTML本地缓存都可以使用。

这是扩展开发指南的第三篇,前面我们首先作了第一个扩展,然后学习了Chrome扩展的大概结构,看完后可能会有些迷惑,别担心,相信随着我们学习的深入,我们渐渐发现我们已经可以做扩展了。当然为了做出优秀的扩展,我们还需要学习一些HTML、CSS、JavaScript的基础知识,网站就不错。

  • 把下面两张图片保存到文件夹中,分别取名icon.gif和smile.gif
    图片一: 图片 9     图片二: 图片 10
  • 安装这个插件:
    a.点击右上角扳手,选择扩展程序,打开扩展中心。
    b.点击右上角的“开发人员模式”,使得前面的“ ”变成“-”,打开相应的菜单。如果一开始就是“-”,那么不用点击。
    c.点击“载入正在开发的扩展程序按钮”,导入刚才创建的文件夹。
几个小提醒

不同页面间的交互

图标

把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。

  1. <img src="images/myimage.png">

这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。好吧,我们现在就开始,其实我也是个新手。

  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>

HTML页面

基础知识

内容脚本也不是和父扩展完全隔离开来,他也可以和父级扩展交换信息。如下图中所示,内容脚本在发现一个RSS Feed地址后将会给background.html发送一个信息。或者background.html给内容脚本发送一个信息要求改变网页外观。

比如把popup.html中的

定义选项页面包括两步:

Chrome扩展能做什么呢?我们肯定使用过一些扩展,会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互,甚至是从web服务器获取数据。更加详细的内容可以从Developer's Guide看到。

  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>

上面这个图片显示的浏览器至少安装了两个扩展:一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html),这个background文件中有JavaScript代码控制整个浏览器的活动。

提示文字是指将鼠标移到扩展图标上显示的文字。我们可以在manifest中用default_title定义,也可以通过调用setTitle()函数。

主文件取名manifest.json,用来描述这个扩展,包括扩展名字、版本、调用的文件、可用域等信息。下面是个典型的manifest文件,这个扩展可以调用google.com的内容。

好了,我们的扩展制作完成了,载入他们测试一下吧!

设置标记文字或者背景可以分别使用 setBadgeText() and setBadgeBackgroundColor()。

图片 11

  • 一个manifest文件(主文件,json格式)
  • 至少一个HTML文件(主题可以没有HTML文件)
  • JavaScript文件 (可选,非必须)
  • 任何其他你需要的文件(比如图片)

复制代码

你的图标边缘应该使用alpha透明,这样的话可以融合到各种不同的浏览器主题里。

Browser Action必须有一个图标。同时还可以有提示文字、图标标记、弹窗。

一、入门

当我们点击一些扩展的时候,会发现有个小弹窗出现,比如我们一开始的例子中。这个弹窗可以包含任何HTML内容,他的大小也是和内容自适应的。

也许你注意到当使用Google Chrome debugger查看这些文件的时候给,每个文件的地址是下面这种格式

你现在虽然做了第一个插件,但实际上他并没有实现任何功能,我们点击图标,没有任何反应。下面我们就给他增加点功能。

换成

上例中,options_page代表选项页面,options.html是具体的文件地址。

重置是一种用自己提供的页面替换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插件了。

  • 记事本,用来编写代码
  • Chrome浏览器,这个不能少吧。Windows下,所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本,Mac下载dev版本。

为了扩展更加美观,请遵守下列守则:

好了,你已经大概了解了一个扩展程序的基本内容,可以开始写作自己的扩展了。

二、概述

首先我们知道,首先新建一个文件夹myExtension用来存放所有文件,我们知道每个Chrome扩展需要有个manifest.json文件来描述这个扩展,新建文件manifest.json,用文本编辑器打开,输入:

你可以修改里面的文字图片,制作出极具个性的扩展来了。

  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "options_page": "options.html",
  5.   ...
  6. }

Browser Actions创建的图标是一直可见的,如果你想创建一个不是一直不可见的图标,可以使用page action。

  1. chrome-extension://<extensionID>/<pathToFile>

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

UI部分

在百度主页上打开这个扩展,点击第一个按钮"Google",可以把百度的logo换成google的。

图片 12

结束语

引用文件

给第一个插件增加新功能
2、编写选项页面

这篇文章翻译自。

Browser Action的图标会被浏览器缩放成19px*19px大小,太大的图标是没有意义的。

Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外,还可以设置提示文字、图标标记、弹出窗口。

做任何事情都要有个工具,制作chrome插件需要的工具很少。

manifest文件

每个扩展由下列文件组成:

图片 13

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:回顾的Chrome 扩大开采