插件开拓,扩大开辟

使用React.js开发Chrome插件

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

初稿出处:
UncleChen   

一、入门

写在起初:
卓越风趣的UI界面,编码落成,浏览速度.对于壹天浏览器选拔超过十三个小时的人来讲,能够定制本身的浏览器,是一定的享有魅力. 

官方api文档 

一、背景

深信不疑看到那篇小说的人应有都用过Chrome插件吧,目前刚刚有个那方面包车型客车必要,小编就把Chrome插件的连带文化学习了须臾间,开采实际上Chrome插件的开垦和大前端Web开采的底稿是一样的,无非就是runtime仅限于Chrome浏览器,并且可以调用Chrome提供的某些chrome.*
API来贯彻部分依照Chrome浏览器的小功用。这里非要类比的话,笔者明白chrome.*
API就如大家付出Hybird应用一样,须要有一个bridge层来提供底层原生的本事给js。笔者是做Android开拓出生的,那只是笔者的个体通晓,大概对大Web技艺的接头依然不够。

实际上Chrome上的插件,从UI上根本分为两类:1类是浏览器按键(BrowserAction),另一类是页面按钮(PageAction)。两者的付出梅州小异,笔者那边前些天首要介绍的中流砥柱不是Chrome插件开采,而是怎么接纳React.js来开辟Chrome插件,本文先简要介绍下Chrome插件的开支和ReactJS,最终介绍如何选择Twitter官方推荐的creat-react-app脚手架来开拓Chrome插件。

那是创制chrome扩大插件的入门指南,不需求任何编制程序基础,看完这么些后,大家就起头做团结的Chrome插件了。行吗,大家将来就起来,其实本身也是个新手。

Getting Started 
一:近年来不援救标准宣布版本的Chrome插件扩张,不过也有消息随即就开采了,对于大家那些小意思.四.0使用中 
二:创立1个所必不可缺的文书夹,名字放肆,用于存放所需文件,开辟后,能够因此Chrome打包提交 
叁: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”//钦命点击开关后触发的行事, 

入门例子 

2、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文件名等等。额!!乍1看怎么和AndroidManifest.xml的功能诸如此类像啊?是的大兄弟!!恭喜您对才干的知晓已经贯通了!

传说manifest.json文件能够看来,八个Chrome插件最少得有:manifest.json文件,icon.pngLogo和popup.html文件。当然文件名可以随意改,只要和manifest.json里声称的同等就行。

这里就不浪费时间具体说怎么支付插件了,各路前端大腕比小编强十0倍。但本人只重申一点,那就是popup.html中引用的js文件只好是外部引进,不能够在popup.html文件之中写js代码。所以一般大家还有见到popup.js文件。其余纵然你想通晓本人使用的插件有哪些秘密,完全能够去Chrome浏览器的装置目录下边把它们给扒出来。。

亚洲必赢官网 1

5:弹出的html扩充名文件,进行编写制定弹出窗编写,允许采用Js and
css,使用的时候注意HTML必须包涵在文件夹内 
愈来愈提议,其中能够运用HTML五正规的成分 
插件蕴涵的文件 
1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件 
包裹后会被压缩成特殊格式的zip文件,扩张名称叫.crx 

chrome插件的运转设置是以2个json ()
格式的文书钦命的 ,manifest.json, 例子里声称了以下这么些name/value pair

三、React JS基础知识

React.js不供给多说了呢,从React那个词在技能界诞生起,正是1颗歌手,连自己那种死抱着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越发的犀利,很多市肆1度用得飞起了。

扯得有点远了,ReactJS开荒本身引入我们就看推文(Tweet)官方的以身作则就够了。英文倒霉的意中人能够看看阮一峰先生的博客,只怕看看那篇入门教程也是阔以的。

准备工具

background page :用于保存插件的机要逻辑, 
插件的逻辑分为: page action,browser
action三种,,background.html文件的js同时决定三种action 

a browser
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了。

做此外业务都要有个工具,制作chrome插件供给的工具很少。

action,能够知晓为动作,也等于浏览器表现出来的表现,如弹出窗同样 
browser_action 包括 a tooltip, a badge, and a popup. 

