威尼斯人线上娱乐

插件开采,扩张开采

28 4月 , 2019  

使用React.js开发Chrome插件

2018/07/09 · JavaScript
· Chrome插件开采,扩张开采。,
插件

初稿出处:
UncleChen   

一、入门

写在先河:
相当有意思的UI分界面,编码落成,浏览速度.对于1天浏览器采取超过十三个钟头的人的话,能够定制自个儿的浏览器,是一定的保有吸引力. 

官方api文档 

一、背景

深信不疑看到这篇文章的人应有都用过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,最终介绍怎么样使用推特(Twitter)官方推荐的creat-react-app脚手架来支付Chrome插件。

那是制作chrome扩充插件的入门指南,不须要任何编制程序基础,看完那几个后,大家就开首做自身的Chrome插件了。好啊,大家后天就从头,其实本人也是个新手。

Getting Started 
一:近来不辅助标准通知版本的Chrome插件扩充,可是也有新闻登时就开荒了,对于大家这些不奇怪.④.0使用中 
2:成立一个所必备的文本夹,名字放4,用于存放所需文件,开荒后,可以因而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扩展及利用开辟

轻易的话,1个最基本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里声称的1律就行。

那边就不浪费时间具体说怎么支付插件了,各路前端大腕比笔者强100倍。但自己只重申一点,这就是popup.html中援引的js文件只可以是表面引进,不可能在popup.html文件之中写js代码。所以一般我们还有见到popup.js文件。其余假诺你想清楚本中国人民银行使的插件有啥样秘密,完全能够去Chrome浏览器的设置目录下边把它们给扒出来。。

威尼斯人线上娱乐 1

伍:弹出的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那么些词在才具界诞生起,正是一颗超新星,连小编这种死抱着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开采自身引进我们就看Twitter官方的示范就够了。英文糟糕的情人能够看看阮一峰先生的博客,恐怕看看那篇入门教程也是阔以的。

准备工具

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

a browser
action,

四、应该用哪些脚手架?

自然是推文(Tweet)官方推荐的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文件都打包到3个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怎么打包?

大家在支付插件的时候,极度恐怕要求利用后台的background.js,原因如下:

注意:不要在popup页面包车型地铁js空间变量中保留数据。由于popup页面只在用户点击图标时才会开启,当用户关闭那个页面时就会停止,并未贰个持久的实例分配给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, 那八个文本必须也在类型目录下

3.亟待专注的底细

由于应用了一部分chrome.*
API,大家必要在编写翻译js的时候将chrome其一大局对象声爱他美(Aptamil)下。

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玖px-square PNG file

伍、其余脚手架推荐

除开自身改造推特(Twitter)(TWTCRUISER.US)推荐的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) 

到那里,您的目录下一度有四个文件, 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.    “name”: “第一个Chrome插件”, 
    2.    “version”: “1.0”, 
    3.    “description”: “作者的率先个Chrome插件,尚可啊”, 
    4.    “browser_action”: { 
    5.       “default_icon”: “icon.gif”, 
    6.       “popup”: “popup.html” 
    7.    }
    8. }
  • 下边大家创制3个文本文件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加3个提醒消息,

现在点击插件图标看看。大家的率先个插件算是制作成功了。

所需的HTML可以为二个完整格式的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+Escort时候,全部的插件也都会被重载

您能够修改里面包车型大巴文字图片,制作出极具性情的增加来了。

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相比便利查看对象协会) 

3个Chrome扩张是由HTML、CSS、JavaScript、图片等公事缩小而成。扩大实际上就是叁个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 

当你付出三个恢宏的时候,须要把那么些文件放在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, 字符串数组,根据制定的同盟格局张开对点名UOdysseyL页面包车型客车注入 
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是在2个相当遭受中运营的,那几个条件成为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”: [ 
    “” 
  ], 
对此相称的U奇骏L也足以利用模糊相称 
“” 
“”  表示同意访问具有的网址 ,那里注意对https也要单独的编写制定 
放手的json调换JSON.parse(….);能够用于将制定的字符串,转换到所需的js对象 

扩展结构组成结构

再次提示,若是必要拜访别的网址,一定留神加多权限permissions 

多方扩大有background文件,2个不可见的公文决定着全部扩张的运转。

Message Passing 音讯传递 

威尼斯人线上娱乐 5

Simple one-time requests:发送1个大约的json数据从2个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),页面行为扩充(浅橙的图标)。这么些浏览器行为扩充的background文件是用三个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文件,比方浏览器行为或然是弹出三个小窗口,那个小窗口的剧情就足以调用八个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 

