Chrome扩展（extension）开发与分享

扩展（extension）还是插件（plugin）


举些插件栗子

  • Macromedia Flash
  • Microsoft Silverlight
而扩展
  • Microsoft Silverlight
  • Google Voice extension for Chrome

更多

我希望

  • 你能自豪的跟别人说：我一分钟内就给你开发个Chrome扩展（Hello,World!）出来！


  • 你能自己动手或有种冲动去开发一些实用的扩展出来


  • 总之，有所收获

Chrome扩展

  • 工作原理
本质上就是一个独立于浏览器内的web页面，通过调用浏览器提供的“接口”：Content scripts、Background pages、Page actions、Browser actions，对tab页面进行修改、扩展，从而达到丰富页面功能，提升用户体验。

  • 可以做些什么
我们会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互，甚至是从web服务器获取数据。
                 

Chrome 扩展组成结构


    每个扩展都应该包含下面的文件：

  •  一个manifest.json文件
  • 一个或多个html文件
  • 可选的一个或多个javascript文件可选的任何需要的其他文件，例如图片等。

manifest.json文件

  • 每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的文件，叫manifest.json，里面提供了重要的信息 。

{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",
  "manifest_version": 2,
  // 建议提供的字段
  "description": "A plain text description",
  "icons": { ... },
  // 二选一，或者都不提供
  "browser_action": {...},
  "page_action": {...},
  // 根据需要提供
  "background": {...},
  "content_scripts": [...],
  "permission":[...]   ......
}

browser_action

  • 用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。

  "browser_action": {
    "default_icon": "images/icon19.png", // 图标
    "default_title": "Google Mail",      // optional; shown in tooltip 
    "default_popup": "popup.html"        // 点击时弹出的页面
  },

browser_action

  • 下图显示了一个browser action的弹窗的架构。弹窗的内容是由HTML文件（popup.html）定义的web页面。它不必复制背景页面(background.html)里的代码，因为它可以直接调用背景页面中的函数。

page_action

  • 同browser actions一样，page actions 可以有图标、提示信息、 弹出窗口。但没有badge，也因此，作为辅助，page actions可以有显示和消失两种状态。
  • page actions定义需要处理的页面的事件，但是如果它们不是适用于所有页面的，只在少数网页上使用的功能请不要使用browser actions，使用page actions代替。 

  "page_action": {
    "default_icon": "icons/foo.png", // 图标
    "default_title": "Do action",    // optional; shown in tooltip 
    "default_popup": "popup.html"    //  点击后弹出的页面
  },

background

  • 背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。
  • 一般，背景页不需要任何HTML，仅仅需要js文件，比如：

 "background": {
    "scripts": ["background.js"]
  },
  • 如果您的确需要自己的背景页，可以使用page字段，比如：
 "background": {
    "page": "background.html"
  },

之间的关系

  • 绝大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。

上图显示了安装了两个应用（扩展）的浏览器。两个应用（扩展）分别是黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。

content_scripts

  • Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
  • 下面是content scipt可以做的一些事情范例：
  1. 从页面中找到没有写成超链接形式的url，并将它们转成超链接。
  2. 放大页面字体使文字更清晰

简单的说，就是在当前页面插入javascript脚本 并执行

 "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],//匹配站点注入
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],

content_script

  • 编程式注入

 /* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,
                           {code:"document.body.bgColor='red'"});
});

/* in manifest.json */
"permissions": [
  "tabs", "http://*/*"
],
当浏览器显示一个http网页并且用户点击了扩展的browser action按钮后，扩展会将页面的bgcolor属性设置为红色。 如果这个页面没有用css设置它的背景颜色的话， 它会变成红色。
 //一般来说，可以将代码放在文件里面而不是像上面那个例子那样直接注入。 可以这样写：
chrome.tabs.executeScript(null, {file: "content_script.js"});

之间的关系

  • 下左图显示了一个content script可以读取并修改当前页面的DOM树。但是它并不能修改它所在应用（扩展）的背景页面的DOM树。

一个content script脚本可以与所在的应用（扩展）交换消息，如上右图所示。例如，当一个content script从页面中发现一个RSS种子时，它可以发送一条消息。或者由背景页面发送一条消息，要求content script修改一个网页的内容。

页面间的通信

  • 一个扩展中的HTML页面间经常需要互相通信。由于一个扩展的所有页面是在同一个进程的同一个线程中运行的，因此它们之间可以直接互相调用各自的函数。


  • 可以使用chrome.extension中的方法来获取扩展中的页面，例如getViews()和getBackgroundPage()。一旦一个页面得到了对应扩展中其它页面的引用，它就可以调用被引用页面中的函数，并操作被引用页面的DOM树。

如何开发


首先，你需要准备：


Hello,World!
  • 通过browser_action 

 //manifest.json文件
{
"name": "Hello,World!",
"manifest_version": 2,
"version": "1.0",
"description": "demo-hello,world",
"icons": { "128": "icon.jpg" },

"browser_action": {
"default_title": "hello,world",
"default_icon": "icon.jpg",
"default_popup" :"popup.html"
}
}

 <!-- popup.html -->
<h1>Hello,World!</h1>

实例二

  • 在指定页面加入“返回顶部按钮”

{
"name": "Back2Top",
"manifest_version": 2,
"version": "1.0",
"description": "Back2Top",
"icons": { "128": "icon.jpg" },
"content_scripts": [{
"matches": ["http://open.chrome.360.cn/*"],
"js": ["js/cs.js"]
}],
"page_action":{
    "default_icon":"top.png",
    "default_title":"back2top",
    "default_popup":"popup.html"
},
"background": {
    "scripts": ["js/bg.js"]
  },
"permissions":[
    "tabs"
]
}



  • cs.js
文件 
 var img = document.createElement("img");
img.id = "gotop";
img.src = "http://img-chilezhang.qiniudn.com/top.png";
img.setAttribute("style","position: fixed;bottom: 113px;z-index: 99;right: 50px;cursor:pointer;opacity: 0.5;");
img.onclick = function (){ 
    go = function() {
        var height = document.documentElement.scrollTop || document.body.scrollTop;
        var speed = -50 - height / 10;
        window.scrollBy(0, speed);
        if(height == 0) clearInterval(scrolldelay);
    }
    scrolldelay = setInterval(go, 10); 
}
img.onmouseover = function() {
    this.style.opacity = 1;
}
img.onmouseout = function() {
    this.style.opacity = 0.5;
}
document.body.appendChild(img);

  • bg.js

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(tab.url.indexOf('open.chrome.360.cn') > 0) {
        chrome.pageAction.show(tabId);
    }
});
  • popup.html
 <html>
<head>
    <title></title>
</head>
<body>
<h1>Back2Top</h1>
</body>
</html>

分享




这些好用的扩展，你造吗？


Clover  for  Windows Explorer

  • Clover 是 Windows Explorer 资源管理器的一个扩展，为其增加类似谷歌 Chrome 浏览器的多标签页功能。



还有么？




谢谢！

by

zhili.zhang

Chrome扩展（extension）开发与分享

By chilezhang

Made with Slides.com

Chrome扩展（extension）开发与分享

  • 1,888

More from chilezhang