强大开拓,插件开垦

使用React.js开发Chrome插件

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

原稿出处:
UncleChen   

一、入门

写在开班:
相当有意思的UI分界面,编码落成,浏览速度.对于壹天浏览器选择超过13个时辰的人的话,能够定制自身的浏览器,是一对一的富有吸引力. 

官方api文档 

一、背景

深信看到那篇小说的人应该都用过Chrome插件吧,近期恰恰有个那下边包车型大巴要求,笔者就把Chrome插件的连带文化学习了1晃,发掘实际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,最后介绍怎么样行使照片墙官方推荐的creat-react-app脚手架来开拓Chrome插件。

那是制作chrome扩充插件的入门指南,不须求任何编制程序基础,看完那么些后,大家就动手做要好的Chrome插件了。好吧,我们明天就从头,其实小编也是个菜鸟。

Getting Started 
一:近日不协助标准公布版本的Chrome插件扩大,可是也有新闻随即就支出了,对于我们以此不成难点.四.0使用中 
贰:创制三个所不能缺少的文本夹,名字任性,用于存放所需文件,开辟后,能够由此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”//钦定点击按键后触发的一坐一起, 

入门例子 

二、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.png图标和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插件的启航设置是以三个json ()
格式的文本钦赐的 ,manifest.json, 例子里声称了以下那么些name/value pair

叁、React JS基础知识

React.js不需求多说了吗,从React那个词在本事界诞生起,便是1颗歌星,连自个儿那种死抱着Native技能的人都不得不去学学它。。

简轻易单扯两句React JS的话题(React Native下次再说),作为贰个Android
App/SDK开采,小编未有支付过太多守旧意义上的Web页面,但是通过自家读书了大致20日多的年月,笔者意识React
JS开采Web页面包车型大巴笔触其实和客户端很像,不去用jQuery/Zepto啊操作DOM,而是关心数据本人,以多少驱动去改换分界面。重构写好了静态html后,哪块地点需求扭转,你就把哪儿形成二个变量放到组件的State/Props里面(至于组件怎么切分,哪个数据放State,哪个放Prop不是前几天要研究的话题),然后就只用关爱数据的生成,然后setState一下分界面就能够刷新了。掌握了那或多或少,就会意识实际上开拓Web页面很轻易。比起操作DOM,一些模板引擎之类的东西,笔者认为React那些考虑卓殊轻松接受,写起来也很舒服,完全未有那种混乱的痛感,而且今后ReactJS生态圈比很大,诸如Redux那类的库使得ReactJS越发的辛辣,大多供销合作社曾经用得飞起了。

扯得有点远了,ReactJS开垦自个儿推荐大家就看Instagram官方的言传身教就够了。英文倒霉的意中人能够看看阮1峰先生的博客,可能看看那篇入门教程也是阔以的。

准备工具

background page :用于保存插件的最首要逻辑, 
插件的逻辑分为: page action,browser
action三种,,background.html文件的js同时间调控制三种action 

a browser
action,

4、应该用哪个脚手架?

自然是推特(TWTR.US)(推特)官方推荐的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文件都打包到2个main.js文件中,并在index.html中插入这一个main.js。

大家运营一下npm run build一声令下,就会发觉生成了1个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.

2.background.js怎么打包?

我们在付出插件的时候,分外也许需求选择后台的background.js,原因如下:

留神:不要在popup页面包车型客车js空间变量中保留数据。由于popup页面只在用户点击Logo时才会敞开,当用户关闭这个页面时就会告1段落,并未多个持久的实例分配给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:多数图片格式都得以,推荐应用1玖像素的圆柱形图片,设置的艺术分为三种,manifest文件内的default_icon,大概调用setIcon()方法 
Tooltip:设置manifest的default_title属性,或调用setTitle()方法 
Badge:用于在Logo下显得的字符,字数限制在5个字符一下,能够由此setBadgeText()
and setBadgeBackgroundColor()设置剧情和背景象 
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 

如上定义browser action时候,我们加了七个name/value pair,: icon.png 和
popup.html, 那三个文件必须也在类型目录下

三.亟需小心的底细