上边包车型客车图体现了浏览器弹出1个窗口这一个意义的结构(那便是大家最初叶的事例)。这一个弹出窗口的情节是一个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调用本地二进制代码
,建议最终动用,恐怕效果很壮实大. 

只要您插件供给和网页交互,那么她就要求叁个剧情脚本(Content
scripts),内容脚本常由JavaScript编写,会在网页载入落成后调用。完全能够把内容脚本看做是网页的一局地,而不是扩充的一片段。

Autoupdating和Packaging章节略过 

内容脚本能够访问到当下浏览器浏览的页面,而且还是能够转移网页的展现格局(油猴脚本正是内容脚本)。下面包车型大巴图片中,内容脚本能够读取、退换网页的DOM。注意,他无法改换background.html中的内容。

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

威尼斯人线上娱乐 7

目前收场,有空再研究…初阶GWT二.0 

剧情脚本也不是和父扩展完全隔断开来,他也得以和父级增加交流消息。如下图中所示,内容脚本在发掘1个讴歌MDXSS
Feed地址后将会给background.html发送3个新闻。可能background.html给内容脚本发送一个消息供给改换网页外观。

威尼斯人线上娱乐 8

今非昔比页面间的互相

一个恢宏中的文件经常供给互相。由于扩张的有着文件都由同3个经超过实际践,网页能够直接给其余页面发送命令。

能够动用类似chrome.extension methods such as getViews() and
getBackgroundPage()那样的艺术引用增加中的方法。1旦页面中引用了此外的页面,第贰个页面就足以调用别的页面包车型地铁函数,以致能够垄断DOM。

结束语

好了,你已经差不离精晓了2个扩展程序的宗旨内容,能够起来创作本身的扩张了。

本文由ChromeChina翻译,转发注脚出处

三、扩张Logo

这是扩张开垦指南的第二篇,前边大家第2作了第3个扩充,然后学习了Chrome增加的大致结构,看完后恐怕会略带吸引,别忧郁,相信随着大家学习的深深,大家日益开采大家曾经足以做扩张了。当然为了做出美貌的增加,大家还索要上学一些HTML、CSS、JavaScript的基础知识,网址就天经地义。

今日的篇章翻译自,介绍Browser
Action,即左边的恢宏图标。那节的始末依旧挺风趣的。(同样,有翻译需求革新的地点请建议来)

Browser
Actions的效应就是调控Chrome地址栏右边增多三个图标。除了给chrome扩充七个Logo的意义外,还足以设置提示文字、Logo标识、弹出窗口。

下图中,在地方栏右边的多彩Logo正是2个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的Logo会被浏览器缩放成1玖px*1九px大小,太大的图标是尚未意思的。

您可以用两种办法定义Logo:用3个静态图片,恐怕用HTML中的canvas成分。用静态图片的话归纳些,不过用canvas成分能够创制尤其平整的图样。

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

大家能够在manifest文件中用default_icon语句来定义那几个Logo,也足以调用setIcon()函数。

升迁文字

唤醒文字是指将鼠标移到扩充Logo上显得的文字。大家能够在manifest中用default_title定义,也足以经过调用setTitle()函数。

Logo标识

Logo标识是指覆盖在扩大图标上的一些文字,举个例子Gmail提示Logo上未读邮件数,P酷威查询工具上P猎豹CS六值。由于标识的地点非常小,他最多只好容纳陆个假名。

安装标志文字只怕背景能够独家选取 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. }

那是五个很轻巧的manifest.json文件模板,在那之中browser_action正是那篇文章降到的东西,default_title是描述,default_icon是图标,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个图标展现在工具栏上,把那些图形保存到文件夹中威尼斯人线上娱乐 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>

在百度主页上开垦这一个扩张,点击第捌个开关”谷歌”,能够把百度的logo换来google的。

四、选拔页面

您能够提供贰个采纳页面(Options
Pages)让用户自定义你的扩展。假使设置了选用页面,那么扩充处理页chrome://extensions将会有多少个链接指向选项页面。

概念选项页面包涵两步:

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大概不帮助那个职能。

咱俩正安排提供三个私下认可的css来驱动不一样扩张的选项页面保持风格一模一样,你能够从那边()查看最新的拓展。

知识补充

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

原文 

由ChromeChina翻译,转发注解出处

5、重新载入参数页面

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