金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > chrome浏览器插件开发入门例子,扩展开发

chrome浏览器插件开发入门例子,扩展开发

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:44

三、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开发我推荐大家就看Facebook官方的示例就够了。英文不好的朋友可以看看阮一峰老师的博客,或者看看这篇入门教程也是阔以的。

使用的例子: 
chrome.bookmarks.onMoved.addListener(...) 
chrome.bookmarks.getTree(...) //具体请查看API 

上面的例子中使用LOCALSTORAGE保存数据,具体介绍可以查看《使用LOCALSTORAGE保存数据》

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

使用React.js开发Chrome插件

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

原文出处: UncleChen   

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

你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面,那么扩展管理页chrome://extensions将会有一个链接指向选项页面。

popup.html是当您点击插件图标时候会弹出来的窗口页面,它的页面内容实际上是如何显示的?这背后的逻辑是由popup.js 实现的,虽然manifest.json里没有指定这个文件。

一、背景

相信看到这篇文章的人应该都用过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,最后介绍如何采用Facebook官方推荐的creat-react-app脚手架来开发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) {...}); 

早期版本的chrome可能不支持这个功能。

现在来试试看把这些文件载入chrome

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来实现打包。

这里还是提到一下跨站点Js攻击的问题,少使用eval转换返回的字符串,而建议使用专门的JSON.parse方法 

四、选择页面

{...

五、其他脚手架推荐

除了自己改造Facebook推荐的creat-react-app外,下面两个脚手架也算是用户比较多的,专门用于开发Chrome插件的脚手架。

  • :默认支持ReactJS,基于webpack。
  • :没有默认支持ReactJS,需要自己修改,基于gulp打包。

    1 赞 收藏 评论

图片 1

使用的方式可以参考官方文档,不过注意并不能简单的替换同名function来达到注入替换事件的效果,不过可以直接使用document.getElementById获取指定的dom组件,并进行修改. 
作用域的问题上: 对于原有的变量并不能访问到,如果需要进行替换,需要进行完整的事件,变量进行重新声明替换 
比较特殊的作用域:对于注入的代码,将会有一个封闭的作用域,并不会与原有的进行冲突,当却可以修改页面的DOM元素 

由ChromeChina翻译,转载注明出处

入门例子 

二、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.png图标和popup.html文件。当然文件名可以随便改,只要和manifest.json里声明的一致就行。

这里就不浪费时间具体说怎么开发插件了,各路前端大牛比我强100倍。但我只强调一点,那就是popup.html中引用的js文件只能是外部引入,不能在popup.html文件里面写js代码。所以一般我们还有见到popup.js文件。另外如果你想知道自己使用的插件有什么秘密,完全可以去Chrome浏览器的安装目录下面把它们给扒出来。。

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

  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>

chrome插件的启动设置是以一个json () 格式的文件指定的 ,manifest.json, 例子里声明了以下这些name/value pair

3.需要注意的细节

由于使用了一些chrome.* API,我们需要在编译js的时候将chrome这个全局对象声明一下。

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

5:弹出的html扩展名文件,进行编写弹出窗编写,允许使用Js and css,使用的时候注意HTML必须包含在文件夹内 
尤其指出,其中可以使用HTML5标准的元素 
插件包含的文件 
1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件 
打包后会被压缩成特殊格式的zip文件,扩展名为.crx 

要是在制作过程中有任何问题,欢迎到http://dev.chromechina.com来讨论交流。本文参考官方指南编写。

拨弄您的代码:

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

可以看到我们添加了一个命令npm run build-chrome-ext,并把background.js丢到了build目录下。如果你还有其他的js,我建议在my-app/src下建立一个my-app/src/chrome文件夹,专用于存在chrome相关其他js代码,然后在build的时候统一丢到build里面。如果要minify这些js,同样可以采用&&方式去添加命令。修改

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

打包插件

官方api文档 

四、应该用哪个脚手架?

当然是Facebook官方推荐的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了。

Windows  Chrome中的多窗口 

如果一切顺利,你的Chrome地址栏将会有个新图标,你的第一个插件诞生了。

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

browserAction的事件 
chrome.browserAction.onClicked.addListener(function(Tab tab) {...}); //将会在点击图标后触发 
//这里的参数,比Js多了一种类型 

定义选项页面包括两步:

以上定义browser action时候,我们加了两个name/value pair,: icon.png 和 popup.html, 这两个文件必须也在项目目录下

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.

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

你可以修改里面的文字图片,制作出极具个性的扩展来了。

"default_title":"Click here!"

常见的事件: 
onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdated 

结束语

}

