>

插件开垦

- 编辑:至尊游戏网站 -

插件开垦

使用React.js开发Chrome插件

2018/07/09 · JavaScript · Chrome, 插件

原稿出处: UncleChen   

写在开头: 异经常风趣的UI分界面,编码完毕,浏览速度.对于一天浏览器采纳超越11个时辰的人的话,可以定制本身的浏览器,是生机勃勃对豆蔻年华的富有魔力. 

一、背景

深信看见那篇小说的人应有都用过Chrome插件吧,近日正巧有个那上边的须求,小编就把Chrome插件的连带知识学习了瞬间,开掘其实Chrome插件的开拓和大前端Web开辟的稿本是豆蔻年华律的,无非正是runtime只限于Chrome浏览器,並且能够调用Chrome提供的生机勃勃部分chrome.* API来兑现部分依据Chrome浏览器的小效率。这里非要类比的话,笔者知道chrome.* API就疑似大家付出Hybird应用相同,供给有叁个bridge层来提供底层原生的力量给js。笔者是做Android开荒出生的,那只是本人的私人商品房掌握,可能对大Web技能的知情照旧非常不够。

事实上Chrome上的插件,从UI上主要分为两类:大器晚成类是浏览器按键(BrowserAction),另风流潇洒类是页面按键(PageAction)。两者的支出一模二样,作者那边几天前珍视介绍的天下无双不是Chrome插件开采,而是什么利用React.js来开拓Chrome插件,本文先简介下Chrome插件的开采和ReactJS,最终介绍如何利用推文(Tweet卡塔尔(قطر‎官方推荐的creat-react-app脚手架来开采Chrome插件。

Getting Started 
1:如今不帮忙规范发布版本的Chrome插件增添,但是也是有消息随时就开辟了,对于咱们这么些小意思.4.0使用中 
2:创造多少个所不可缺少的文件夹,名字自便,用于贮存所需文件,开荒后,能够透过Chrome打包提交 
3:manifest.json文件,存放描述新闻,也得以精通为插件运转的总入口,使用JSON的格式实行定义 

  "name": "My First Extension", //程序名称 
  "version": "1.0", //版本 
  "description": "The first extension that I made.",//描述 
  "browser_action": {//对浏览器的操作 
    "default_icon": "icon.png"//图标 
  }, 
  "permissions": [ //权限,用于定义所需的网络能源 
    "" 
  ] 

4:可以在browser_action中对效果实行增添 
"popup": "popup.html"//内定点击按键后触发的行事, 

二、Chrome插件开荒功底知识

上边是笔者看的几篇教程,轻易看一下应该就能够算Chrome插件速成了:

  • 入门:创建 Chrome 增添程序
  • Chrome 扩张开拓文书档案
  • Chrome扩张及运用开垦

简轻松单的话,二个最基本Chrome插件应用必要有叁个manifest.json清单文件,这几个文件日常长这么:

JavaScript

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

那个文件里描述了插件应用的有些个性,如名称、版本、须求的权能、分界面的应和的html文件名等等。额!!乍生机勃勃看怎么和AndroidManifest.xml的功能这么像啊?是的大兄弟!!恭喜你对才能的敞亮已经贯通了!

依据manifest.json文件能够观望,三个Chrome插件起码得有:manifest.json文件,icon.pngLogo和popup.html文件。当然文件名能够随意改,只要和manifest.json里声称的后生可畏律就能够。

此处就不浪费时间具体说怎么支付插件了,各路前端大牌比作者强100倍。但本身只强调一点,那就是popup.html中引用的js文件只好是外表引进,不能在popup.html文件之中写js代码。所以平常大家还应该有见到popup.js文件。其它假诺你想精通本身行使的插件有如何秘密,完全能够去Chrome浏览器的安装目录上边把它们给扒出来。。

5:弹出的html扩张名文件,进行编写制定弹出窗编写,允许利用Js and css,使用的时候注意HTML必需含有在文书夹内 
进一层提议,此中能够利用HTML5正式的因素 
插件包罗的文书 
1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件 
装进后会被压缩成特殊格式的zip文件,扩展名叫.crx 

三、React JS底子知识

React.js无需多说了吧,从React这一个词在本领界诞生起,就是风流洒脱颗超新星,连自个儿这种死抱着Native技能的人都不能不去读书它。。

简短扯两句React JS的话题(React Native后一次加以),作为二个Android App/SDK开拓,小编从没开辟过太多守旧意义上的Web页面,可是通过本身学习了差不离一周多的时刻,作者意识React JS开垦Web页面包车型客车笔触其实和客户端很像,不去用jQuery/Zepto啊操作DOM,而是关切数据本身,以多少驱动去退换分界面。重构写好了静态html后,哪块地点须求扭转,你就把什么地方造成贰个变量放到组件的State/Props里面(至于组件怎么切分,哪个数据放State,哪个放Prop不是前几日要探讨的话题),然后就只用关爱数据的转换,然后setState一下分界面就能够刷新了。精晓了那一点,就能够开掘实际开辟Web页面很简短。比起操作DOM,一些模板引擎之类的东西,笔者觉着React那几个思量非常轻巧采取,写起来也很安适,完全未有这种混乱的认为,何况未来ReactJS生态圈相当的大,诸如Redux那类的库使得ReactJS尤其的犀利,很多商厦现已用得飞起了。

扯得有一点远了,ReactJS开辟本人引入我们就看推文(Tweet卡塔尔国官方的自己要作为榜样据守规则就够了。拉脱维亚语倒霉的心上人能够看看阮黄金时代峰先生的博客,大概看看那篇入门教程也是阔以的。

background page :用于保存插件的首要逻辑, 
插件的逻辑分为: page action,browser action二种,,background.html文件的js同一时候调节二种action 

四、应该用哪个脚手架?

本来是推特官方推荐的creat-react-app。张开终端,依次输入:

JavaScript

npm install -g create-react-app create-react-app my-app cd my-app/

1
2
3
npm install -g create-react-app
create-react-app my-app
cd my-app/

接下来就在my-app上面见到那几个文件了。

JavaScript

my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ App.css App.js App.test.js index.css index.js logo.svg registerServiceWorker.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

到此甘休,是三个标准的ReactJS编写WebApp的步骤,在终端输入npm start,就足以在浏览器中做客当地的localServer了。

action,能够清楚为动作,也正是浏览器表现出来的行为,如弹出窗相符 
browser_action 包括 a tooltip, a badge, and a popup. 

1.怎么让那几个类型扶植Chrome插件开采呢?

前面介绍了,Chrome插件最重要的文件就是manifest.json清单文件。大家先看下脚手架给大家私下认可生成的manifest.json长啥样:

JavaScript

{ "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

对于多个习感到常的WebApp来讲,manifest.json文件在缓存、离线方式以至新型的PWA场景下会起效果,可是此间大家是要花销Chrome插件,那么把它原来的剧情通通删掉,改成你的Chrome插件所供给的格式和内容就好了。比方能够改成这么:

JavaScript

{ "manifest_version": 2, "name": "MyChromeExt", "description": "My first chrome extension.", "version": "1.0.0", "icons": { "16": "img/icon-16.png", "128": "img/icon-128.png" }, "browser_action": { "default_icon": { "19": "img/icon-19.png", "38": "img/icon-38.png" }, "default_title": "MyChromeExt", "default_popup": "index.html" }, "permissions": [ "tabs" ], "background": { "scripts": ["background.js"] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "manifest_version": 2,
  "name": "MyChromeExt",
  "description": "My first chrome extension.",
  "version": "1.0.0",
  "icons": {
"16": "img/icon-16.png",
"128": "img/icon-128.png"
},
  "browser_action": {
    "default_icon": {
"19": "img/icon-19.png",
"38": "img/icon-38.png"
},
    "default_title": "MyChromeExt",
    "default_popup": "index.html"
  },
  "permissions": [
    "tabs"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

这边尽可能对脚手架的东西做最小的改动,把default_popup的文件名改成了index.html,因为脚手架暗许会把js文件都打包到三个main.js文件中,并在index.html中插入这么些main.js。

咱俩运转一下npm run build指令,就能够意识生成了七个my-app/build目录,那几个目录便是大家得以在chrome://extensions/去加载的插件目录,当然也足以用Chrome把这几个目录打包成贰个crx插件。

应用creat-react-app脚手架开辟Chrome插件的中坚办法就是如此了,可是在实际上中我们会遇见不少的主题材料,临时照旧会想要运营npm run eject,然后去完全自定义webpack.config.js来贯彻打包。

能够在Manifest文件中注册所需的browser action,当中default_icon为必得的,别的均为可选(or卡塔尔 

2.background.js怎么打包?

咱俩在开垦插件的时候,极度大概须求运用后台的background.js,原因如下:

精心:不要在popup页面包车型客车js空间变量中保留数据。由于popup页面只在顾客点击Logo时才会开启,当客商关闭这一个页面时就能够结束,并从未一个持久的实例分配给popup页面。所以每当客户张开popup页面时,它都是全新的,早先封存在变量中的数据都会消逝。如若急需经过popup页面保存客商的数量,能够因而通信将数据交到后台页面(background页面)管理,可能经过localStorage和chrome.storage将数据保存在客户的硬盘上。

因此background.js最终也是要跻身到大家的宣布文件夹上面的,这里提出如故要一心一德最低水平地改过脚手架的安装,建议不用npm run eject之后来改革webpack的布局,因为实际是的确有一点点复杂。

此次校勘下package.json文件:

JavaScript

{ "name": "my-app", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "1.0.7" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "build-chrome-ext": "react-scripts build && cp src/background.js build/background.js" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-chrome-ext": "react-scripts build && cp src/background.js build/background.js"
  }
}

能够看出大家加多了一个下令npm run build-chrome-ext,并把background.js丢到了build目录下。如若您还应该有别的的js,小编建议在my-app/src下树立一个my-app/src/chrome文本夹,专项使用于存在chrome相关其余js代码,然后在build的时候统一丢到build里面。假若要minify那一个js,相通能够应用&&艺术去增多命令。改进

UI部分 
Icon:繁多图片格式都得以,推荐使用19像素的纺锤形图片,设置的点子分为三种,manifest文件内的default_icon,可能调用setIcon(卡塔尔方法 
Tooltip:设置manifest的default_title属性,或调用setTitle()方法 
Badge:用于在图标下显得的字符,字数节制在4个字符一下,能够经过setBadgeText(卡塔尔(英语:State of Qatar)and setBadgeBackgroundColor(卡塔尔国设置剧情和背景观 
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 

3.须要注意的底细

出于采纳了意气风发部分chrome.* API,大家要求在编写翻译js的时候将chrome本条大局对象声圣元(Synutra卡塔尔(英语:State of Qatar)(Karicare卡塔尔(قطر‎下。

creat-react-app这一个脚手架在非eject模式下,不可能修正ESlint的布局来加多global对象,只好在动用了 chrome.* API的代码处增多 // eslint-disable-line 注释来贯彻保证编写翻译通过。

倘若您曾经npm run eject了,在eject模式下,可以在package.json文本里配置ESLint:

JavaScript

"eslintConfig": { "extends": "react-app", "globals": { "chrome": true } }

1
2
3
4
5
6
"eslintConfig": {
"extends": "react-app",
"globals": {
  "chrome": true
  }
}

chrome.browserAction的常用方法,当中参数使用json对象,具体查占星应的API查询key 

五、其余脚手架推荐

而外自个儿更正照片墙推荐的creat-react-app外,上面多个脚手架也好不轻松客户超级多的,特意用于支付Chrome插件的脚手架。

  • :默许协助ReactJS,基于webpack。
  • :未有默许匡助ReactJS,须求和谐修正,基于gulp打包。

    1 赞 收藏 评论

图片 1

setBadgeBackgroundColor: 设置Badge背景色 
chrome.browserAction.setBadgeBackgroundColor(object details); 

setBadgeText:Badge内容 
chrome.browserAction.setBadgeText(object details) 

setIcon:设置Logo 
chrome.browserAction.setIcon(object details) 

shetTitle:设置Tooltip 
chrome.browserAction.setTitle(object details) 

browserAction的事件 
chrome.browserAction.onClicked.addListener(function(Tab tab卡塔尔 {...}卡塔尔; //将会在点击Logo后触发 
//这里的参数,比Js多了风流罗曼蒂克种等级次序 

2:为插件提供相应的options选项页面,在manifest文件中增多对应的options_page:选项,使用HTML 
"options_page": "options.html", 

所需的HTML可以为贰个意气风发体化格式的HTML文书档案,饱含所需的html元素 

Override分界面: 用于替换新tab分界面,差异于默许的分界面,在manifest文件中开展注册 
"chrome_url_overrides": { 
    "newtab": "newtab.html" 
  }, 

Page Actions: 用于出以往钦定页面中的Logo 
"page_action": { 
    "default_icon": "icons/foo.png", // required 
    "default_title": "Do action",    // optional; shown in tooltip 
    "popup": "popup.html"            // optional 
  }, 
分别Browser action,page action并不含有badges,不过足以垄断page action是不是出示,通过调用 show(卡塔尔(英语:State of Qatar) and hide(卡塔尔(قطر‎ methods 

少年老成律对browser的建议也适用与page action; 

有的何足为奇Page action的艺术 
hide;  
chrome.pageAction.hide(integer tabId) 
setIcon 
chrome.pageAction.setIcon(object details) 
setTitle 
chrome.pageAction.setTitle(object details) 
show 
chrome.pageAction.show(integer tabId) 
事件,类似browser action的事件 
onClicked 
chrome.pageAction.onClicked.addListener(function(tab) {...}); 

Themes皮肤 
也是打包成标准的恢宏组件,然则并不含有相应的JS和HTML代码,只用首要的manifest.json文件举办设置 

  "version": "2.6", 
  "name": "camo theme", 
  "theme": { 
    "images" : { 
      "theme_frame" : "images/theme_frame_camo.png", 
      "theme_frame_overlay" : "images/theme_frame_stripe.png", 
      "theme_toolbar" : "images/theme_toolbar_camo.png", 
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png", 
      "theme_ntp_attribution" : "images/attribution.png" 
    }, 
    "colors" : { 
      "frame" : [71, 105, 91], 
      "toolbar" : [207, 221, 192], 
      "ntp_text" : [20, 40, 0], 
      "ntp_link" : [36, 70, 0], 
      "ntp_section" : [207, 221, 192], 
      "button_background" : [255, 255, 255] 
    }, 
    "tints" : { 
      "buttons" : [0.33, 0.5, 0.47] 
    }, 
    "properties" : { 
      "ntp_background_alignment" : "bottom" 
    } 
  } 

私下认可四肢,能够透过上边包车型地铁链接进行查看 
 

中间tints中,使用 Hue-Saturation-Lightness  灰度 饱和 亮度进行设置,值都是在0-1里边 

浏览器交互作用: Browser Interaction 
Bookmarks,Events,Tabs,Windows等 

Bookmarks,收藏夹,可以创设,组织和关押收藏夹 
安装权限: manifest文件中 
"permissions": [ 
    "bookmarks" 
  ], 
馆藏夹使用tree的款型保留对象,此中首要选用BookmarkTreeNode对象开展拜候,常用的性质有:index, title, and url. 

注:树布局本人相比麻烦一些,能够动用下边方法参照他事他说加以考察进行拜谒 
    function btnclick(){ 
    chrome.bookmarks.getTree(function(ass){ 
    console.log(ass[0].children[0]); 
          for(obj in ass[0].children[0].children){ 
          console.log(ass[0].children[0].children[obj].title); 
          } 
    }) 
    } 
建议先查看debug方法(ps:相比较繁缛,但是合作console.log比较便利查看对象组织卡塔尔国 

其间的id使用的也是自增,由0开头 
周围的措施  
create , get getChildren getTree move remove removeTree search update 
科普的风浪 

大规模的事件 
onChanged onChildrenReordered onCreated onMoved onRemoved 

采用的例证: 
chrome.bookmarks.onMoved.addListener(...) 
chrome.bookmarks.getTree(...卡塔尔 //具体请查看API 

Event事件的运用例子 
chrome.tabs.onCreated.addListener(function(tab) { 
  appendToLog('tabs.onCreated --' 
              + ' window: ' + tab.windowId 
              + ' tab: '    + tab.id 
              + ' index: '  + tab.index 
              + ' url: '    + tab.url); 
}); 
只顾加载对应的permissions权限 tabs 
事件的全套操作方法: 
void addListener(function callback(...)) 
void removeListener(function callback(...)) 
bool hasListener(function callback(...)) 

Tabs  用于调节每一个标签 , 调用时为chrome.tabs 
大规模的措施: 
captureVisibleTab connect create detectLanguage executeScript get getAllInWindow getSelected insertCSS move remove sendRequest update 

广阔的风云: 
onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdated 

Windows  Chrome中的多窗口 

方式调用中可选的windowId参数,默以为当前窗口 

调用对象: chrome.windows 

广阔的艺术: create get getAll getCurrent getLastFocused remove update 
周边的风浪:onCreated onFocusChanged onRemoved 

Background Pages, 注册在manifest文件中,用于保存长日子运作的脚本,运维在插件所在的历程中,多用于相同守护线程同样的效果与利益,用于状态的更新 
收获页面包车型地铁形式: 
var views = chrome.extension.getViews(卡塔尔(英语:State of Qatar); //获取到的数组,通过轮回也许索引得到钦点的view也正是js的windows对象,不过这里只局限配置在manifest中的html成分 
"background_page": "background.html", 

Content Scripts 用于对点名页面包车型客车剧情开展脚本调用 
相近 需求在manifest文件中开展注册 
  "content_scripts": [ 
    { 
      "matches": ["], 
      "css": ["mystyles.css"], 
      "js": ["jquery.js", "myscript.js"] 
    } 
  ], 
  
普及的属性: 
matches, 字符串数组,依照拟定的配合情势开展对点名UEvoqueL页面包车型地铁注入 
js:钦点的脚本文件将会被注入到切合的页面中去 可选 
css:须要被安放的css,可选 
run_at:用于安装哪天举行注入,默感觉document_idle,还也许有其余的:document_start,document_end, 
all_frames:boolean 默认为false 

运用的办法能够参见官方文档,不过注意并不能够大致的更动同名function来到达注入替换事件的功力,但是能够一向运用document.getElementById获取钦命的dom组件,并进行改过. 
效用域的主题材料上: 对于原来的变量并不能够访问到,若是须求开展替换,需求张开意气风发体化的平地风波,变量实行再一次评释替换 
相比奇特的成效域:对于注入的代码,将会有三个密封的成效域,并不会与原本的开展矛盾,当却得以改革页面包车型大巴DOM成分 

Content script是在贰个出奇情形中运转的,这些条件成为isolated world(隔离情况)。它们得以访谈所注入页面包车型客车DOM,但是不可能访谈里面包车型大巴此外javascript变量和函数。 对各类content script来讲,就如除了它和睦之外再未有任何脚本在运转。 反过来也是创立的: 页面里的javascript也不可能访谈content script中的任何变量和函数。

 

为页面成分增加插件内图片的例子 
var imgURL = chrome.extension.getURL("images/myimage.png"); 
document.getElementById("someImage").src = imgURL; 

Cross-Origin XMLHttpRequest 跨站点的异步调用,用于接受插件访问其余网址的API 
分为地面与外表数据三种方面 

本地插件内数据:不须求设置权限 
var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere. 
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true); 
xhr.send(); 
注:0表示本地诉求成功 

外表网站,要求设置manifest文件中permissions,增加对应的网址地址,更多接受在插件内部职能上 
"permissions": [ 
    "" 
  ], 
对此相配的UEscortL也得以动用模糊相配 
"" 
""  表示同意访谈具有的网址 ,这里注意对https也要独立的编辑撰写 
内置的json转变JSON.parse(....卡塔尔国;能够用于将制订的字符串,转变到所需的js对象 

重复提示,倘使供给寻访其余网址,一定留心加多权限permissions 

Message Passing 音讯传递 

Simple one-time requests:发送贰个轻易的json数据从二个content script发送到插件的background.html文件中,反之亦然 
chrome.extension.sendRequest() 或 chrome.tabs.sendRequest() methods 
可选的二个回调函数,能够用于吸收接纳重临的内容 
如:定义在content script文件中 
chrome.extension.sendRequest({greeting: "hello"}, function(response) { 
  console.log(response.farewell); 
}); 
在background发送使用极度一些,须求利用getSelected获取选中的tab后,然后发送央求 
chrome.tabs.getSelected(null, function(tab) { 
  chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) { 
    console.log(response.farewell); 
  }); 
}); 

接纳的代码为: 
chrome.extension.onRequest.addListener( 
  function(request, sender, sendResponse) { 
    console.log(sender.tab ? 
                "from a content script:" + sender.tab.url : 
                "from the extension"); 
    if (request.greeting == "hello") 
      sendResponse({farewell: "goodbye"}); 
    else 
      sendResponse({}); // snub them. 
  }); 

Long-lived connections 长周期连接 
能够有限支撑再而三,持续的开展数量收发 
从content script 连接到background(插件)的代码 
var port = chrome.extension.connect({name: "knockknock"}); 
port.postMessage({joke: "Knock knock"}); 
port.onMessage.addListener(function(msg) { 
  if (msg.question == "Who's there?") 
    port.postMessage({answer: "Madame"}); 
  else if (msg.question == "Madame who?") 
    port.postMessage({answer: "Madame... Bovary"); 
}); 

生机勃勃经要从background插件处发起连接,需求稍作改正,去获得钦命的id 
chrome.tabs.connect(tabId, {name: "knockknock"}). 
设置监听连接的监听器 
chrome.extension.onConnect.addListener(function(port) { 
  console.assert(port.name == "knockknock"); 
  port.onMessage.addListener(function(msg) { 
    if (msg.joke == "Knock knock") 
      port.postMessage({question: "Who's there?"}); 
    else if (msg.answer == "Madame") 
      port.postMessage({question: "Madame who?"}); 
    else if (msg.answer == "Madame... Bovary") 
      port.postMessage({question: "I don't get it."}); 
  }); 
}); 

相应的监听断开药方法Port.disconnect(卡塔尔国,和相应的风浪Port.onDisconnect 

Cross-extension messaging 跨插件新闻 
重大使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal 
主意的细节与上述的一而再事件相通 

此间照旧涉及一下跨站点Js攻击的标题,少使用eval调换重返的字符串,而提出使用非常的JSON.parse方法 

NPAPI Plugins 用于提供Js调用本地二进制代码 ,提议最终接收,或然效果很强盛. 

Autoupdating和Packaging章节略过 

因为Chrome开拓自WebKit,所以能够调用其有意的API 
V8 Js引擎也为chrome提供了JSON对象 
能够在插件内部集成所需的JS插件,如jQuery 

目前收场,有空再研讨...先河GWT2.0 

本文由IT-综合发布,转载请注明来源:插件开垦