由于使用了有的chrome.*
API,大家须求在编写翻译js的时候将chrome其一大局对象声美赞臣(Meadjohnson)(Beingmate)下。

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

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

icon.png是卓殊会冒出在地方栏右边的插件Logo,它是个1九px-square PNG file

5、别的脚手架推荐

除了自个儿改变推特(Twitter)(推特(Twitter))推荐的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里未有点名那一个文件。

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

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

到那里,您的目录下一度有八个公文, 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那个文件,用上面包车型客车代码替换现成的代码,其实我们只是加了一条龙代码和2个逗号而已。

    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的恢弘大旨,点击插件下的“重新载入 ”。

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

让大家来为Logo加一个提示音信,

近年来点击插件Logo看看。大家的第3个插件算是制作成功了。

所需的HTML可以为2个完完全全格式的HTML文书档案,包括所需的html成分 

“browser_action”:

打包插件

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() and hide() methods 

“default_title”:”Click here!”

  • 归来Chrome的插件扩展中央,点击“打包扩张程序”按键。
  • 选料刚刚创造的文件夹,点击明确生成后缀为crx和cpm文件各四个。

壹如既往对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+LX570时候,全体的插件也都会被重载

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

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

假设在营造进度中有任何难点,应接到http://dev.chromechina.com来谈谈调换。本文参考官方指南编写。

私下认可皮肤,能够通过上面包车型客车链接实行查看 
 

二、概述

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

这篇小说翻译自。

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

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

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相比便宜查看对象组织) 

三个Chrome扩张是由HTML、CSS、JavaScript、图片等公事收缩而成。扩张实际上正是3个web页面,你能够用其它浏览器提供给web页面的接口,从XMLHttpRequest
到JSON ,再到HTML本地缓存都得以使用。

当中的id使用的也是自增,由0早先 
布满的不贰诀窍  
create , get getChildren getTree move remove removeTree search update 
广大的轩然大波 

Chrome扩充能做怎么着吗?我们必将使用过一些恢宏,会意识有个别扩大在Chrome地址栏左边区域扩充1个Logo。还有些扩充能够和浏览器的一些要素(如书签、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格式)
  • 至少三个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”, 

兴许你放在心上到当使用谷歌(Google) Chrome
debugger查看这个文件的时候给,每一种文件的地址是上边那种格式

Content Scripts 用于对点名页面包车型客车剧情开始展览脚本调用 
同一 供给在manifest文件中开始展览注册 
  “content_scripts”: [ 
    { 
      “matches”: [“], 
      “css”: [“mystyles.css”], 
      “js”: [“jquery.js”, “myscript.js”] 
    } 
  ], 
  
科普的习性: 
matches, 字符串数组,根据相制版定的相称格局举行对点名UBMWX伍L页面包车型地铁流入 
js:钦命的台本文件将会被注入到适合的页面中去 可选 
css:要求被内置的css,可选 
run_at:用于安装什么日期举办注入,默感觉document_idle,还有其余的:document_start,document_end, 
all_frames:boolean 默认为false 

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

使用的方法得以参照官方文书档案,但是注意并不可能轻便的交替同名function来达到注入替换事件的成效,然则能够从来运用document.getElementById获取钦赐的dom组件,并举办修改. 
功用域的难点上:
对于本来的变量并不能够访问到,借使急需开展替换,必要开始展览总体的风云,变量实行双重申明替换 
正如格外的成效域:对于注入的代码,将会有3个查封的效率域,并不会与原本的进展争持,当却足以修改页面包车型大巴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的剧情。

克罗丝-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”: [ 
    “” 
  ], 
对此相称的ULX570L也能够行使模糊相称 
“” 
“”  表示同意访问具有的网址 ,那里注意对https也要单独的编纂 
内置的json转换JSON.parse(….);能够用来将制定的字符串,调换来所需的js对象 

扩展结构组成结构

重新提示,假使急需拜访其余网址,一定留神增加权限permissions 

多边恢弘有background文件,七个不可知的文书决定着全体扩大的运转。

Message Passing 音信传递 

美高梅开户网址 5

Simple one-time requests:发送1个简便的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文件是用3个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不是绝无仅有设有的HTML文件,比方浏览器行为或者是弹出1个小窗口,那几个小窗口的剧情就足以调用二个HTML文件。Chrome扩充也能够用chrome.tabs.create()
or window.open()这种函数来显示HTML文件。