暂时结束,有空再研究...开始GWT2.0 

好了,我们的扩展制作完成了,载入他们测试一下吧!

a browser action,

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

下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口的内容是一个HTML的web文件,这个弹出窗口不需要包含background文件中的代码,因为,popup.html和background是可以互相访问的。

icon.png是那个会出现在地址栏右侧的插件图标,它是个19px-square PNG file

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

  • 回到Chrome的扩展中心,点击插件下的“重新载入 ”。

manifest文件只在插件被加载时候才被解析,如果你想看到改变代码以后的变化,就需要重载 extension: Visit the extensions page (go to chrome://extensions), and click Reload under your extension.  当您在chrome://extensions/这个页面按下Ctrl+R时候,所有的插件也都会被重载

再次提示,如果需要访问其他网站,一定注意添加权限permissions 

  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>

让我们来为图标加一个提示信息,

setIcon:设置图标 
chrome.browserAction.setIcon(object details) 

以上文章均转自 Chrome扩展插件开发论坛

"browser_action":

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

Browser Action的图标会被浏览器缩放成19px*19px大小,太大的图标是没有意义的。

到这里,您的目录下已经有四个文件, icon.png,manifest.json,popup.html,popup.js.

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

图标标记是指覆盖在扩展图标上的一些文字,比如Gmail提醒图标上未读邮件数,PR查询工具上PR值。由于标记的位置很小,他最多只能容纳4个字母。

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

例子解析

Background Pages, 注册在manifest文件中,用于保存长时间运行的脚本,运行在插件所在的进程中,多用于类似守护线程一样的作用,用于状态的更新 
获取页面的方式: 
var views = chrome.extension.getViews(); //获取到的数组,通过循环或者索引得到指定的view也就是js的windows对象,不过这里只局限配置在manifest中的html元素 
"background_page": "background.html", 

你现在虽然做了第一个插件,但实际上他并没有实现任何功能,我们点击图标,没有任何反应。下面我们就给他增加点功能。

Cross-extension messaging 跨插件消息 
主要使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal 
方法的细节与上述的连接事件一致 

为了扩展更加美观,请遵守下列守则:

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

如果有一些JavaScript知识,可以修改这些扩展,创建一些丰富多彩的效果。

Bookmarks,收藏夹,可以创建,组织和管理收藏夹 
设置权限: manifest文件中 
"permissions": [ 
    "bookmarks" 
  ], 
收藏夹使用tree的形式保存对象,其中主要使用 BookmarkTreeNode对象进行访问,常用的属性有:index, title, and url. 

好了,你已经大概了解了一个扩展程序的基本内容,可以开始写作自己的扩展了。

Content script是在一个特殊环境中运行的,这个环境成为isolated world(隔离环境)。它们可以访问所注入页面的DOM,但是不能访问里面的任何javascript变量和函数。 对每个content script来说,就像除了它自己之外再没有其它脚本在运行。 反过来也是成立的: 页面里的javascript也不能访问content script中的任何变量和函数。

HTML页面

调用对象: chrome.windows 

内容脚本(Content scripts)

UI部分 
Icon:大多图片格式都可以,推荐使用19像素的正方形图片,设置的方式分为两种,manifest文件内的default_icon,或者调用setIcon()方法 
Tooltip:设置manifest的default_title属性,或调用setTitle()方法 
Badge:用于在图标下显示的字符,字数限制在4个字符一下,可以通过setBadgeText() and setBadgeBackgroundColor()设置内容和背景色 
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 

Browser Action必须有一个图标。同时还可以有提示文字、图标标记、弹窗。

写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力. 

这篇文章翻译自。

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"//指定点击按钮后触发的行为, 

选项页面是一个典型的网页,下面是一个选项页面的例子:

background page :用于保存插件的主要逻辑, 
插件的逻辑分为: page action,browser action两种,,background.html文件的js同时控制两种action 

仅在这个扩展需要在大部分页面运行的时候才使用browser action

常见的事件 
onChanged onChildrenReordered onCreated onMoved onRemoved 

这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。好吧,我们现在就开始,其实我也是个新手。

Content Scripts 用于对指定页面的内容进行脚本调用 
同样 需要在manifest文件中进行注册 
  "content_scripts": [ 
    { 
      "matches": ["], 
      "css": ["mystyles.css"], 
      "js": ["jquery.js", "myscript.js"] 
    } 
  ], 
  
常见的属性: 
matches, 字符串数组,根据制定的匹配模式进行对指定URL页面的注入 
js:指定的脚本文件将会被注入到符合的页面中去 可选 
css:需要被嵌入的css,可选 
run_at:用于设置何时进行注入,默认为document_idle,还有其他的:document_start,document_end, 
all_frames:boolean 默认为false 

复制代码

其中的id使用的也是自增,由0开始 
常见的方法  
create , get getChildren getTree move remove removeTree search update 
常见的事件 

  • 回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
  • 选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。

 

比如把popup.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 

一个扩展中的文件常常需要交互。由于扩展的所有文件都由同一个进程执行,网页能够直接给其他页面发送命令。

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

设置标记文字或者背景可以分别使用 setBadgeText() and setBadgeBackgroundColor()。

如果要从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."}); 
  }); 
}); 