the activeTab
permission to
see the URL of the current tab ,

一.怎么让这些种类支撑Chrome插件开辟呢?

前边介绍了,Chrome插件最入眼的文书就是manifest.json清单文件。我们先看下脚手架给大家默许生成的manifest.json长啥样:

JavaScript

{ “short_name”: “React App”, “name”: “Create React App Sample”,
“icons”: [ { “src”: “favicon.ico”, “sizes”: “192×192”, “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": "192×192",
      "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一声令下,就会意识生成了3个my-app/build目录,那么些目录就是大家可以在chrome://extensions/去加载的插件目录,当然也可以用Chrome把这些目录打包成三个crx插件。

动用creat-react-app脚手架开拓Chrome插件的为主格局正是这样了,不过在其实中大家会赶上重重的标题,有时还是会想要运维npm
run
eject,然后去完全自定义webpack.config.js来促成打包。

  • 亚洲必赢官网 ,记事本,用来编排代码
  • Chrome浏览器,那几个不能少吗。Windows下,全数版本的Chrome都得以制作插件。Linux下须要下载Beta版本,Mac下载dev版本。

可以在Manifest文件中注册所需的browser
action,当中default_icon为必须的,其余均为可选(or) 

the storage
permission to
remember the user’s choice of background color for a page.

二.background.js怎么打包?

大家在付出插件的时候,1二分可能需求利用后台的background.js,原因如下:

注意:不要在popup页面的js空间变量中保存数据。由于popup页面只在用户点击Logo时才会议及展览开,当用户关闭那么些页面时就会停下,并未3个持久的实例分配给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"
  }
}

能够看看大家增加了2个指令npm run build-chrome-ext,并把background.js丢到了build目录下。如若你还有别的的js,小编提出在my-app/src下成立二个my-app/src/chrome文件夹,专用于存在chrome相关其余js代码,然后在build的时候统一丢到build里面。假设要minify那么些js,同样能够运用&&措施去加多命令。修改

开始制作第一个插件

UI部分 
Icon:多数图片格式都得以,推荐使用1九像素的星型图片,设置的不贰秘技分为二种,manifest文件内的default_icon,只怕调用setIcon()方法 
Tooltip:设置manifest的default_title属性,或调用setTitle()方法 
Badge:用于在Logo下显得的字符,字数限制在多少个字符一下,可以透过setBadgeText()
and setBadgeBackgroundColor()设置剧情和背景观 
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 

如上定义browser action时候,大家加了多少个name/value pair,: icon.png 和
popup.html, 那五个文件必须也在档案的次序目录下

三.要求小心的细节

由于使用了有些chrome.*
API,大家供给在编写翻译js的时候将chrome这一个大局对象声惠氏(WYETH)下。

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
  }
}
  • 在Computer中制造一个索引来存放在插件代码。
  • 在目录里面创立文件manifest.json(注意后缀名是.json),用记事本张开,写入如下代码
    1. {
    2.   “name”: “第一个Chrome插件”,
    3.   “version”: “1.0”,
    4.   “description”: “小编的率先个Chrome插件,还不易啊”,
    5.   “browser_action”: {
    6.     “default_icon”: “icon.gif”
    7.   }
    8. }

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

icon.png是1二分会并发在地方栏左侧的插件Logo,它是个1九px-square PNG file

5、其余脚手架推荐

除此而外自身退换Facebook推荐的creat-react-app外,上面多少个脚手架也究竟用户相比多的,专门用来开拓Chrome插件的脚手架。

  • :暗许帮助ReactJS,基于webpack。
  • :未有暗中同意协助ReactJS,供给协和修改,基于gulp打包。

    1 赞 收藏
    评论

亚洲必赢官网 2

  • 把下部两张图纸保存到文件夹中,分别取名icon.gif和smile.gif
    图片一: 亚洲必赢官网 3    
    图片二: 亚洲必赢官网 4
  • 安装那几个插件:
    a.点击右上角扳手,选拔扩大程序,展开增添核心。
    b.点击右上角的“开垦人士方式”,使得前边的“+”形成“-”,展开相应的菜系。假如一开头就是“-”,那么不用点击。
    c.点击“载入正在开拓的扩充程序按键”,导入刚才创造的文书夹。

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