若果要从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 

上面包车型地铁图体现了浏览器弹出一个窗口这几个作用的结构(那多亏大家最初阶的例子)。这么些弹出窗口的剧情是3个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调用本地2进制代码
,提议最终动用,或然效果很庞大. 

即使您插件须要和网页交互,那么她就需求2个剧情脚本(Content
scripts),内容脚本常由JavaScript编写,会在网页载入达成后调用。完全能够把内容脚本看做是网页的一片段,而不是扩张的壹部分。

Autoupdating和Packaging章节略过 

故事情节脚本能够访问到当下浏览器浏览的页面,而且仍是可以转移网页的呈现方式(油猴脚本正是内容脚本)。上面包车型地铁图样中,内容脚本能够读取、改造网页的DOM。注意,他无法退换background.html中的内容。

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

美高梅开户网址 7

一时收场,有空再研商…发轫GWT2.0 

剧情脚本也不是和父扩展完全隔开分离开来,他也能够和父级扩张交流音讯。如下图中所示,内容脚本在意识一个KoleosSS
Feed地址后将会给background.html发送二个音信。或然background.html给内容脚本发送1个音讯供给改造网页外观。

美高梅开户网址 8

分裂页面间的相互

2个扩展中的文件日常须求互相。由于扩充的装有文件都由同一个历程执行,网页能够一贯给别的页面发送命令。

能够运用类似chrome.extension methods such as getViews() and
getBackgroundPage()那样的法子引用增添中的方法。壹旦页面中引用了别的的页面,第二个页面就足以调用其余页面包车型客车函数,乃至能够垄断(monopoly)DOM。

结束语

好了,你早就大概通晓了四个增添程序的焦点内容,能够起来创作本身的增加了。

本文由ChromeChina翻译,转发评释出处

3、扩充Logo

那是扩充开采指南的第3篇,后面我们第二作了第一个扩张,然后学习了Chrome增加的差不多结构,看完后大概会略带吸引,别挂念,相信随着大家学习的长远,大家稳步开掘我们曾经能够做扩张了。当然为了做出美丽的扩张,大家还索要上学一些HTML、CSS、JavaScript的基础知识,网址就不易。

前几天的篇章翻译自,介绍Browser
Action,即右边的恢宏图标。那节的始末依旧挺有趣的。(一样,有翻译须要革新的地点请提议来)

Browser
Actions的效果正是调整Chrome地址栏右边加多多少个Logo。除了给chrome扩大三个Logo的效应外,还足以设置提示文字、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必须有八个Logo。同时还足以有提醒文字、Logo标志、弹窗。

图标

Browser
Action的图标会被浏览器缩放成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标识是指覆盖在扩充Logo上的部分文字,举个例子Gmail提醒Logo上未读邮件数,P奥迪Q7查询工具上POdyssey值。由于标记的地点极小,他最三只好容纳多少个假名。

设置标志文字只怕背景能够分级选用 setBadgeText() and
setBadgeBackgroundColor()。

弹窗

当大家点击一些扩充的时候,会开掘有个小弹窗出现,比如大家1开端的例证中。这一个弹窗可以包涵别的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,大家试注重新编辑他。

首先我们掌握,首先新建2个文书夹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是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,那二种语言结合多少个为主的网页,如若您还不是很理解的话能够未来逐年学些。个中调用了Chrome接口函数chrome.tabs.executeScript,也是之后会看到的。整个文件的意思是:壹、突显四格分裂颜色的矩形框,二、当点击那个矩形框的时候转换页面背景象。

咱俩还亟需2个Logo展现在工具栏上,把那些图形保存到文件夹中美高梅开户网址 10

好了,大家的扩展制作完毕了,载入他们测试一下吗!

壹经有一对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、编写选项页面

慎选页面是三个特出的网页,上边是三个取舍页面包车型地铁事例:

  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只怕不辅助那些意义。

咱俩正陈设提供1个暗中认可的css来驱动差异扩张的选项页面保持风格壹模同样,你能够从此间()查看最新的开始展览。

知识补充

上面的事例中利用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地图