我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致,你可以从这里()查看最新的进展。

注:树结构本身比较繁琐一些,可以使用下面方法参考进行访问 
    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比较方便查看对象结构) 

图片 2

Cross-Origin XMLHttpRequest 跨站点的异步调用,用于使用插件访问其他网站的API 
分为本地与外部数据两种方面 

可以使用类似chrome.extension methods such as getViews() and getBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面,第一个页面就可以调用其他页面的函数,甚至可以控制DOM。

常见的方法: create get getAll getCurrent getLastFocused remove update 
常见的事件:onCreated onFocusChanged onRemoved 

静态图片可以是任意常见格式的图片,包括BMP, GIF, ICO, JPEG, or PNG。

action,可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样 
browser_action 包括 a tooltip, a badge, and a popup. 

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

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

五、重置页面

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

Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外,还可以设置提示文字、图标标记、弹出窗口。

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

一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一个web页面,你可以用任何浏览器提供给web页面的接口,从XMLHttpRequest 到JSON ,再到HTML本地缓存都可以使用。

Autoupdating和Packaging章节略过 

  • 把下面两张图片保存到文件夹中,分别取名icon.gif和smile.gif
    图片一: 图片 3     图片二: 图片 4
  • 安装这个插件:
    a.点击右上角扳手,选择扩展程序,打开扩展中心。
    b.点击右上角的“开发人员模式”,使得前面的“+”变成“-”,打开相应的菜单。如果一开始就是“-”,那么不用点击。
    c.点击“载入正在开发的扩展程序按钮”,导入刚才创建的文件夹。

外部网站,需要设置manifest文件中permissions,添加对应的网站地址,更多使用在插件内部功能上 
"permissions": [ 
    "" 
  ], 
对于匹配的URL也可以使用模糊匹配 
"" 
""  表示允许访问所有的网站 ,这里注意对https也要独立的编写 
内置的json转换 JSON.parse(....);可以用于将制定的字符串,转换成所需的js对象 