popup.html是当您点击插件Logo时候会弹出来的窗口页面,它的页面内容实在是怎么展现的?那背后的逻辑是由popup.js 完结的,就算manifest.json里从未点名那几个文件。

只要1切顺遂,你的Chrome地址栏将会有个新Logo,你的率先个插件诞生了。

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

到此处,您的目录下1度有多个公文, icon.png,manifest.json,popup.html,popup.js.

给第一个插件增加新功能

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

未来来尝试看把那些文件载入chrome

你今后虽说做了第三个插件,但实质上他并未达成其余功效,大家点击Logo,未有其余反馈。上边我们就给她扩张点功用。

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

you can drag and drop the directory where your extension files live onto
chrome://extensions in your browser to load it.

  • 编制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. }
  • 上面大家创制二个文本文件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>

browserAction的事件 
chrome.browserAction.onClicked.addListener(function(Tab tab) {…});
//将会在点击Logo后触发 
//那里的参数,比Js多了一体系型 

拨弄您的代码:

  • 归来Chrome的扩张大旨,点击插件下的“重新载入 ”。

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

让大家来为Logo加1个提示新闻,

明天点击插件Logo看看。大家的首先个插件算是制作成功了。

所需的HTML可以为一个完好无损格式的HTML文书档案,包涵所需的html成分 

“browser_action”:

打包插件

Override界面:
用于替换新tab界面,差别于暗许的分界面,在manifest文件中实行注册 
“chrome_url_overrides”: { 
    “newtab”: “newtab.html” 
  }, 

{…

大家想把团结创设的插件给别的人用,那么就要求将插件打包。

Page Actions: 用于出现在钦赐页面中的图标 
“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() and hide() methods 

“default_title”:”Click here!”

  • 再次回到Chrome的插件增添中央,点击“打包扩充程序”开关。
  • 挑选刚刚创设的文书夹,点击确定生成后缀为crx和cpm文件各2个。

如出一辙对browser的建议也适用与page action; 

}

把crx文件发送给自个儿的意中人,告诉他们你也会营造chrome插件吧。

一部分常见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) {…}); 

manifest文件只在插件被加载时候才被分析,假使您想见见退换代码以后的扭转,就必要重载
extension: Visit the extensions page (go to chrome://extensions),
and click Reload under your extension. 
当您在chrome://extensions/那几个页面按下Ctrl+宝马X5时候,全部的插件也都会被重载

您能够修改里面包车型客车文字图片,制作出极具性格的扩大来了。

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

万1在炮制进度中有其余难点,迎接到http://dev.chromechina.com来谈谈调换。本文参考官方指南编写。

暗中认可皮肤,可以透过上边包车型客车链接实行查看 
 

二、概述

里头tints中,使用 Hue-Saturation-Lightness  灰度 饱和
亮度实行安装,值都是在0-一里边 

那篇小说翻译自。

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

壹经看完那篇小说,并且做过入门指南开中学的例子,你就足以真正开头支付属于本身的Chrome插件了。

Bookmarks,收藏夹,能够创设,协会和保管收藏夹 
安装权限: manifest文件中 
“permissions”: [ 
    “bookmarks” 
  ], 
馆内藏品夹使用tree的款式保留对象,个中第3使用
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比较便利查看对象组织) 

三个Chrome增加是由HTML、CSS、JavaScript、图片等文件收缩而成。扩大实际上就是二个web页面,你可以用别样浏览器提要求web页面包车型客车接口,从XMLHttpRequest
到JSON ,再到HTML本地缓存都能够接纳。

当中的id使用的也是自增,由0开首 
遍布的方法  
create , get getChildren getTree move remove removeTree search update 
广大的轩然大波 

Chrome增添能做怎么样吗?大家必定使用过一些恢宏,会发觉有点扩张在Chrome地址栏右边区域扩展2个图标。还有个别扩充能够和浏览器的局地成分(如书签、tab导助航标记签)交互。扩张还足以和web页面交互,乃至是从web服务器获取数据。特别详细的始末能够从Developer’s
Guide看到。