给Browser Action增加弹窗可以在manifest的default_popup定义弹窗中显示的html文件名字,当然也可以使用setPopup()函数。

默认皮肤,可以通过下面的链接进行查看 
 

Chrome扩展能做什么呢?我们肯定使用过一些扩展,会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互,甚至是从web服务器获取数据。更加详细的内容可以从Developer's Guide看到。

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(...)) 

扩展结构组成结构

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

知识补充

所需的HTML可以为一个完整格式的HTML文档,包含所需的html元素 

background不是唯一存在的HTML文件,比如浏览器行为可能是弹出一个小窗口,这个小窗口的内容就可以调用一个HTML文件。Chrome扩展也能够用chrome.tabs.create() or window.open()这种函数来显示HTML文件。

Override界面: 用于替换新tab界面,区别于默认的界面,在manifest文件中进行注册 
"chrome_url_overrides": { 
    "newtab": "newtab.html" 
  }, 

在百度主页上打开这个扩展,点击第一个按钮"Google",可以把百度的logo换成google的。

同样对browser的建议也适用与page action; 

主文件取名manifest.json,用来描述这个扩展,包括扩展名字、版本、调用的文件、可用域等信息。下面是个典型的manifest文件,这个扩展可以调用google.com的内容。

Message Passing 消息传递 

UI部分

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

仅在小部分页面起作用的话就不要用browser action,而是用page actions。

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

当我们点击一些扩展的时候,会发现有个小弹窗出现,比如我们一开始的例子中。这个弹窗可以包含任何HTML内容,他的大小也是和内容自适应的。

NPAPI Plugins 用于提供Js调用本地二进制代码 ,建议最后使用,也许功能很强大. 

图片 5

提示文字是指将鼠标移到扩展图标上显示的文字。我们可以在manifest中用default_title定义,也可以通过调用setTitle()函数。

复制代码

今天的文章翻译自,介绍Browser Action,即右侧的扩展图标。这节的内容还是挺有趣的。(同样,有翻译需要改进的地方请指出来)

注意事项

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

  • 记事本,用来编写代码
  • Chrome浏览器,这个不能少吧。Windows下,所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本,Mac下载dev版本。

原文 

换成

图片 6

内容脚本可以访问到当前浏览器浏览的页面,而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。下面的图片中,内容脚本可以读取、更改网页的DOM。注意,他不能更改background.html中的内容。

基础知识

这个地址中,<extensionID>是你制作的扩展的唯一标示符,也就是扩展的身份证编号。<pathToFile>是文件相对扩展顶级文件夹得位置。

我们还需要一个图标显示在工具栏上,把这个图片保存到文件夹中图片 7

提示文字

现在点击插件图标看看。我们的第一个插件算是制作成功了。

  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. }
  1. chrome-extension://<extensionID>/<pathToFile>

如果你插件需要和网页交互,那么他就需要一个内容脚本(Content scripts),内容脚本常由JavaScript编写,会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分,而不是扩展的一部分。

三、扩展图标

这个文件的内容有三种语言,HTML、CSS、JavaScript,这三种语言组成一个基本的网页,如果你还不是很清楚的话可以以后慢慢学些。其中调用了Chrome接口函数chrome.tabs.executeScript,也是以后会看到的。整个文件的意思是:1、显示四格不同颜色的矩形框,2、当点击这些矩形框的时候变换页面背景色。

1、在manifest中定义选项页

图标标记

准备工具
2、编写选项页面

你可以用两种方法定义图标:用一个静态图片,或者用HTML中的canvas元素。用静态图片的话简单些,但是用canvas元素可以创建更加平滑的图片。

绝大部分扩展有background文件,一个不可见的文件控制着整个扩展的运行。

  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. }
Browser Action在Manifest文件中的位置

弹窗

二、概述