分布的事件 
onChanged onChildrenReordered onCreated onMoved onRemoved 

Chrome扩展的组成文件

运用的例证: 
chrome.bookmarks.onMoved.addListener(…) 
chrome.bookmarks.getTree(…) //具体请查看API 

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

伊芙nt事件的施用例子 
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(…)) 

  • 一个manifest文件(主文件,json格式)
  • 起码1个HTML文件(大旨能够未有HTML文件)
  • JavaScript文件 (可选,非必须)
  • 其他其余你供给的文本(比方图片)

Tabs  用于调控每种标签 , 调用时为chrome.tabs 
常见的艺术: 
captureVisibleTab connect create detectLanguage executeScript get
getAllInWindow getSelected insertCSS move remove sendRequest update 

当你付出2个增加的时候,要求把那么些文件放在贰个文本夹里,当你发表这一个扩充的时候,那些文件夹下的有着文件将会打包成3个尤其后缀.crx的ZIP文件。

大规模的轩然大波: 
onAttached onCreated onDetached onMoved onRemoved onSelectionChanged
onUpdated 

引用文件

Windows  Chrome中的多窗口 

您能够放置任何文件到你的增添里面,不过怎么调用这一个文件呢?一般的话,使用相对地址调用,类似HTML中调用文件。上面是个例证,在子文件夹images中有个图片myimage.png,大家可以如此调用它

方法调用中可选的windowId参数,默觉稳当前窗口 

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

调用对象: chrome.windows 

复制代码

遍布的艺术: create get getAll getCurrent getLastFocused remove update 
常见的事件:onCreated onFocusChanged onRemoved 

内部images/myimage.png表示这一个文件。

Background Pages,
注册在manifest文件中,用于保存长日子运作的脚本,运转在插件所在的进程中,多用来类似守护线程一样的机能,用于状态的更新 
获得页面包车型客车法子: 
var views = chrome.extension.getViews();
//获取到的数组,通过轮回恐怕索引得到钦命的view相当于js的windows对象,然而这里只局限配置在manifest中的html成分 
“background_page”: “background.html”, 

只怕你注意到当使用谷歌 Chrome
debugger查看那个文件的时候给,各个文件的地址是底下那种格式

Content Scripts 用于对点名页面包车型地铁始末张开脚本调用 
同等 需求在manifest文件中张开注册 
  “content_scripts”: [ 
    { 
      “matches”: [“], 
      “css”: [“mystyles.css”], 
      “js”: [“jquery.js”, “myscript.js”] 
    } 
  ], 
  
广泛的质量: 
matches, 字符串数组,依据制定的匹配格局开展对点名ULacrosseL页面包车型客车注入 
js:钦赐的剧本文件将会被注入到符合的页面中去 可选 
css:须求被放置的css,可选 
run_at:用于安装什么日期进行注入,默感觉document_idle,还有其他的:document_start,document_end, 
all_frames:boolean 默认为false 

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

选取的法门能够参照官方文书档案,不过注意并不能够差不离的替换同名function来落成注入替换事件的效能,可是能够一直利用document.getElementById获取钦命的dom组件,并进行修改. 
作用域的主题材料上:
对于本来的变量并不可能访问到,若是急需张开沟通,供给展开总体的事件,变量实行双重申明替换 
相比较奇特的成效域:对于注入的代码,将会有四个封闭的功能域,并不会与原本的进展争辩,当却得以修改页面的DOM成分 

复制代码

Content script是在一个特种情形中运维的,这一个情状成为isolated
world(隔开分离景况)。它们得以访问所注入页面包车型客车DOM,但是不可能访问里面包车型客车任何javascript变量和函数。
对种种content script来讲,就像除了它和睦之外再未有其余脚本在运作。
反过来也是确立的: 页面里的javascript也无法访问content
script中的任何变量和函数。

那么些地点中,<extensionID>是你制作的扩大的绝无仅有标示符,也便是扩展的身份证号码。<pathToFile>是文本相对扩展顶尖文件夹得地点。

 

manifest文件

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

主文件取名manifest.json,用来讲述这些扩充,包含扩大名字、版本、调用的公文、可用域等新闻。上面是个杰出的manifest文件,这几个扩充能够调用google.com的剧情。

Cross-Origin XMLHttpRequest
跨站点的异步调用,用于采纳插件访问别的网址的API 
分成地面与表面数据二种方面 

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

地方插件内数据:不供给安装权限 
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”: [ 
    “” 
  ], 
对于相配的U哈弗L也得以行使模糊相称 
“” 
“”  表示同意访问具备的网站 ,那里注意对https也要独立的编排 
停放的json转换JSON.parse(….);能够用来将制定的字符串,调换到所需的js对象 

扩展结构组成结构

再次提示,假诺急需拜访其余网址,一定注意增多权限permissions 

两头恢弘有background文件,二个不可知的文书决定着漫天扩充的运作。

Message Passing 音讯传递 

亚洲必赢官网 5

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); 
  }); 
}); 

地点那一个图形展现的浏览器至少安装了五个扩张:叁个浏览器行为扩张(墨绿的Logo),页面行为增加(月光蓝的Logo)。这么些浏览器行为扩张的background文件是用2个HTML文件定义的(background.html),那些background文件中有JavaScript代码调控总体浏览器的移位。

收到的代码为: 
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. 
  }); 

HTML页面

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不是唯1设有的HTML文件,例如浏览器行为大概是弹出一个小窗口,这些小窗口的始末就足以调用2个HTML文件。Chrome扩充也能够用chrome.tabs.create()
or window.open()那种函数来展现HTML文件。

1经要从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.”}); 
  }); 
}); 

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

相应的监听断开药方法Port.disconnect(),和呼应的事件Port.onDisconnect 

下边包车型客车图显示了浏览器弹出一个窗口那个功效的布局(这正是大家最开头的例子)。这几个弹出窗口的始末是八个HTML的web文件,那几个弹出窗口不需求蕴含background文件中的代码,因为,popup.html和background是足以并行走访的。

克罗丝-extension messaging 跨插件音信 
重中之重选取chrome.extension.onRequestExternal or
chrome.extension.onConnectExternal 
艺术的细节与上述的连天事件同样 

亚洲必赢官网 6

那里依旧涉及一下跨站点Js攻击的主题素材,少使用eval转换再次回到的字符串,而提议采纳尤其的JSON.parse方法 

剧情脚本(Content scripts)

NPAPI Plugins 用于提供Js调用本地二进制代码
,建议最后选拔,可能效果很庞大. 

若果你插件须求和网页交互,那么他就必要1个剧情脚本(Content
scripts),内容脚本常由JavaScript编写,会在网页载入完毕后调用。完全能够把内容脚本看做是网页的一有些,而不是扩张的1有的。

Autoupdating和Packaging章节略过 

剧情脚本能够访问到近来浏览器浏览的页面,而且还足以转移网页的突显方式(油猴脚本正是内容脚本)。上面包车型客车图片中,内容脚本能够读取、改造网页的DOM。注意,他不能够改动background.html中的内容。

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

亚洲必赢官网 7

暂且收场,有空再商量…初步GWT二.0 

内容脚本也不是和父扩充完全隔开开来,他也能够和父级扩大沟通消息。如下图中所示,内容脚本在意识四个KoleosSS
Feed地址后将会给background.html发送2个新闻。恐怕background.html给内容脚本发送2个音讯须求退换网页外观。

亚洲必赢官网 8

今非昔比页面间的并行

多少个扩充中的文件平时须要互相。由于扩大的具备文件都由同一个进程施行,网页能够间接给别的页面发送命令。

能够选用类似chrome.extension methods such as getViews() and
getBackgroundPage()那样的诀要引用扩大中的方法。1旦页面中援引了别的的页面,第二个页面就足以调用别的页面包车型大巴函数,以致能够垄断(monopoly)DOM。

结束语

好了,你已经大概明白了3个恢宏程序的主干内容,能够起首写作自个儿的扩充了。

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

3、扩展Logo