激动人心的时候来了,在这个文件夹下examples/api/browserAction有些browser action的例子。其中有个set_page_color,我们试着重新编写他。

图片 8

  • 在计算机中创建一个目录来存放插件代码。
  • 在目录里面创建文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码
    1. {
    2.   "name": "第一个Chrome插件",
    3.   "version": "1.0",
    4.   "description": "我的第一个Chrome插件,还不错吧",
    5.   "browser_action": {
    6.     "default_icon": "icon.gif"
    7.   }
    8. }

一、入门

本文由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/

这是一个很简单的manifest.json文件模板,其中browser_action就是这篇文章降到的东西,default_title是描述,default_icon是图标,popup是弹窗。这里的弹窗调用了popup.html文件,我们再创建一个文件popup.html,popup.html是个普通的HTML文件,内容如下:

内容脚本也不是和父扩展完全隔离开来,他也可以和父级扩展交换信息。如下图中所示,内容脚本在发现一个RSS Feed地址后将会给background.html发送一个信息。或者background.html给内容脚本发送一个信息要求改变网页外观。

开始制作第一个插件

下图中,在地址栏右侧的彩色图标就是一个Browser Action。

上面这个图片显示的浏览器至少安装了两个扩展:一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html),这个background文件中有JavaScript代码控制整个浏览器的活动。

图片 9

给第一个插件增加新功能
  • 编辑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. }
  • 下面我们创建一个文本文件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>

不同页面间的交互

你可以放置任何文件到你的扩展里面,但是怎么调用这些文件呢?一般来说,使用相对地址调用,类似HTML中调用文件。下面是个例子,在子文件夹images中有个图片myimage.png,我们可以这样调用它

  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "options_page": "options.html",
  5.   ...
  6. }

复制代码

我们可以在manifest文件中用default_icon语句来定义这个图标,也可以调用setIcon()函数。

图标

也许你注意到当使用Google Chrome debugger查看这些文件的时候给,每个文件的地址是下面这种格式

做任何事情都要有个工具,制作chrome插件需要的工具很少。

其中images/myimage.png表示这个文件。

这是扩展开发指南的第三篇,前面我们首先作了第一个扩展,然后学习了Chrome扩展的大概结构,看完后可能会有些迷惑,别担心,相信随着我们学习的深入,我们渐渐发现我们已经可以做扩展了。当然为了做出优秀的扩展,我们还需要学习一些HTML、CSS、JavaScript的基础知识,网站就不错。

首先我们知道,首先新建一个文件夹myExtension用来存放所有文件,我们知道每个Chrome扩展需要有个manifest.json文件来描述这个扩展,新建文件manifest.json,用文本编辑器打开,输入:

  1. <img src="images/myimage.png">
  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>

使用显眼的图标

把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。

Chrome扩展的组成文件

只要看完这篇文章,并且做过入门指南中的例子,你就可以真正开始开发属于自己的Chrome插件了。

不要试图模仿chrome浏览器原有的扳手/页面图标,你的扩展要独特一些。

  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>
几个小提醒

manifest文件

  • 一个manifest文件(主文件,json格式)
  • 至少一个HTML文件(主题可以没有HTML文件)
  • JavaScript文件 (可选,非必须)
  • 任何其他你需要的文件(比如图片)

扩展里面的HTML文件可以互相访问对方的DOM结构,可以引用其他文件中定义的函数。

当你开发一个扩展的时候,需要把这些文件放在一个文件夹里,当你发布这个扩展的时候,这个文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。

你的图标边缘应该使用alpha透明,这样的话可以融合到各种不同的浏览器主题里。

我们想把自己制作的插件给其他人用,那么就需要将插件打包。

图片 10

Browser Actions创建的图标是一直可见的,如果你想创建一个不是一直不可见的图标,可以使用page action。

下面是个在扩展的manifest文件中注册browser action的例子:

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:chrome浏览器插件开发入门例子,扩展开发

关键词:

上一篇:没有了

下一篇:没有了