这是扩打开荒指南的第二篇,前边大家先是作了第二个扩展,然后学习了Chrome扩张的光景结构,看完后或者会稍稍吸引,别思量,相信随着我们学习的递进,大家日益开掘大家早已得以做扩展了。当然为了做出非凡的恢宏,大家还须要学习有些HTML、CSS、JavaScript的基础知识,网址就天经地义。

前几日的小说翻译自,介绍Browser
Action,即左侧的扩充Logo。那节的剧情照旧挺风趣的。(同样,有翻译要求立异的地点请提议来)

Browser
Actions的功能正是决定Chrome地址栏左边加多一个Logo。除了给chrome扩充叁个Logo的功用外,仍是能够设置提醒文字、Logo标志、弹出窗口。

下图中,在地方栏左边的花花绿绿图标正是贰个Browser Action。

亚洲必赢官网 9

Browser
Actions成立的Logo是平昔可知的,要是您想创建一个不是间接不可知的Logo,能够采纳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必须有2个Logo。同时还是能够有提示文字、Logo标记、弹窗。

图标

Browser
Action的Logo会被浏览器缩放成1玖px*1九px高低,太大的Logo是绝非意思的。

您能够用二种方式定义Logo:用叁个静态图片,或许用HTML中的canvas成分。用静态图片的话归纳些,但是用canvas成分能够成立尤其平缓的图纸。

静态图片能够是随便常见格式的图纸,包含BMP, GIF, ICO, JPEG, or PNG。

咱俩得以在manifest文件中用default_icon语句来定义这些Logo,也足以调用setIcon()函数。

提示文字

提示文字是指将鼠标移到扩充Logo上海展览中心示的文字。大家可以在manifest中用default_title定义,也得以透过调用setTitle()函数。

Logo标志

Logo标识是指覆盖在扩大图标上的1部分文字,举例Gmail提示Logo上未读邮件数,P凯雷德查询工具上P揽胜极光值。由于标识的职分十分小,他最七只可以容纳6个字母。

安装标志文字或许背景能够分别选择 setBadgeText() and
setBadgeBackgroundColor()。

弹窗

当大家点击一些恢宏的时候,会开掘有个小弹窗出现,举个例子大家壹开头的事例中。那个弹窗能够包括其余HTML内容,他的轻重缓急也是和内容自适应的。

给Browser
Action增添弹窗能够在manifest的default_popup定义弹窗中呈现的html文件名字,当然也能够采用setPopup()函数。

几个小提醒

为了扩展越来越雅观,请遵循下列守则:

仅在这几个扩充要求在大部页面运转的时候才使用browser action

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

接纳显眼的Logo

毫不试图模仿chrome浏览器原有的扳手/页面Logo,你的庞大意优秀一些。

您的Logo边缘应该运用阿尔法透明,那样的话能够融入到各类分化的浏览器宗旨里。

例子解析

激动人心的时候来了,在这些文件夹下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. }

那是2个极粗略的manifest.json文件模板,个中browser_action便是这篇小说降到的事物,default_title是描述,default_icon是Logo,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,也是随后会看出的。整个文件的意味是:一、显示四格不一样颜色的矩形框,贰、当点击这一个矩形框的时候转换页面背景象。

咱俩还亟需3个图标展现在工具栏上,把这么些图形保存到文件夹中亚洲必赢官网 10

好了,大家的恢宏制作实现了,载入他们测试一下吗!

只要有1对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>

在百度主页上张开那几个扩大,点击第一个开关”谷歌(Google)”,能够把百度的logo换到google的。

四、选用页面

您能够提供三个选项页面(Options
Pages)让用户自定义你的扩张。纵然设置了增选页面,那么扩充管理页chrome://extensions将会有1个链接指向选项页面。

概念选项页面包涵两步:

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

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

2、编写选项页面

采用页面是3个一级的网页,上面是三个摘取页面包车型客车例证:

  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来驱动差别扩充的选项页面保持风格1模一样,你能够从那里()查看最新的拓展。

知识补充

地点的事例中利用LOCALSTORAGE保存数据,具体介绍能够查阅《运用LOCALSTORAGE保存数据》

原文 

由ChromeChina翻译,转发评释出处

五、重新设置页面

重置是一种用自己提供的页面替换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地图